By john_the_noob on

Hi everybody,

i found this nice AJAX turorial: http://www.viziontech.co.il/tutorial1 and added lots of stuff and it works fine. But i can´t trigger the refresh with links from my JSON object. So i made a very simple module and now i am wondering: Why isn´t it working ?

the html:

<div id="first_container"> first ajax container <br> </div>
<br>Trigger: <a class="categoryLink" href="/komparsenbewerbung/22/1/2/1">Trigger !</a><br></div> 
<div id="second_container"> second ajax container<br></div>

the PHP function - the rest really should be fine as the module works as expected with the first link

function dynamic_products_get_by_category_id($cat_id, $second_id){

$items = '<br>first parameter: '.$cat_id.' second: '.$second_id.' <br>';
 
$second_array = '<br>this is the second array<a class="categoryLink" href= "/komparsenbewerbung/22/1/2/1">why does the first link update the divs, but this one not ?</a><br>';
     
return drupal_json(array('products'=>$items,'seconds'=>$second_array));
exit;
}

And here comes the Javascript - i´m sure here lies the problem, see below. I left the original comments. The only change i made is to update 2 divs now.


// $Id$
Drupal.behaviors.komparsen_bewerbung = function (context) {
  $('a.categoryLink:not(.categoryLink-processed)', context).click(function () {
    // This function will get exceuted after the ajax request is completed successfully
    var updateBewerber = function(data) {
      // The data parameter is a JSON object. The “products” property is the list of products items that was returned from the server response to the ajax request.
      $('#first_container').html(data.products);
      $('#second_container').html(data.seconds);	  
    }
    $.ajax({
      type: 'POST',
      url: this.href, // Which url should be handle the ajax request. This is the url defined in the <a> html tag
      success: updateBewerber, // The js function that will be called upon success request
      dataType: 'json', //define the type of data that is going to get back from the server
      data: 'js=1' //Pass a key/value pair
    });
    return false;  // return false so the navigation stops here and not continue to the page in the link
}).addClass('categoryLink-processed');
}

Debugging Info: the js adds the categoryLink-processed class to the original html link, but not to the link returned via JSON.
When i click the first link, it works as expected and updates both divs. The second link returns the JSON object {..} in a new window.

Any help is appreciated !

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

At the end of 'updateBewerber' you need to call Drupal.behaviors.komparsen_bewerbung(newContext) where newContext is the new element that includes the new link.

john_the_noob’s picture

john_the_noob commented

Nice ! That did the trick !

Two questions for my understanding:
(1) Is it ok to call it 3 times for my 3 divs ?

   var updateBewerber = function(data) {
      $('#first_container').html(data.bewerber);
      $('#second_container').html(data.genommen);	  
      $('#third_container').html(data.abgelehnt);	  
 Drupal.behaviors.filmdreh_bewerber_sortieren('#first_container');	  
 Drupal.behaviors.filmdreh_bewerber_sortieren('#second_container');	  
 Drupal.behaviors.filmdreh_bewerber_sortieren('#third_container');	  

    }

(2) Can you explain what it actually does ? Does it "compute" the whole div container and add the classes to the links ?

nevets’s picture

nevets commented

That works, if you have a wrapper div you could call it one that. The argument simply limits the behavior to that element and it's children (speeds up processing)