Clicking on Ajax links twice doesn't work as expected

0DownUp

In my Cake PHP application (1.3), users can add a team to their watchlist. I have made adding and removing to watchlist Ajax operation using JQuery JsHelper. Both operations work fine independently.

However when a user adds a team to watchlist (works fine) and immediately clicks on remove from watchlist link, it loads the remove view only instead of updating the div without refreshing the page. But after adding a team to watchlist, user clicks on some other links (non-ajax) and then tries to remove the team from watchlist, it works fine.

I assume something is not being updated correctly when user add to watchlist and immediately remove from watchlist. Below is the controller and view code for both actions.

CONTROLLER CODE 


    function add($team_id = null) {
    if(!$team_id)   {
        $this->Session->setFlash(__('Invalid team', true));
        $this->redirect(array('controller' => 'teams', 'action' => 'index'));
    }

    $this->data['Watchlist']['team_id'] = $team_id;
    $this->data['Watchlist']['user_id'] = $this->Auth->user('id');      
    $this->Watchlist->create();
    $this->Watchlist->save($this->data);
    $this->set('current_city', $this->Cookie->read('_current_cityid'));
    $this->set('watchlist_id', $this->Watchlist->id);
    $this->render('add', 'ajax');
}

function remove($id = null) {
    if (!$id) {
        $this->Session->setFlash(__('Invalid ID for watchlist', true));
        $this->redirect(array('controller' => 'team', 'action' => 'index'));
    }
    $this->Watchlist->delete($id); 
    $this->set('current_city', $this->Cookie->read('_current_cityid'));
    $this->set('watchlist_id', $id);
    $this->render('remove', 'ajax');
}

View Code 


//add.ctp    
<?php echo $this->Js->link(__('Unwatch', true), array('controller' => 'watchlists', 'action' => 'remove', $watchlist_id), array('class' => 'btn', 'update' => '#watch-btn'));?>

//remove.ctp
<?php echo $this->Js->link(__('Watch this Team', true), array('controller' => 'watchlists', 'action' => 'add', $watchlist_id), array('class' => 'btn', 'update' => '#watch-btn'));?>

Jquery Code 


<a id="link-1577632165" class="btn" href="/watchlists/remove/4e96d2ca-9a10-409d-b7f5-0a4507063618">Unwatch</a>

//<![CDATA[
$(document).ready(function () {$("#link-1949180817").bind("click", function (event) {$.ajax({dataType:"html", success:function (data, textStatus) {$("#watch-btn").html(data);}, url:"\/watchlists\/add\/4e7c5af6-7110-426a-80d4-062207063618"});
return false;});});
//]]>
After reloading the page 'Add to watchlist' - (Link ID and URL are correct) 

<a id="link-1441882285" class="btn" href="/watchlists/remove/4e96d31b-b600-4df3-9e86-1cb107063618">Unwatch</a>

//<![CDATA[
$(document).ready(function () {$("#link-1441882285").bind("click", function (event) {$.ajax({dataType:"html", success:function (data, textStatus) {$("#watch-btn").html(data);}, url:"\/watchlists\/remove\/4e96d31b-b600-4df3-9e86-1cb107063618"});
return false;});});
//]]>

After looking at JQuery code, one thing is clear. The div is updated however the new Jquery ajax link (for removing team from watchlist) is not being updated. Do I need to pre-load Jquery for both the links in page .. if so, how? But I guess links are dynamically generated everything an action is performed so not sure if pre-loading the links will work. I am soooo confused :-(

Asked by smartidiot, on 13/10/11

1 Answer

0DownUp

I think jQuery had not bind link onclick inside div_updated when div_updated is updated. Sometimes I still get problem like you, I don't know why, but I fixed my problem by showing a simple non-ajax link with attribute onclick="some_function_ajax_jquery(this)"

and in webroot/js/main.js, I write some codes like below:


function some_function_ajax_jquery(object)
{
     $("#loading").show();
     $.ajax({
         url: $(object).attr("href"),
	 timeout: 15000,
	 type:"GET",
	 success: function(html){
		$("#loading").hide();

		$('#watch-btn').html(html); // '#watch-btn' is a div to need to be updated.
	}
    });

    return false;
}

Hope.

Answered by SuperBiBion 14/10/11

<< previous next >>

Your Answer

You can use Creole Wiki Syntax to format your text.

Rating

0

Viewed

557 times

Last Activity

on 14/10/11

Related Questions