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.
