0

The Ajax framework is very nice but i want more complex effects. So I am trying to do the Ajax calls via Jquery. The goal here is to load nodes by clicking some links on the menu but the nodes contains an image which pop ups with a lightbox and also contains a from which submits via Ajax. For demo site i am using Drupal commerce. here is the demo to check out.

I am using Drupal.attachBehaviors(document); to re-attach the needed js scripts. The problem is that some of the behaviors are attached and some others are not. For example the first menu link 'Products' is a view and it uses ajax pagination but it loses this functionality but the image lightbox in this view does work. So i am little confuse here.

This is my code.

/*
 *  Implemets hook_menu()
 */

function myajax_menu() {
$items = array();

$items['myajax'] = array(
    'title' => 'Ajax',
    'page callback' => 'myajax_callback',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
);

$items['myajax/view'] = array(
    'title' => 'Ajax',
    'page callback' => 'myajax_view_callback',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
);

return $items;
} 
/*
 *  Ajax handling
 */
function myajax_callback($nid = '') {
      $node = node_load($nid);
      $vnode = node_view($node);
      return theme('node',$vnode);
}

function myajax_view_callback($view = '') {
      print views_embed_view($view, 'default');
}

and my js file

(function ($) {

Drupal.behaviors.myajax = {
    attach: function(context,settings){
        $('#main div.column').before('<div id="loading">Loading...</div>');


        $('a.ajax_link', context).once().bind('click',function(e){
            $(this).addClass('ajaxafy');
            e.preventDefault();
            var url = $(this).attr('href').split('/');
            //console.log(settings);
            $('#loading').fadeIn();
            $.ajax({
               type: "POST",
               url: Drupal.settings.basePath + 'myajax/' + url[2],
               data: {'js':1}, // you can also pass block name and act more dynamicly
               success: function (response){
                  $('#loading').fadeOut()   
                  $('#main #myajax', context).html(response)
              Drupal.attachBehaviors(document);                                      

              },
            });
        });
        $('a.ajax_link_view',context).once().bind('click',function(e){
            e.preventDefault();
            var url = $(this).attr('href').split('/');
            $('#loading').fadeIn();
            $.ajax({
               type: "POST",
               url: Drupal.settings.basePath + 'myajax/view/' + url[1],
               data: {'js':1}, // you can also pass block name and act more dynamicly
               success: function (data){
                  $('#loading').fadeOut()
                   $('#main #myajax', context).html(data);
                   Drupal.attachBehaviors(document);                                      
              },
            });

        });

    }
};



})(jQuery)

Alse the webform submits also using Ajax but it loses that behavior.

What i am missing here? Please check the demo to see what's going on. Thanks in advance.

  • 1
    maybe the js files needed for the ajax pagination are not included in the initial page. so when you try to reattach behaviours, there are no behaviours defined for ajax pagination. I suggest to look what js files you need for that and include them in the initial page output. – Marius Ilie Sep 14 '12 at 12:44
  • The first page is the one with the view. So i guess all scripts are initially loaded. Anyway how i should load all the scripts??? – dianikol Sep 14 '12 at 18:05
-1

Must be:

Drupal.attachBehaviors($('#main'), context);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.