Problem with responseHTML in Request call

32 views
Skip to first unread message

Lambe

unread,
Jul 9, 2008, 4:57:31 PM7/9/08
to MooTools Users
hi,

I have prepared for you a little example of my problem.
http://www.se7en.it/download/moo.zip


I have three files: a.php,b.php and c.php :)

a.php and b.php are a standard html files
c.php is only a mootools javascript.

a.php makes a call ajax of c.php
b.php require_once of c.php

The script c.php run only when is included in b.php by require_once,
but not run when is include in a.php by ajax request.

where is the error?
Can you help me?

sorry for my English

johnwait

unread,
Jul 9, 2008, 10:38:12 PM7/9/08
to MooTools Users
When scripts are retrieved and evaluated through Ajax, DomReady event
fires immediately (since document is already loaded), so the code
within <script> tags run even though new elements aren't available
yet. That's why $$('#tabs li a').length returns 0.

What you need is a custom event instead of domready, and that you will
fire when onComplete of your request is fired. So you could do the
following:

in "c.php":

window.addEvent('c_php_domready', function() {
/*
Code manipulating elements sent in the same response
*/

// Don't forget to remove the event after use, so making the same
request
// more than once won't trigger multiple instances of the same event!
window.removeEvents('c_php_domready');
});

and in "a.php":

var ajax = new Request.HTML({
url: 'c.php',
/* ... */
onComplete: function(responseTree,
responseElements,
responseHTML,
responseJavaScript) {
$('contentLoad').set('html',responseHTML);
window.fireEvent('c_php_domready');
}
/* ... */
});

This is just an idea tossed like that, but it's tested on IE7, Firefox
2 & 3, Safari 3 and Opera 9. The only downside is that events must be
pretty unique (if you make requests on more than one file), and known
to the code making the request.

I'm not sure if there's a known pattern for loading elements AND
scripts at the same time. In any case, if you still can't get it to
work you may have to load elements and the code manipulating it
separately.

On Jul 9, 4:57 pm, Lambe <whib...@gmail.com> wrote:
> hi,
>
> I have prepared for you a little example of my problem.http://www.se7en.it/download/moo.zip

Lambe

unread,
Jul 10, 2008, 10:33:12 AM7/10/08
to MooTools Users
Thank you John!!!

it is just that i was looking for!!!

johnwait

unread,
Jul 10, 2008, 11:59:46 AM7/10/08
to MooTools Users
Just a thought back: instead of using removeEvents (which is
potentially dangerous) and a fixed event name (which can cause
conflicts on multiple requests), wouldn't this be better:

Code making the request (a.php):

----
var url = 'c.php';
// generate a random, unique id for the request
var requestId = 'ajax_' + url + Math.random();
var ajax = new Request.HTML({
url: url,
data: {requestId: requestId},
/* ...
other event handlers
...
*/
onComplete: function(responseTree,
responseElements,
responseHTML,
responseJavaScript
) {
$('contentLoad').set('html',responseHTML);
// fire event associated with request
window.fireEvent(requestId);
}
});
ajax.send();
----

Code receiving the request & sending the response (c.php):

----
// use requestID sent as our event name
var eventId = <? echo $_POST["requestId"]; ?>';
// self-reference the event handler
var eventHandler = function() {
/* ...
javascript payload for returned elements
...
*/
// remove the event handler
window.removeEvent(eventId, eventHandler);
}
// add the event handler
window.addEvent(eventId, eventHandler);
----

Jonathan Richard-Brochu
Reply all
Reply to author
Forward
0 new messages