Welcome Guest, Not a member yet? Register   Sign In
Change content of a tab with ajax
#1

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
Reply
#2

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.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB