Change content of a tab with ajax

Change content of a tab with ajax - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Change content of a tab with ajax (/showthread.php?tid=65316)

Change content of a tab with ajax - Headpetrol - 05-28-2016

Hi guys!

I have searched the forum, but I did not find a solution to my problem. What I am trying to do
is a list (select) where a user chooses a matchday to display. If the user chooses matchday 1
then matches from that match day show up in the tab. Here is an example of what I am trying to create.
If you change the Spieltag value than the results change to that match day. What I got so far is this

Controller Stats

Code:
function _fixtures(){

   @$dropdown = $_GET['matchomgang'];

  $data['matchomgang'] = $this->mdl_stats->all_games($this->uri->segment(3));

  $data['omgang'] = $this->mdl_stats->get_matchfixtures($this->uri->segment(3), $dropdown);

        $this->load->view('fixtures',$data);

}

Model Stats_model

Code:
function get_matchfixtures($compid, $matchday) {

   $table = "matcher");

    $this->db->select(" *, h.club_shortname as home, a.club_shortname as away");

            $this->db->join('clubs h', 'h.club_id = matches.matches_hteam','left');

            $this->db->join('clubs a', 'a.club_id = matches.matches_ateam','left');

            $this->db->where("comp_id = '$compid' and matchday = '$matchday' ");

        $query = $this->db->get($table);

        return $query;

    }

    function all_games($comp){

        $query = $this->db->query("SELECT distinct a.matchday FROM matches a

                                 INNER JOIN

                                 (

                                 select comp_id,count(*) from matches

                                 group by comp_id

                                 having count(*) > 1

                                 ) b on a.comp_id = b.comp_id

                                 WHERE a.comp_id = '$comp'

                                 ORDER BY a.matchday ASC");

            return $query;

    }

View

Code:
<select id="matchomgang" name="matchomgang" onchange="chooseMatchday(this.value);">

<?php foreach($matchomgang->result() as $omg){?>

<option value="<?php echo $omg->matches_matchday; ?>" >

<?php echo $omg->matches_matchday; ?>. omgang</option>

<?php } ?>

</select>

<div id="content"></div>

<ul class="matcher">

<?php foreach ($omgang->result() as $match){?>

<li><?php echo $match->home; ?> <?php echo $match->matches_hgoal; ?> : <?php echo $match->matches_agoal; ?> <?php echo $match->away; ?>

</li>

<?php } ?>

Ajax

Code:
function chooseMatchday(str)

{

var xmlhttp;

if (str=="")

  {

  document.getElementById("content").innerHTML="";

  return;

  }

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("content").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("GET",'<?php echo base_url()?>/stats/_fixtures ?>/?matchomgang='+str,true);

xmlhttp.send();

}

Hopefully someone can help me find a solution to this.
Best regards.
Headpetrol

RE: Change content of a tab with ajax - skunkbad - 05-28-2016

You mention that you're having a problem, but you don't say what the problem is.

When I change the value in the Spieltag dropdown, I don't think there is an AJAX request that is triggered. It seems to me that the whole page is reloaded. This is easy to do. You just use javascript to monitor the dropdown for a change event, and when there is a change you create a URL and redirect to it.