Question

I am trying to get an AJAX script working on my page (working with Drupal 7). The content of the page should be loaded when clicking my menu links, but the page shouldn’t be refreshed (this will interfere with a different script in jQuery that animates the banner)

Here is the source code:

    (function ($, Drupal) {

    jQuery.error = console.error;

    $("<link/>", {
       rel: "stylesheet",
       type: "text/css",
       href: "../css/pages.css"
    }).appendTo("head");

    $(document).ready(function()
    {
      $('.menu-704,.menu-797,.menu-359,.menu-796').click(function()
      {
         $('#main').load('linktopage.html');
      });
});

    })(jQuery, Drupal);

Now, this does work, but I experience the following problems:

• Whenever I click on a navigation link, the whole div#main is moved down for some unknown reason
• Doing this duplicates the logo that I added via the Appearance settings in Drupal

Answer 1

If the link is a themed page, Try changing to $(‘#main’).load(‘linktopage.html #main’)