1

I am using drupal behavior i need to reload a menu after any ajax request.

i have a jQuery function to reload the menu by .load() method.

menu items reload properly after any request. but when i click on menu items the page will refresh instead of loading ajax.(my site is full ajax)

every a tags in my site are ajax. but the part i load with .load() method is not ajax!

when i comment out the jQuery codes my menu a tags become ajaxified again.

what is wrong with my jQuery function?

i have 2 menu the first menu shows content types of the site and second menu shows categories. when you click on a content type in first menu. in the second menu the categories of that content type will load by ajax.

jQuery function:

(function ($) {
    Drupal.behaviors.ajaxMenuCategory = {
        attach: function (context, settings) {
            var selector='#nav-category-wrapper';
            var content='#nav-category';
            ajaxBefore(selector);
            ajaxAfter(selector,content);
        }
    } 

    function ajaxAfter(selector, content){

        $(selector).css('height', '');

        var pathname = window.location.pathname; // Returns path only

        $(selector).load(pathname+' '+content, function(){
        $(selector).fadeIn('fast');
    });

    }

    function ajaxBefore(selector){

        $(selector).css('height', $(selector).height() + 'px');

    }
})(jQuery);

i have edited my js file,by adding this line:

Drupal.attachBehaviors(content);

the Ajax works now but the menu items blink and change frequently. menu items switch between current content type you clicked and the last content type that had been clicked frequently. (menu shows the categories of current content type then changed and shows the categories of the last content type that have been clicked and it changes frequently)

edited js file:

(function ($) {
Drupal.behaviors.ajaxMenuCategory = {

  var selector='#nav-category-wrapper';
  var content='#nav-category';
  ajaxBefore(selector);
  ajaxAfter(selector,content);

}
}

function ajaxAfter(selector, content){
// Preserve the height of the current content to avoid the entire page
// collapsing.
$(selector).css('height', '');
var pathname = window.location.pathname; // Returns path only

$(selector).load(pathname+' '+content, function()
    {     

Drupal.attachBehaviors(selector);


    });


}
function ajaxBefore(selector){
// Preserve the height of the current content to avoid the entire page
$(selector).css('height', $(selector).height() + 'px');
}


})(jQuery);

there is no error now.

Menu html code:

<div id="nav-category-wrapper" class="nav-category-wrapper" style="">
<div id="nav-category" class="nav-category ">
<ul>
<li class="">
<a href="/publication/category/culture">...

Any help would be much much appreciated.

  • If javascript is not working there is likely javascript errors. Can you post any javascript errors. – rooby Dec 15 '14 at 8:54
  • Help, please! :'( – – faren Dec 16 '14 at 14:14
  • Can you add the error to the original question and also add the full error, including the line number and file name where the error occurred. Without knowing what file it is in the error is not useful. – rooby Dec 16 '14 at 20:37
  • i have edited my function i don't have error now. but something is wrong about use of: Drupal.attachBehaviors(selector); – faren Dec 17 '14 at 6:50

Your Answer

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

Browse other questions tagged or ask your own question.