By anderson8d on

hi all,

I'm trying to load a node inside my content via Jquery AJAX function load(). I got a nice result by using the function and got the content inside the content BUT...

when it loads the content, like a page creation node (node/add/page), all the sections like upload, comments and path don't work, they just get collapsed with no open function, as you can see in the image below:

http://img109.imageshack.us/img109/7402/ajaxloadproblem.jpg

Analyzing in firebug, the content of this sections are there but hidden.

i think the Behaviors don't reload when the content is requested via AJAX. Is there any way to make the page reload the behaviors after my ajax request?

My code for AJAX request via jquery is:

var paginaAtual;

$(".jquerymenu li a").click(function(){

var pagina = basePath + $(this).attr("href");

if (pagina!= paginaAtual) {

paginaAtual = pagina;

var pagina_div = pagina + " #content-inner";
var pagina_head = pagina + " #header";

var contexto = $('#content-inner')
.html('')
.load(this+" #content-inner")

}

return false;

});

i have tryied the Drupal.attachBehaviors() but didnt work.

any suggestions?

⋅ Categories: Drupal 6.x

Comments

JoeMcGuire’s picture

JoeMcGuire commented

You are on the right track with needing to use Drupal.attachBehaviors()

Does .load() take care of missing stylesheets/javascript only normally attached when that page/form is fully loaded?

I'd also check your not ending up with duplicate IDs.

There is a good development module to help with this: http://drupal.org/project/ajax_load

cduwe’s picture

cduwe commented

Here's my code:

Drupal.behaviors.faqLoad = function (context) {
  //load the node
  $("#faq_ajax_node").load("/what-operational-excellence #node");
  $("#block-views-faqs-block-1 .view-content .title a").click(function(){
  	  var getThisNode = $(this).attr("href");
  	  $("#faq_ajax_node").load(getThisNode + " #node");
  	  $(this).addClass("active");
  	  return false;
  });
}

A couple points to take note of:
#faq_ajax_node is the div into which the node is written.
#node is the id of the DIV that I want inserted (as opposed to the whole page)
Adding class "active" to the link allows me to turn it red via CSS.
(the first statement just puts some content into the div as soon as the page is ready)

Hope this helps.
Colin

duckzland’s picture

duckzland commented

"when it loads the content, like a page creation node (node/add/page), all the sections like upload, comments and path don't work, they just get collapsed with no open function, as you can see in the image below: "

my best bet is the newly ajax fetched content missing the required js.

The easiest way to fix this it to load the js when the page load and then attach the new content using Drupal.attachBehavior();

in your case "node/add/page" You need to load the js in misc folder such as form.js etc.

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com

mellenger’s picture

mellenger commented

It's crazy how long i have looked for this code. I guess this would be hard on performance because jquery is loading the whole page and only taking the #node div, versus writing a custom callback or whatever, but it works!

Andrew Mellenger
https://mellenger.com
https://move2.help

mellenger’s picture

mellenger commented

Okay i figured out how to get better performance out of an ajax call like this. Create a simple module (this is my first one actually) and have your .load() access the url like so:

 $('#container').load('/ajax/path_to_node');

and then put something like this into your .module file:


/**
* Implementation of hook_menu().
*/
function ajax_node_loader_menu() {
  $item['ajax/%'] = array(
    'page callback' => 'ajax_noad_loader_get',
    'type' => MENU_CALLBACK,
    'access arguments' => array('access content'),
  );
	//just exit so it returns the contents of the node
	exit();	
}


function ajax_noad_loader_get($path,$path2 = NULL,$path3 = NULL) {

	if($path3 != NULL){
		$fullpath = $path.'/'.$path2.'/'.$path3;
	}else{
		$fullpath = $path.'/'.$path2;
	}
	
	$source = drupal_get_normal_path($fullpath);
	
	$source = explode("/",$source);
	$theNode = node_load($source[1]);
	print node_view($theNode, FALSE, TRUE);
}

i don't know how to get it to just automatically pass the full path through the page callback as one variable so that's why i had to do the rebuilding nonsense. If anyone can suggest how the function can be cleaned up that would be great. It's loading much much faster now, basically instant.

Andrew Mellenger
https://mellenger.com
https://move2.help

duckzland’s picture

duckzland commented

have u try using .ajax instead of .load and pass the url via post (using .ajax)?

as for your function : 

function ajax_noad_loader_get($path,$path2 = NULL,$path3 = NULL) {
/**
    if($path3 != NULL){
        $fullpath = $path.'/'.$path2.'/'.$path3;
    }else{
        $fullpath = $path.'/'.$path2;
    }
  
    $source = drupal_get_normal_path($fullpath);
  

    $source = explode("/",$source);  **/
// if you only need the $source[1] won't it be the same as $path2?
    $theNode = node_load($path2);
    print node_view($theNode, FALSE, TRUE);
}

the caveats of your code :
1. if the url has query attached to it eg. for pagination then the code will break.
2. if the url is not a node, then the node_view will break. eq. user/1/notification

other wise it should be good.

for better compatibility with pagination / not a node page, take a look at index.php which uses 

		menu_set_active_item($path);
		$return = menu_execute_active_handler();

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com