Ajax request is loading once

[JeanPhilippe]

Hi,

I have kind of a weird problem and I can't figure what is wrong.

This is my Ajax php page :

<?php

// Configure connection settings

include('dbconnect.php');
include('functions.php');

// Fetch the data

$timestamp=$_GET['t'];

$dimanche='2013-03-03';
$samedi='2013-03-09';

$queryEvents=mysql_query("SELECT * FROM `events` WHERE `start_date`=`end_date` AND `start_date`>='$dimanche' AND `start_date`<='$samedi'");
while($resultEvents=mysql_fetch_array($queryEvents))
{
echo"<div id='drag-div-".$resultEvents['id']."' class='event-box' style='width:107px;height:".getCalHeight($resultEvents['start_heure'],$resultEvents['end_heure']);echo"px;top:".getCalStartTop($resultEvents['start_heure']);echo"px;left:".getCalWidth($resultEvents['start_date']);echo"px;'><p><b style='font-size:8px;'>".$resultEvents['start_heure'];echo" - ".$resultEvents['end_heure'];echo"</b><br />".$resultEvents['titre'];echo"<br />$timestamp</p><div id='event-resize-".$resultEvents['id']."' class='dragIcon' style='top:";echo getCalHeight($resultEvents['start_heure'],$resultEvents['end_heure'])-5;echo"px'></div></div>";
}

?>

Its a query from a database that will reload every 5 seconds to see if there is new entries. It works well. But if I add something below the while, the ajax request will load once, and then stop. It won't work anymore. Like this, doesnt work :

<?php

// Configure connection settings

include('dbconnect.php');
include('functions.php');

// Fetch the data

$timestamp=$_GET['t'];

$dimanche='2013-03-03';
$samedi='2013-03-09';

$queryEvents=mysql_query("SELECT * FROM `events` WHERE `start_date`=`end_date` AND `start_date`>='$dimanche' AND `start_date`<='$samedi'");
while($resultEvents=mysql_fetch_array($queryEvents))
{
echo"<div id='drag-div-".$resultEvents['id']."' class='event-box' style='width:107px;height:".getCalHeight($resultEvents['start_heure'],$resultEvents['end_heure']);echo"px;top:".getCalStartTop($resultEvents['start_heure']);echo"px;left:".getCalWidth($resultEvents['start_date']);echo"px;'><p><b style='font-size:8px;'>".$resultEvents['start_heure'];echo" - ".$resultEvents['end_heure'];echo"</b><br />".$resultEvents['titre'];echo"<br />$timestamp</p><div id='event-resize-".$resultEvents['id']."' class='dragIcon' style='top:";echo getCalHeight($resultEvents['start_heure'],$resultEvents['end_heure'])-5;echo"px'></div></div>";
}

echo"<div>test</div>";

?>

My ajax request file :

AjaxRefresh=true;

// Customise those settings

var seconds = 5;
var divid = "events-loop";
var url = "includes/ajax_events_loop.php";

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

function refreshdiv(){

if(AjaxRefresh==true)
{
// 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;
addResizeFunctionality();
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}
else
{
setTimeout('refreshdiv()',seconds*1000);
}
}

// Start the refreshing process

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

What is wrong...?? Thanks...

[AleMonteiro]

Post your addResizeFunctionality(); function

[JeanPhilippe]

mmm... you got it, thats the problem hehe.

this function affects all the div contained in a certain div because of childNodes. Can we add an exception for a certain div ??

function addResizeFunctionality() {
var div=document.getElementById('events-loop');
children=div.childNodes;
childrenLength=children.length;

for(var i=0; i < childrenLength; i++) {
var childrenId = children[i].id;

var dragVar = document.getElementById(childrenId);
Drag.init(dragVar, dragVar);

var numberIDx=childrenId.split('-');
numberID=numberIDx[2];

resize1 = new resize();resize1.init({id:'event-resize-'+numberID,direction:'y',limit:{x:[100,580],y:[21,1004]}});

}
    }

[JeanPhilippe]

I got it ! The loop with childnodes was selecting all the div, but I needed to remove the last one from the loop, so in the loop, I did childrenLenght-1, so the last wasnt selected.

Thanks again for you help, I'm working hard for this project, and you helped me twice. Thanks !!!

[AleMonteiro]

Nice to hear that you were able to make it work.

But, I think you took the easy way out... let me explain: Your problem was the last div, that's correct. But why did the last div give you trouble? It was because your loop got the ID from the div and use it to add the functionality, but the last div didn't have any id, and that's why the error occured.

So, the best solution is to update your function to verify if the ID is valid, something like this:

for(var i=0; i < childrenLength; i++) {
    var childrenId = children[i].id;

    // Check if the Id is valid
    if ( childrenId == undefined || childrenId == null || childrenId == '' ) {
        continue; // Goes to the next iteration of the loop
    }
    // If you want to add the function only to a specific set of divs, you should increment this validation

    var dragVar = document.getElementById(childrenId);
    Drag.init(dragVar, dragVar);

    var numberIDx=childrenId.split('-');
    numberID=numberIDx[2];

    resize1 = new resize();resize1.init({id:'event-resize-'+numberID,direction:'y',limit:{x:[100,580],y:[21,1004]}});

}

[JeanPhilippe]

Ok yeah, I understand. I might try something like that, thanks for your help :)