By harlejus on

Hi,

I have a problem loading only div id="page" part without refreshing a whole page after clicking the menu button. It should be done with jQuery or Ajax. I have searched any work-arounds about this topic for a couple of days but haven't found any solution built still.

Thank you for your time.

⋅ Categories: Drupal 7.x

Comments

Anonymous’s picture

Anonymous (not verified) commented

You can find the general idea on how to do it here:

http://api.drupal.org/api/drupal/includes--ajax.inc/group/ajax#comment-1...

harlejus’s picture

harlejus commented

Thank you. Do you have any idea how to implement this function to the simple drupal menu link? It looks a bit confusing to me.

Anonymous’s picture

Anonymous (not verified) commented

There are a few ways you could do it, personally I wouldn't use the method I posted above but I thought that would be the easiest to grasp. I'll try to explain what I think will be the quickest way:

Basically you want to add some jQuery to your menu links that will perform an AJAX request when clicked instead of browsing to the page as normal. You'll need to add a query string to the URL you request via AJAX so your custom module will know to print the content as soon as it's built and stop the script running, that way the output from the content region will be available to your calling jQuery and you can replace the page output. This is very rough but might help you get started:

In a JS file included in your page:

(function($) {
  $(document).ready(function() {
    var selector = '#main-menu li a'; // Or whatever selector you need to target the links in your menu
    
    $(selector).click(function(e) {
      e.preventDefault();
      
      $.ajax({
        url: $(this).attr('href') + '?ajaxrequest',
        success: function(data) {
          // I'm assuming here that the wrapper around your content region will be given an ID of 'region-content', you'll need to check that
          $('#region-content').replaceWith(data);
        }
      });
    });
  });
})(jQuery);

Then in a module file:

function mymodule_page_alter(&$page) {
  if (isset($_GET['ajaxrequest'])) {
    echo render($page['content']);
    drupal_exit();
  }
}

You'll need to visit the system table in your database and set the weight column of your module to a high number (1000 is good), this will make sure its hooks are called after any other modules' and the page content will be fully built.

I'm positive this method would be considered a hack, there are more 'Drupally' ways to do things but I think they would require more code.

Without knowing the exact layout of your site that's the best I can do, hope it helps!

harlejus’s picture

harlejus commented

Thanks for your useful comment. So I should create a new module for this function?

I have tried to implement this .js file into my theme adding the path in the .info file: 

(function($) {
  $(document).ready(function() {
    var selector = '#menu li a'; // Or whatever selector you need to target the links in your menu
   
    $(selector).click(function(e) {
      e.preventDefault();
     
      $.ajax({
        url: $(this).attr('href') + '?ajaxrequest',
        success: function(data) {
          // I'm assuming here that the wrapper around your content region will be given an ID of 'region-content', you'll need to check that
          $('#page').replaceWith(data);
        }
      });
    });
  });
})(jQuery);

but for some reason it has no effect to my site. If I understood you correctly, I should create a module with this .php function: 

<?php
function mymodule_page_alter(&$page) {
  if (isset($_GET['ajaxrequest'])) {
    echo render($page['content']);
    drupal_exit();
  }
}
?>
Anonymous’s picture

Anonymous (not verified) commented

Sorry like I said, without knowing pretty much everything about your site setup/structure I'm not going to be able to help any further. You might want to check out the pages on module development: http://drupal.org/developing/modules

harlejus’s picture

harlejus commented

I figured out something - with this type of function it works:

(function($) {

  $(document).ready(function() {
    var selector = '.menu li a'; // Or whatever selector you need to target the links in your menu

    $(selector).click(function(e) {
      e.preventDefault();
		console.log("url: " + $(this).attr('href') + '?ajaxrequest');
      $.ajax({
        url: $(this).attr('href') + '?ajaxrequest',
        success: function(data) {
          // I'm assuming here that the wrapper around your content region will be given an ID of 'region-content', you'll need to check that
          $('#page').replaceWith(data);
        }
      });
    });
  });
})(jQuery);

It should have been: .menu li a

But now it loads a whole page into a place I want but how to load only part of the page - just a #page part(without all the headers)?

harlejus’s picture

harlejus commented

I have read the instructions about the module creation and created a module with your function. It is .module file: 

<?php

function ajax_page_part_page_alter(&$page) {
  if (isset($_GET['ajaxrequest'])) {
    echo render($page['content']);
    drupal_exit();
  }
}

Also I have changed the weight in the database but still all the page loads into the #page not just the small part. Do you have any ideas why?

If I include the .js file in the the .info file the script works including a whole page and if I include .js in the module .info file the script do not works and I can't see it loading on the page.

Anonymous’s picture

Anonymous (not verified) commented

The code I provided is to replace the entire 'content' block region with the same region from the newly requested page. If not that, what exactly are you trying to replace?

harlejus’s picture

harlejus commented

Yes, that's correct but it loads a bit differently now. Without adding the module(just .js) it loads a whole page into the provided region. But with the module and php script you provided, Drupal link works only for one time and not completely correctly.

You have understood everything correctly but I guess there is a bug somewhere.

When I click the link for the first time it works correctly loading only the #page part(only the background color disappears) but when I try to click the links more times Drupal do not inserts the content any more(even if it shows getting some data in the firebug console but it fails to insert that data)

Thanks for your help.

Stefie_’s picture

Stefie_ commented

It is only working correctly the first time you click on the Link because you're replacing the whole <div id="page">...</div> container with the new $page['content']. When you're clicking on a Link afterwards, the Javascript can't find the element #page anymore because you replaced (and removed) it on the first click.

use:

$('#page').replaceWith('<div id="page">' + data + '</div>');

instead of:

$('#page').replaceWith(data);

harlejus’s picture

harlejus commented

maybe you know how to get #page attribute from $page['content'] in your given function:

function ajax_page_part_loading_page_alter(&$page) {

if (isset($_GET['ajaxrequest'])) {
echo render($page['content']);

drupal_exit();
}
}

pipep’s picture

pipep commented

thanks for this @_isos

Anonymous’s picture

Anonymous (not verified) commented

Great code, though one snag I'm afraid... I used this code and it works except content does not display properly, a JS pageflip gallery does not load properly and a webform is displaying a bit differently design wise (I haven't tested with views yet). Is this normal? Are certain things not being loaded? If I tried to render the whole page instead of just content (replacing page div) it works a bit better though - though this is not ideal of course.. How would I get the page built properly?

Thanks a lot for any assistance!

PawelR’s picture

PawelR commented

subscribe