+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Ajax stops working after first click (/showthread.php?tid=28370)
Ajax stops working after first click - El Forum - 03-09-2010
[eluser]bondjp[/eluser]
So my problem is that ajax only works when i click "nextweeklink" link for the first time, it updates the table with next week's appointments and then stops working when i try and click again "nextweeklink" but firebug says script was OK.
Thanks
ResultsView
Code:
[removed]
$(document).ready(function(){
$(function () {
$('#nextweeklink').livequery('click',function() {
$('<div id="resultdr">').load('searchresults/ajax_nextweek #result_dr', function() {
$(this).hide('#resultdr').replaceAll('#resultdr') ;
});
return false;
});
});
[removed]
</head>
<body>
............
<div id="resultdr">
<hr>
<table class="search_results" id="search_results" >
<thead id="thead">
<tr class="table_head" id="table_head">
<?php $weekdates=substr($WeekDate[1],8,2);
if ($weekdates>$lowEnd){?>
<th class="prev_week" id="prev_week">
<a class="prevWeekLink" id="prevweeklink" rel="nofollow" title="search prev week">Prev. Week</a>
</th>
<?php } else {?>
<th>
</th>
<?php }?>
<th class="calendar">
<span class="day">Monday</span>
<span class="date"><?php echo $WeekDate[1];?></span>
</th>
<th class="calendar">
<span class="day">Tuesday</span>
<span class="date"><?php echo $WeekDate[2];?></span>
</th>
..............................................
<th class="next_week">
<a class="nextWeekLink" id="nextweeklink" rel="nofollow" title="search next week">Next Week</a>
</th>
</tr>
</thead>
<?php foreach($docs as $row):
$name=$row->name;
$addr=$row->address;
$doc_id=$row->doctor_id;
<tbody>
<tr>
<td class="calendar" id="calendar" rowspan="1">
</td>
<td class="calendar alt" id="monday" rowspan="1">
<div>
<?php
//get appointments
foreach($timeslots as $row):
$date=$row->data;
$docid=$row->doctor_id;
$date = substr($date, 0, 10);
if ($doc_id==$docid){
if ($WeekDate[1]==$date){?>
<center>
<?php
$date=$row->data;
$date=substr($date,11,5);
echo anchor ($date,$date);?>
</center>
<?php }
}
endforeach;?>
</div>
</td>
<td class="calendar" id="tuesday" rowspan="1">
<div>
<?php
foreach($timeslots as $row):
$date=$row->data;
$docid=$row->doctor_id;
$date = substr($date, 0, 10);
if ($doc_id==$docid){
if ($WeekDate[2]==$date){?>
<center>
<?php
$date=$row->data;
$date=substr($date,11,5);
echo anchor ($date,$date);?>
</center>
<?php }
}
endforeach;?>
</div>
</td>
........................................
</tr>
</tbody>
<?php endforeach;?>
</table>
<?php echo $this->pagination->create_links(); ?>
</div>ajax_nextweek Controller
Code:
//pagination
.............
$this->pagination->initialize($config);
//get the day number for calculating next week
$query=$this->uri->segment(3);
$data['datas']=$this->Results->getDatasNextweek($query);
......................
$this->load->vars($data);
$this->load->view('ajax_timeslots', $data);
}Ajaxview - ajax_timeslots view (It will replace my calendar appointments)
Code:
<div id="result_dr">
<?php foreach($datas as $row):
$datais=$row;//current day value from ajax_nextweek controller
endforeach;?>
<?php //calculate day of the week
//$lowEnd=date("w");
$lowEnd=$datais;
$highEnd=$lowEnd+7;
$weekday=0;
for ($i=$lowEnd; $i<=$highEnd; $i++) {
$WeekDate[$weekday]=date("Y-m-d",mktime(0, 0, 0, date("m") , date("d")+$i, date("Y")));
$weekday++;
}
?>
<table class="search_results" id="search_results" >
<thead id="thead">
<tr class="table_head" id="table_head">
<?php $weekdates=substr($WeekDate[1],8,2);
if ($weekdates>$lowEnd){?>
<th class="prev_week" id="prev_week">
<a class="prevWeekLink" id="prevweeklink" rel="nofollow" title="search prev week">Prev. Week</a>
</th>
<?php } else {?>
<th>
</th>
<?php }?>
<th class="calendar">
<span class="day">Monday</span>
<span class="date"><?php echo $WeekDate[1];?></span>
</th>
..............................................
<th class="next_week">
<a class="nextWeekLink" id="nextweeklink" rel="nofollow" title="search next week">Next Week</a>
</th>
</tr>
</thead>
<?php foreach($docs as $row):
<tbody>
...........// equals to ResultsView <Tbody>
</tbody)
<?php endforeach;?>
</table>
<?php echo $this->pagination->create_links(); ?>
</div>Ajax stops working after first click - El Forum - 03-09-2010
[eluser]Kamarg[/eluser]
If I'm reading this correctly, you're actually replacing your nextweeklink element when you do the .load and fill in a bunch of new html including a new nextweeklink. Since the click event was bound to the now removed link, your new links have no javascript action associated to them. You either need to bind the click event to the new nextweeklink element after the .load or rework it so you don't replace the original.
Edit: Just read the livequery plugin description. Seems like it should be taking care of this for you and so you can ignore my post.
2nd Edit: From further in the livequery documentation.
Quote:When an element no longer matches a selector the events Live Query bound to it are unbound. The Live Query can be expired which will no longer bind anymore events and unbind all the events it previously bound.
It looks like it's saying that if at any time there aren't any nextweeklink items, it will unbind the event completely. So possibly this is still your problem.
Ajax stops working after first click - El Forum - 03-09-2010
[eluser]bondjp[/eluser]
The links for "nextweek" and "prevweek" are like this:
<th class="prev_week" id="prev_week">
<a class="prevWeekLink" id="prevweeklink" rel="nofollow" title="search prev week">Prev. Week</a>
</th>
<th class="next_week" id="next_week">
<a class="nextWeekLink" id="nextweeklink" rel="nofollow" title="search next week">
</th>
Ajax stops working after first click - El Forum - 03-09-2010
[eluser]bondjp[/eluser]
[quote author="Kamarg" date="1268175226"]If I'm reading this correctly, you're actually replacing your nextweeklink element when you do the .load and fill in a bunch of new html including a new nextweeklink. Since the click event was bound to the now removed link, your new links have no javascript action associated to them. You either need to bind the click event to the new nextweeklink element after the .load or rework it so you don't replace the original.[/quote]
Yes, you're right i replace it with a new one from the ajax_timeslots view.
I thought livequery would take care of bind it for me.
Can you point me on how can i do it?
Thanks
Ajax stops working after first click - El Forum - 03-09-2010
[eluser]Kamarg[/eluser]
The easiest thing would be to get rid of the livequery. Stick the anonymous function into a non-anonymous function and code an onclick attribute into your nextweeklink element in your view. There's plenty of other ways to do it but that's the simplest that I can think of right now.
Ajax stops working after first click - El Forum - 03-09-2010
[eluser]bondjp[/eluser]
[quote author="Kamarg" date="1268204068"]The easiest thing would be to get rid of the livequery. Stick the anonymous function into a non-anonymous function and code an onclick attribute into your nextweeklink element in your view. There's plenty of other ways to do it but that's the simplest that I can think of right now.[/quote]
Thanks, can you point me to some examples?
Sorry but i'm new to jquery.
Ajax stops working after first click - El Forum - 03-10-2010
[eluser]Kamarg[/eluser]
Remove the $(document).ready() function and replace it with the below code.
Code:
function bindClick() {
$('<div id="resultdr">').load(
'searchresults/ajax_nextweek #result_dr',
function() {
$(this).hide('#resultdr').replaceAll('#resultdr') ;
}
);
return false;
}Then anywhere you have
Code:
<a class="nextWeekLink" id="nextweeklink" rel="nofollow" title="search next week">Next Week</a>add
Code:
onclick="return bindClick();"It's untested but I think it should do the trick.
Ajax stops working after first click - El Forum - 03-10-2010
[eluser]bondjp[/eluser]
Still no luck
.Anymore ideas?
Thanks.
Ajax stops working after first click - El Forum - 03-10-2010
[eluser]bondjp[/eluser]
Just tried to do appendTo instead of ReplaceAll to see if something was called and the first click it shows the correct values but the second just shows a copy of the first click.