Update a div with Request.HTML

29 views
Skip to first unread message

jeresch

unread,
Aug 4, 2008, 12:42:30 PM8/4/08
to MooTools Users
Hello,

I'm having some trouble using Request.HTML. I want to use in order to
load PHP pages in a div from the index page. All is going right while
I load pages that do not include others, but nothing is being
displayed as soon as I try to load a page which contains an 'include'
or a 'require' call.

Here is the Javascript code I use in the index to load other pages :

window.addEvent('domready', function(){
$('pres').addEvent('click', function(e) {
var options = {url: "site/news.php", method : 'get' , update: $
('main_frame'), evalScripts: true};
var monObjetAjax= new Request.HTML(options);
monObjetAjax.send();
});
});


I try to update the "main_frame" div when "pres" is clicked with the
page at the url "site/news.php".

And the news.php file looks like this at the beginning :

...
<body class="visitorSite">

<div class="container">
<?php
include('../connexion.inc');
connexion();

if(!isset($_GET['idNews'])){
$req = mysql_query("select noNews, author, sujet, DATE_FORMAT(time,
'%d/%m/%Y \&agrave; %H:%i:%S'), editAuthor from NEWS order by time
DESC") or die (mysql_error());

$count = 0;
$html="<div class=\"titre\">
Liste des news
</div><div>";
...


The loading of the page apparently stopped by the 'include' call as
the title "Liste des news" is never displayed. If I do an echo of this
title before the 'include', it will be correctly displayed.

Maybe someone would have an idea of the cause of this bug ?

Thank you very much :-D

Tyk

unread,
Aug 5, 2008, 6:55:33 AM8/5/08
to MooTools Users
It's not your entire PHP file, is? It display correctly alone? Like,
when you loads only the PHP file, injecting the parameters in the url,
the result is something displayed in the browser?

The Request.HTML don't touch directly your PHP file, only the result
of it. If an echo before the include works, your request is correct.
The problem seems to be in the PHP itself. If you put an "echo $html;"
after the $html declaration in your PHP, nothing is displayed?

PS.: The Ajax request even don't need the evalScripts if you only have
PHP to process. I use eval only when I need to load JavaScript.
PS2.: Sorry my English.

jeresch

unread,
Aug 5, 2008, 7:41:36 AM8/5/08
to MooTools Users
Hello Tyk, thank you for your help,

No, it's not the entire page I've copy in the message, just a piece of
it to show what can be malfunctioning.

When I don't use Request.HTML to load my PHP page, it'll display
correctly and this is also the case when I use the 1.1 version of
Mootools, like this :

window.addEvent('domready', function(){
$('pres').addEvent('click', function(e) {
var url = "site/accueil.php";
var options = {method : 'get' , update: $('main_frame'),
evalScripts: true};
var monObjetAjax= new Ajax(url, options);
monObjetAjax.request();
});
});


In fact, there is an "echo $html" at the end of the loaded page, but
it seems that the version 1.2 of Mootools don't take care of it.

It'll take a lot of place on this message, but here is the entire php
page, just in case the problem would come from it :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>R&ecirc;ve &agrave; l'envers - News</title>

<meta name="description" content="Page des news relatives au site et à
l'artiste peintre">
<meta name="keywords" content="peinture, sous-verre, tableau, art,
r&ecirc;ve &agrave; l'envers, artiste, peintre, mulhouse, news,
nouvelles">
<meta name="robots" content="index , follow">
<meta name="author" content="Jérémie SCHEER">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" /
>
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body class="visitorSite">

<div class="container">
<?php
require '../connexion.inc';
connexion();

if(!isset($_GET['idNews'])){
$req = mysql_query("select noNews, author, sujet, DATE_FORMAT(time,
'%d/%m/%Y \&agrave; %H:%i:%S'), editAuthor from NEWS order by time
DESC") or die (mysql_error());

$count = 0;
$html="<div class=\"titre\">
Liste des news
</div><div>";

while($news = mysql_fetch_row($req)){
$news[1]=htmlspecialchars($news[1], ENT_QUOTES);
$news[2]=htmlspecialchars($news[2], ENT_QUOTES);
$news[4]=htmlspecialchars($news[4], ENT_QUOTES);

$html=$html."<hr noshade=\"noshade\" size=\"5\"><ul type=\"square
\"><li>";
$html=$html."<p class=\"titre\"><b>";

if($news[4]!=""){
$html=$html."[Edit&eacute;e] ";
}

$html=$html."$news[3] par $news[1]</b></p>";
$html=$html."<blockquote><p class=\"text20\"><i>$news[2]</i></p></
blockquote><br>";
$html=$html."<a class=\"visitorSite\" id=\"anews\" href=\"site/
news.php?idNews=$news[0]\">Afficher la news</a></ul>";

$count++;
}

if($count==0){
$html=$html."<div class=\"defaultTitle\">Aucune news disponible</
div>";
}
$html=$html."</div>";

echo $html;
}else{
if(is_numeric($_GET['idNews'])){
$idNews = $_GET['idNews'];

$req = mysql_query("select noNews, DATE_FORMAT(time, '%d/%m/%Y
\&agrave; %H:%i:%S'), author, sujet, texte, editAuthor,
DATE_FORMAT(editDate, '%d/%m/%Y \&agrave; %H:%i:%S') from NEWS where
noNews='$idNews'") or die(mysql_error());
$news = mysql_fetch_row($req);

$news[2]=htmlspecialchars($news[2], ENT_QUOTES);
$news[3]=htmlspecialchars($news[3], ENT_QUOTES);
$news[4]=nl2br(htmlspecialchars($news[4], ENT_QUOTES));
$news[5]=htmlspecialchars($news[5], ENT_QUOTES);

$html="<div class=\"titre\">
$news[3]
</div><div>";
$html=$html."<hr noshade=\"noshade\" size=\"5\">";

$html=$html."<blockquote><p class=\"text15\"><b>$news[4]</b></p>";
$html=$html."<p class=\"text15\" id=\"pright\">$news[2], le
$news[1]";
if($news[5]!="" && $news[6]!=""){
$html=$html."<br><i>Editée par $news[5] le $news[6]</i>";
}
$html=$html."</p>";

$html=$html."<a class=\"visitorSite\" id=\"anews\" href=\"site/
news.php\">Retour &agrave; la liste des news</a></blockquote></div>";

echo $html;
}
}

mysql_close();
?>
</div>

</body>
</html>


PS : Yes, you're right, in fact I've put this evalScripts option by
default on all the loading because most of my pages have Javascript to
evaluate.

PS2 : My english is not perfectly correct neither is it ;-)

Tyk

unread,
Aug 6, 2008, 7:29:13 AM8/6/08
to MooTools Users
Hmm.. I looked your php.. it seems to be okay. But even when I use
Request.HTML, I don't use meta tags. If you already have a index.php
page or something like this, you have these meta tags there too..
right? So you don't need to send the entire page. Try to remove all
before the <body> (including it) and all after the </body> (including
too).

But well.. what seems strange to me is the fact that when you load the
page normally, it works. The ajax request catchs exactly the same
result, as it doesn't work directly with the code. It's like an
iFrame, but better =P. Assuming this, you PHP code is right...

Or try to change your Mootools function.. try this:

================================================================
window.addEvent('domready', function() {



$('pres').addEvent('click', function() {

var req = new Request.HTML({

url:'site/accueil.php', //The PHP file

method: 'get', //The method

data: {'idNews' : 457}, //The variable idNews

evalScripts: 'true', //You know

onSuccess: function(html) { //If it works

$('main_frame').set('text', ''); //Clear the Div

$('main_frame').adopt(html); }, //Inserts the HTML inside

onFailure: function() { //If not

$('main_frame').set('text', 'Désolé, pas');} //I feel so sorry :(

});




});
================================================================

CroNiX

unread,
Aug 6, 2008, 9:48:39 AM8/6/08
to MooTools Users
Instead of:
$('main_frame').set('text', ''); //Clear the Div
I would use:
$('main_frame').empty();

jeresch

unread,
Aug 6, 2008, 8:11:46 PM8/6/08
to MooTools Users
Ok, I didn't know for the meta tags, that's at least a good thing that
we don't have to put it on all the pages thanks to Mootools :-D But
that's the only good news because I've tried to remove all that is not
a part of the body, and the problems remains the same. I've also tried
to change the code to the one you told me, and still the same result
as always, that is to say nothing :-(

It's also strange that there is no problem at all with the former
version of Mootools. But I still think that the 'require' call or the
function 'connexion' (which is in the file connexion.inc I include)
may have something to do with the problem.

Here is the function, maybe there's a problem in it, but it has been
always properly running :

<html>
<body>
<?php
function connexion(){
$host = "localhost";
$user = "root";
$pass = "FLORANCE";

global $conn;
$conn = mysql_connect($host, $user) or die (mysql_error());
mysql_select_db("sousverre", $conn) or die (mysql_error());
}
?>
</body>
</html>


I'm really desperate with all this...

Tyk

unread,
Aug 6, 2008, 9:45:52 PM8/6/08
to MooTools Users
Only to check.. your version of mootools 1.2 is complete, right? I
mean, with all components. You test your code with Firefox? If yes,
the Error Console throws any errors? Try installing Firebug, it always
help me... Opera and IE7 has similar addons too.

Anyways, the problem cannot be in your PHP code. Your Ajax code go to
the php file and inject the variables into it... it doesn't work with
the PHP code, it doesn't even see the code. Try to comment your
connection function and change your code to work without it only to
test. But I always use require('something.php') or
include('something.php') without problems.


PS. You connexion() function doesn't need the <html><body> tags. =P

jeresch

unread,
Aug 7, 2008, 7:32:40 AM8/7/08
to MooTools Users
It finally works !! Thank you very much Tyk, I owe you a lot, I don't
think I'd have been able to go through this problem without your
help !

And the source of the bug was in fact such a little thing, compared to
the bug itself ^^ It was due to the <html><body>....</html></body>
tags I foolishly left in my page 'connexion.inc'. When Mootools tried
to include it, the tags were put along with the function 'connexion()'
in the page 'news.php' and it closed the <body> and <html> tags of
this page. What was after the </body></html> was not interpreted...

Sorry to bother you, but I've still a little question about Mootools,
is there an option in Request.HTML that makes all the links in the
loaded page always open in the same <div> ('main_frame' for me) ?

PS : My version of Mootools was indeed complete, and I've also taken
all the plugins (mootools-1.2-more.js) because I need them in another
script. And yes, I agree, the Firebug is a very useful debugging tool
I already used a lot to solve some problems, but in this case, it
didn't display any error message at all.

Tyk

unread,
Aug 7, 2008, 9:07:55 AM8/7/08
to MooTools Users
You're welcome =P

About all the links open in the same div, you can add a class to every
link within the div. Like this:

=======================================================================================
<div id="main_frame">
<a href="link.php" class="link">Test</a>
<a href="link2.php" class="link">Test2</a>
</div>
=======================================================================================


And after, you can use an function to catch every link with that
class, and put an ajax request in it.
=======================================================================================
<script type="text/javascript">
window.addEvent('domready', function(){
$$('.link').each(function(el){ //Catchs every link
el.addEvent('click', function(e){ //Adds a click function
e.stop(); //Stops the link to go to it href
var respost = new Request.HTML({ //New Ajax
method: 'get',
url:el.getProperty('href'), //Catchs the href of the link
evalScripts: true,
data: {'var1':'lala','var2':'bebe'}, //Variables
onSuccess: function(html) { //You already know these =)
$('main_frame').empty();
$('main_frame').adopt(html);
}
}).send();
});
});
})
</script>
=======================================================================================


This is the most unobstrusive way I found, but you can do better. I'm
not that good with mootools after all hehehe

Good Luck!

jeresch

unread,
Aug 7, 2008, 12:57:58 PM8/7/08
to MooTools Users
Thanks for this code, I've tried it, but it seems that the $
('.link').each(function(e1).... doesn't catch any links. The links are
not stopped and they are loaded in the entire frame, not in the div
'main_frame'.

Is there maybe an other way to catch the links that have 'link' as
class ? I've also run the code without this instruction ($
('.link').each(function(e1)) and with only one link, and there's no
problem at all.

Except this little problem, the method seems pretty cool and simple as
I have a lot of links to process in my site.

Tyk

unread,
Aug 7, 2008, 1:24:06 PM8/7/08
to MooTools Users
Yeah, we have other methods of course.. but is strange that the
snippet doesn't worked.. I tested here and all.. Ah, don't forget that
is "$$('.link').each()" and not "$('.link').each()".

You can do this by the way:
==============================================================
var myLinkArray = document.getElements('.link');
// Catchs all the elements with the class ".link"

myLinkArray.each(function())
//Change the $$('.link') with the new variable.. the function
inside remains the same.
==============================================================

jeresch

unread,
Aug 7, 2008, 3:47:21 PM8/7/08
to MooTools Users
Yep, you were right, it works correctly with "$$('.link').each()" but
it was my fault. In the page where I tested this code, I already had
another function bound to the 'domready' event.

Now, in other pages, the links are all caught and they open in the
same div 'main_frame', but I've a problem with the page that used the
domready event.
In this page, I've a script called Mooflow that also uses Mootools,
and it appears that there are some conflicts between Mooflow and the
script that load pages.

Here is the little javascript code :

<script type="text/javascript">
var myMooFlowPage = {
start: function(){
/* MooFlow instance with the Milkbox Viewer */
var mf = new MooFlow($('MooFlow'), {
useSlider: true,
useCaption: true,
useMouseWheel: true,
useKeyInput: true,
useViewer: true,
onClickView: function(obj){
Milkbox.showThisImage(obj.href, obj.alt);
}
});
},

dynamlink: function(){
$$('.tablink').each(function(l){
l.addEvent('click', function(e) {
e.stop();
var options = {url:l.href, method : 'get' , update: $
('main_frame'), evalScripts: true, data: {'idGenre':l.rel}};
var monObjetAjax= new Request.HTML(options);
monObjetAjax.send();
});
});
}
};

window.addEvent('domready', myMooFlowPage.start,
myMooFlowPage.dynamlink);
</script>


When I load the page, MooFlow is running, but the function dynamlink
doesn't work. And if I change the order between the two functions :
'window.addEvent('domready', myMooFlowPage.dynamlinks,
myMooFlowPage.start);', the result is that this time dynamlinks is
being executed but not my MooFlow scripts.

What is this new curse ? :-/

jeresch

unread,
Aug 7, 2008, 4:06:09 PM8/7/08
to MooTools Users
That's annoying not to be able to edit messages in this forum ^^ In
fact, I've found the answer to my own question. I've just split the
page in two parts with one of the two scripts in each.

I know I ask you a lot of questions, but I just discover Mootools and
I'm not very used to the javascript programming. So I've a last
question, the last of the last ;-) : in my site, I've also forms that
send their datas to other pages. Is there, as for the links, a way to
open the page call by a form in the same div as always ('main_frame'
for instance) and to let the form send itself the datas ?

I still thank for your time and all your help (I know, at the end, I
won't be able to thank you because I'll already have done it too
much :-P).

Tyk

unread,
Aug 7, 2008, 9:51:16 PM8/7/08
to MooTools Users
I've already said that, but you're welcome hehehehe

I'm not with much time right now.. but look at this:
http://demos111.mootools.net/Ajax.Form

I guess that this code remains the same in the mootools 1.2. Try it,
experiment combining with the ajax code that you already have. If you
understood what each line of code do, you'll make this without much
problems. =P The magic in the case of a form is in the "send"
function. Good Luck for now =)

jeresch

unread,
Aug 9, 2008, 7:33:11 AM8/9/08
to MooTools Users
I've finally found a way to process forms with Mootools, with your
help and by merging the different codes I had. With all that, my site
begins to look nicer ^^

I've just a little problem trying to use my mootools on a file form.
Maybe you have an idea of a way to do this. But I don't want to bother
you, and I think I'd find it by myself ;-)

If you have some little time to check it out, here are the html form
and the ajax code that process it :

<form method=\"POST\" action=\"administration/modifierTableau.php\"
enctype=\"multipart/form-data\" id=\"tabimage-form\">
<input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"1000000\">
<p>Fichier : <input type=\"file\" name=\"tableau\"></p>
<p><input type=\"submit\" name=\"envoyer\" value=\"Envoyer le
fichier\"></p>
<input type=\"hidden\" name=\"idTableau\" value=\"$no\">
</form></blockquote><br>


And the javascript :

<script type="text/javascript">
window.addEvent('domready', function(){
$('tabimage-form').addEvent('submit', function(e) {
e.stop();

if(validationImg(this)){
var myHTMLRequest = new Request.HTML({url:this.action, update: $
('adminContent'), evalScripts: true, }).post(this);
}
});
});
</script>

With the file form, the loaded page should receive file datas in the
$_FILES['tableau'], but instead mootools send these datas in $_POST.

hellspawn

unread,
Aug 9, 2008, 10:55:16 AM8/9/08
to MooTools Users
this part of the code

.post(this);

should tell you everything
in the documentation it says is sending the form via 'post'

jeresch

unread,
Aug 10, 2008, 7:48:29 AM8/10/08
to MooTools Users
Yes, I had also thought to check the mootools'documentation, but I
couldn't find anything about the way to send file forms.

Or have I not checked the right documentation ? http://docs.mootools.net/

hellspawn

unread,
Aug 10, 2008, 9:36:57 AM8/10/08
to MooTools Users
the problem is that xmlhttprequest cannot upload files - or this is
what i know -
so a solution would be to post the form to an iframe

hellspawn

unread,
Aug 10, 2008, 9:54:29 AM8/10/08
to MooTools Users
in iframe you can access the parent window variables or objects like
this:

window.parent.$('element_to_be_changed')

Tyk

unread,
Aug 10, 2008, 11:55:20 AM8/10/08
to MooTools Users
Yeah, you can't upload files via ajax. You'll need to use flash or an
iframe. Personally I never did it, but if you google for mootools
upload, you can get some good examples.

jeresch

unread,
Aug 10, 2008, 3:31:35 PM8/10/08
to MooTools Users
Thank you two for the help !

Pity that Ajax can't handle the uploading of files. But I've tried to
do the little trick with the IFrame to overcome this, and there is no
problem except that now, when I go out of the IFrame with Mootools,
Firebug give me an strange error and apparently the datas I send via
GET method are lost.
In addition, the page loaded by Mootools seems to have some bugs as
scripts not executed or dead links...

This is the Firebug error :

$exec is not defined
for (var i = 0, k = root.childNodes.length; i < k; i++){


And the javascript code I use to get out of the IFrame and return to
my 'main_frame' div :

echo "<script language=\"JavaScript\" type=\"text/javascript\">
var monObjetAjax= new Request.HTML({url: 'menuAdmin.php', method :
'get' , update: window.parent.$('main_frame'), evalScripts: true,
data: {'page':1}}).send();
</script>";


jeresch

unread,
Aug 10, 2008, 3:47:49 PM8/10/08
to MooTools Users
In fact, these are the scripts that are executed at the loading of the
page that don't work, as 'window.addEvent('domready', ...' or even
'<script type=\"text/javascript\">chg($page);</script>' if it is
placed inside the <body> tags.

I was mistaken, the GET-method datas are correctly sent by Mootools,
but as the scripts don't work, they can't be used inside them.

jeresch

unread,
Aug 10, 2008, 4:17:31 PM8/10/08
to MooTools Users

hellspawn

unread,
Aug 11, 2008, 3:58:23 AM8/11/08
to MooTools Users
what are u trying to do ?
u want to upload a file, then what?

try to explain a little more detailed or give us a link

jeresch

unread,
Aug 11, 2008, 10:44:51 AM8/11/08
to MooTools Users
What I'm trying to do is to correctly get out of an IFrame with the
help of Mootools.

The file-upload form is now opened in a new IFrame that is inside my
div 'main_frame'. Then, the uploading is done inside the IFrame, and
the user can enter some additionnal datas that will be registered in a
database. All these actions are performed inside the IFrame.

When they are completed, I want Mootools to open a new page
('menuAdmin.php') in the div 'main_frame' over the IFrame in order to
get out of it. But the problem is that when Mootools update the div,
the scripts in the loaded page that are inside the <body> tags or to
be executed at the loading aren't processed. The problem is the same
whatever page is loaded by Mootools...

Here is the code that create the IFrame, maybe I didn't correctly
write it :

echo "<iframe id=\"tabframe\" frameborder=\"no\" scrolling=\"auto\"
class=\"tabframe\"></iframe>";

echo "<script language=\"JavaScript\" type=\"text/javascript\">
document.getElementById('tabframe').src = \"administration/
newTabForm.php\";
</script>";
Reply all
Reply to author
Forward
0 new messages