Ajax stops working after first click

[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]
&lt;/head&gt;
&lt;body&gt;
............
<div id="resultdr">    
<hr>
<table class="search_results" id="search_results" >
    <thead id="thead">
    <tr class="table_head" id="table_head">
             &lt;?php $weekdates=substr($WeekDate[1],8,2);
             if ($weekdates>$lowEnd){?&gt;
             <th class="prev_week" id="prev_week">
                 <a class="prevWeekLink" id="prevweeklink" rel="nofollow" title="search prev week">Prev. Week</a>
            </th>
            &lt;?php } else {?&gt;
        <th>
        </th>
        &lt;?php }?&gt;
                    
        <th class="calendar">
            <span  class="day">Monday</span>
            <span class="date">&lt;?php echo $WeekDate[1];?&gt;</span>
        </th>
        <th class="calendar">
        <span class="day">Tuesday</span>
        <span class="date">&lt;?php echo $WeekDate[2];?&gt;</span>
        </th>
        
..............................................            
                    
        <th class="next_week">
        <a class="nextWeekLink" id="nextweeklink" rel="nofollow" title="search next week">Next Week</a>
        </th>
    </tr>
    </thead>    

    &lt;?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>
        &lt;?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){?&gt;
            <center>
            &lt;?php
            $date=$row->data;
            $date=substr($date,11,5);
            echo anchor ($date,$date);?&gt;
            </center>
        &lt;?php    }
        }
        endforeach;?&gt;    
        </div>
        </td>
        <td class="calendar"  id="tuesday" rowspan="1">
        <div>
        &lt;?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){?&gt;
            <center>
            &lt;?php
            $date=$row->data;
            $date=substr($date,11,5);
            echo anchor ($date,$date);?&gt;
            </center>
        &lt;?php    }
        }
        endforeach;?&gt;    
        </div>
        </td>
........................................

    </tr>    
    </tbody>
        &lt;?php endforeach;?&gt;
</table>
&lt;?php echo $this->pagination->create_links(); ?&gt;
</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">
&lt;?php foreach($datas as $row):
        $datais=$row;//current day value from ajax_nextweek controller
    endforeach;?&gt;    
        &lt;?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++;
        }
     ?&gt;
<table class="search_results" id="search_results" >
    <thead id="thead">
    <tr class="table_head" id="table_head">
             &lt;?php $weekdates=substr($WeekDate[1],8,2);
             if ($weekdates>$lowEnd){?&gt;
             <th class="prev_week" id="prev_week">
                 <a class="prevWeekLink" id="prevweeklink" rel="nofollow" title="search prev week">Prev. Week</a>
            </th>
            &lt;?php } else {?&gt;
        <th>
        </th>
        &lt;?php }?&gt;
                    
        <th class="calendar">
            <span  class="day">Monday</span>
            <span class="date">&lt;?php echo $WeekDate[1];?&gt;</span>
        </th>
      
..............................................            
        <th class="next_week">
        <a class="nextWeekLink" id="nextweeklink" rel="nofollow" title="search next week">Next Week</a>
        </th>
    </tr>
    </thead>    
    &lt;?php foreach($docs as $row):
          
     <tbody>
        ...........// equals to ResultsView <Tbody>
    </tbody)
     &lt;?php endforeach;?&gt;
  </table>
        &lt;?php echo $this->pagination->create_links(); ?&gt;    
</div>

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

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.

[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>

[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

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

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

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

[eluser]bondjp[/eluser]
Still no luck .
Anymore ideas?
Thanks.

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