Reinitialize javascript after ajax call?

[JeanPhilippe]

Hi,

I would like to know how can make my javascript works after an ajax request. This is my page :

<script src='includes/dragResize.js'></script>
<script src='includes/domdrag.js'></script>

<div id='events-loop'>
*IT KEEPS RELOADING HERE*/
</div>

<script src='includes/ajax_events_loop.js'></script>

And my Ajax file :

$query=mysql_query("QUERY");
while($result=mysql_fetch_array($query))
{
<div id='events'>The events</div>

<script type='text/javascript'>

var resize-1 = new resize();resize.init({id:'event-resize-1',direction:'y',limit:{x:[100,580],y:[50,300]}});

var dragVar-1 = document.getElementById('drag-div-1');
Drag.init(dragVar-1, dragVar-1);

</script>
}

Please note that this is not the entire page. Everything works well, Ajax is working, it keep reloading with new entries from database, but the only things that doesn't work, is the javascript. Without Ajax, with the code directly on the page, not updating, it's working well, so the code is good, but when the javascript comes from the Ajax file, its not working. I need to reload the DOM or something like that? Or to inject those new functions?

I'm looking for a solution... thank you very much !!!

[LastMitch]

Without Ajax, with the code directly on the page, not updating, it's working well, so the code is good, but when the javascript comes from the Ajax file, its not working. I need to reload the DOM or something like that? Or to inject those new functions?

Why did you put the javascript code in the PHP like that?

[JeanPhilippe]

Because every entries from database has his a unique javascript part of code. So, when the ajax file is reloaded, there is new javascript code if there is a new entrie, but this part of code will not work. I don't know if I am clear enough.

[LastMitch]

when the ajax file is reloaded, there is new javascript code if there is a new entrie, but this part of code will not work. I don't know if I am clear enough.

You are clear on how it works but that's not how your code works.

In order to fetch the data by using the both javascript and php you need to make javascript to echo out the data.

Explain to me where is QUERY in your javascript not PHP here:

$query=mysql_query("QUERY");
while($result=mysql_fetch_array($query))
{
<div id='events'>The events</div>
<script type='text/javascript'>
var resize-1 = new resize();resize.init({id:'event-resize-1',direction:'y',limit:{x:[100,580],y:[50,300]}});
var dragVar-1 = document.getElementById('drag-div-1');
Drag.init(dragVar-1, dragVar-1);
</script>
}

I don't see any QUERY in your javascript so I hope you understand that it's not going to work.

[JeanPhilippe]

Thank you for helping me, I will try to describe my problem better. And sorry, english is not my native language.

<script src='includes/dragResize.js'></script> // we don't need to know what is inside.

<div id='event-box-container'>
    <div id='event-box'></div>
</div>

<script type='text/javascript'>
var resize = new resize();resize.init({id:'event-box',direction:'y',limit:{x:[100,580],y:[50,300]}});
</script>

This, will make my div "event-box", resizable, because of this :

var resize = new resize();resize.init({id:'event-box',direction:'y',limit:{x:[100,580],y:[50,300]}});

So, if I have 2 resizable divs, I will do :

<script src='includes/dragResize.js'></script> // we don't need to know what is inside.

<div id='event-box-container'>
    <div id='event-box'></div>
    <div id='event-box-2'></div>
</div>

<script type='text/javascript'>
var resize = new resize();resize.init({id:'event-box',direction:'y',limit:{x:[100,580],y:[50,300]}});
var resize-2 = new resize();resize-2.init({id:'event-box-2',direction:'y',limit:{x:[100,580],y:[50,300]}});
</script>

My 'event-box' divs come from a database, so I do a loop like this :

<script src='includes/dragResize.js'></script> // we don't need to know what is inside.

echo"<div id='event-box-container'>";
$NUMBER=0;
$query=mysql_query(A QUERY);
while($result=mysql_fetch_array($query)
{
$NUMBER++;
echo"<div id='event-box-$NUMBER'></div>

<script type='text/javascript'>
var resize-$NUMBER = new resize();resize-$NUMBER.init({id:'event-box-$NUMBER',direction:'y',limit:{x:[100,580],y:[50,300]}});
</script>";
}
echo"</div>";

So every rows will have a div associated with his own javascript initialization code. Let's say I have 3 rows, It will output :

<script src='includes/dragResize.js'></script> // we don't need to know what is inside.

<div id='event-box-container'>

    <div id='event-box'></div>
    <script type='text/javascript'>
    var resize = new resize();resize.init({id:'event-box',direction:'y',limit:{x:[100,580],y:[50,300]}});
    </script>

    <div id='event-box-2'></div>
    <script type='text/javascript'>
    var resize-2 = new resize();resize-2.init({id:'event-box-2',direction:'y',limit:{x:[100,580],y:[50,300]}});
    </script>

    <div id='event-box-3'></div>
    <script type='text/javascript'>
    var resize-3 = new resize();resize-3.init({id:'event-box-3',direction:'y',limit:{x:[100,580],y:[50,300]}});
    </script>

</div>

It will works very well, but if I want to see if there is new data (from database), I have to reload the page (F5). And it will work. But I don't want to reload the page, so I added a Ajax function that reload everything that is inside the div 'event-box-container'. So the main page is :

<script src='includes/dragResize.js'></script> // we don't need to know what is inside.
<script src='includes/ajax.js'></script> // we don't need to know what is inside.

<div id='event-box-container'>
    /* DATA FROM AJAX FILE */
</div>

And the AJAX file :

$NUMBER=0;
$query=mysql_query(A QUERY);
while($result=mysql_fetch_array($query)
{
$NUMBER++;
echo"<div id='event-box-$NUMBER'></div>

<script type='text/javascript'>
var resize-$NUMBER = new resize();resize-$NUMBER.init({id:'event-box-$NUMBER',direction:'y',limit:{x:[100,580],y:[50,300]}});
</script>";
}

Please note that this is really not the entire code, I want to make it simple, to understand the principle. So the Ajax will work, It will refresh every 5 seconds, and will show all the new divs, but, the javascript associated with it, will not work, so my div will not be resizable. I guess its because the DOM is already loaded and does not recognize the new javascript code from the ajax file.

Thank you very much for you help !!! :)

[AleMonteiro]

Please, post your AJAX request so we can analyse it.

[JeanPhilippe]

The ajax js file that I use

// Customise those settings

var seconds = 5;
var divid = "event-box-container";
var url = "includes/ajax_events_loop.php";

////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////

function refreshdiv(){
// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}

// Timestamp for preventing IE caching the GET request

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...



xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Start the refreshing process

var seconds;
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}

[AleMonteiro]

When you use innerHTML, scripts are not executed. That's your problem.

So, I suggest that you don't return any JavaScript code on your ajax response.
Instead, just return the divs and then execute a function to add the resize functionality.
Something like this:

function addResizeFunctionality() {
    var
        div = document.getElementById('event-box-container')
        , children = div.childNodes
        , childrenLength = children.length;

    for(var i=0; i < childrenLength; i++) {
        var childrenId = children[i].id;
        var resize = new resize();
        resize.init({id: childrenId, direction: 'y'});
    }

}

[JeanPhilippe]

Wow, amazing, it works ! I got it. But I have another problem with the js loop. I need dynamic variables.

for(var i=0; i < childrenLength; i++)
{
var resize = new resize();resize.init({id:'event-resize-',direction:'y',limit:{x:[100,580],y:[50,300]}});
}

I need the output to be something like that :

var resize1 = new resize();resize1.init({id:'event-resize-'+i,direction:'y',limit:{x:[100,580],y:[50,300]}});

var resize2 = new resize();resize2.init({id:'event-resize-'+i,direction:'y',limit:{x:[100,580],y:[50,300]}});

var resize3 = new resize();resize3.init({id:'event-resize-'+i,direction:'y',limit:{x:[100,580],y:[50,300]}});

How to make it works for "var resize =" and ";resize.init"....

Thanks....

[JeanPhilippe]

Never mind, I got it :) I did not need this loop.

[AleMonteiro]

You're welcome. If your problem is solved, please mark the thread as such =)