update array

[cleary1981]

I want to send some details to my database about a number of objects. Below is the code I have written but the problem I am having is that it only actually updates the details of the last object. Where am I going wrong?

 

function render () {
var yReturnValue = -5;var xReturnValue = -10;
var arr = new Array(); arr = document.getElementsByTagName("div");  //make array of all divs with id = newObject
// alert("Total Number of DIV Elements Found: " + document.documentElement.getElementsByTagName("div").length);
for(var i=0; i < arr.length; i++) 
	{
		//check innerHTML against obj_name
		result = document.documentElement.getElementsByTagName("div").item(i).innerHTML;
		yelementid=document.documentElement.getElementsByTagName("div").item(i);
		while( yelementid != null ){
		yReturnValue += yelementid.offsetTop;
		yelementid = yelementid.offsetParent;
		}
		xelementid=document.documentElement.getElementsByTagName("div").item(i);
		while( xelementid != null ){
		xReturnValue += xelementid.offsetLeft;
		xelementid = xelementid.offsetParent;

		}
		// alert("Name: " + result + " x: " + xReturnValue + " y: " + yReturnValue);



	}
	var url = "render.php?result=" + escape(result) + "&xReturnValue=" + escape(xReturnValue) + "&yReturnValue=" + escape(yReturnValue);
		url = url + "&dummy=" + new Date().getTime();
		request.open("GET", url, true);
		request.send(null);
}

[rhodesa]

you need to move that final piece inside the loop:

 

function render () {
var yReturnValue = -5;var xReturnValue = -10;
var arr = new Array(); arr = document.getElementsByTagName("div");  //make array of all divs with id = newObject
// alert("Total Number of DIV Elements Found: " + document.documentElement.getElementsByTagName("div").length);
for(var i=0; i < arr.length; i++) 
	{
		//check innerHTML against obj_name
		result = document.documentElement.getElementsByTagName("div").item(i).innerHTML;
		yelementid=document.documentElement.getElementsByTagName("div").item(i);
		while( yelementid != null ){
		yReturnValue += yelementid.offsetTop;
		yelementid = yelementid.offsetParent;
		}
		xelementid=document.documentElement.getElementsByTagName("div").item(i);
		while( xelementid != null ){
		xReturnValue += xelementid.offsetLeft;
		xelementid = xelementid.offsetParent;

		}
		// alert("Name: " + result + " x: " + xReturnValue + " y: " + yReturnValue);


		var url = "render.php?result=" + escape(result) + "&xReturnValue=" + escape(xReturnValue) + "&yReturnValue=" + escape(yReturnValue);
		url = url + "&dummy=" + new Date().getTime();
		request.open("GET", url, true);
		request.send(null);
	}
}

[cleary1981]

Yeah I have tried that already and it didnt make any difference. Any other ideas?

[rhodesa]

and if you uncomment that alert, it appears several times?

[cleary1981]

Ok! I have just noticed it is only the 1st object that will not update. The others do

[cleary1981]

ok. After more testing it seems that which objects get updated is completely random which makes me think that the system is busy when it loops through on some occasions. Does that sound possible?

[KevinM1]

You can shorten that code a bit, too:

var xReturnValue = -10;
var yReturnValue = -5;
var arr = document.getElementsByTagName("div"); //you don't need to declare it as an empty array first

for(var i = 0; i < arr.length; i++)
{
   var result = arr[i].innerHTML; //you already have an array of all the <div> elements...why not use it?
   var elem = arr[i];

   while(elem != null) //why use two loops when you can get the values all at once?
   {
      xReturnValue += elem.offsetLeft;
      yReturnValue += elem.offsetTop;
      elem = elem.offsetParent;
   }

   var timeString = "&dummy=" + new Date().getTime();
   var url = "render.php?result=" + escape(result) + "&xReturnValue=" + escape(xReturnValue) + "&yReturnValue=" + escape(yReturnValue) + timeString;

   request.open("GET", url, true);
   request.send(null);
}

 

I made a modified version of it (without AJAX) that works in Firefox.  Unfortunately, IE7 gives me an unknown runtime error.  If you're interested, the script is here: http://www.nightslyr.com/arraytest.html

[cleary1981]

Thanks I was just looking at how I could shorten that code. Have you any ideas why all my objects are not updating. Is there a way I could make one write to the database instead of doing each one individually?

[rhodesa]

it would be tough to get all that info into a GET request. if you use a JavaScript library (like jQuery), it allows you to build a JSON object with a bunch of data, and then pass it as POST data. that might be the better option...

[cleary1981]

Ive heard of it. Does that mean much reworking or can I use it just in this part?

[rhodesa]

your JS and PHP will have to be changed

[cleary1981]

in just this function or my whole script? I dont want to have to change the whole thing if I can change this function and leave the rest that would be great. Wheres the best source for JSON material?

[rhodesa]

with jquery, the javascript would look like:

 

var arr = document.getElementsByTagName("div");
var data = {
   'result[]' : [],
   'xReturnValue[]': [],
   'yReturnValue[]' : []
};

for(var i = 0; i < arr.length; i++)
{
   var xReturnValue = -10;
   var yReturnValue = -5;
   for(var elem = arr[i];elem != null;elem = elem.offsetParent)
   {
      xReturnValue += elem.offsetLeft;
      yReturnValue += elem.offsetTop;
   }
   data['result[]'][] = arr[i].innerHTML;
   data['xReturnValue[]'][] = xReturnValue;
   data['yReturnValue[]'][] = yReturnValue ;
}
$.post("render.php",data);

 

and on render.php:

 

<?php
foreach($_POST['result'] as $n=>$result){
  $xReturnValue = $_POST['xReturnValue'][$n];
  $yReturnValue = $_POST['yReturnValue'][$n];
  //do what you want with the data
}
?>

[cleary1981]

Thanks for that. I just implemented it there but I am getting a syntax error. Heres the code. I have included  jquery-1.2.6.pack.js which i got from http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js. Do you know where i am going wrong?

 

Javascript with jquery script

<script type="text/javascript" src="jquery.js"> </script>
function render() {
var arr = document.getElementsByTagName("div");
var data = {
   'result[]' : [],
   'xReturnValue[]': [],
   'yReturnValue[]' : []
};   // ******************** Syntax error showing here **********************

for(var i = 0; i < arr.length; i++)
{
   var xReturnValue = -10;
   var yReturnValue = -5;
   for(var elem = arr[i];elem != null;elem = elem.offsetParent)
   {
      xReturnValue += elem.offsetLeft;
      yReturnValue += elem.offsetTop;
   }
   data['result[]'][] = arr[i].innerHTML;
   data['xReturnValue[]'][] = xReturnValue;
   data['yReturnValue[]'][] = yReturnValue ;
}
$.post("render.php",data);
}

 

 

[rhodesa]

you need to put <script> tags around the block of JS too

[cleary1981]

yeah it is in javascript tags. I just cut and paste that function out of my code. Am I using jquery right?

[rhodesa]

sorry....getting my PHP and JavaScript syntax mixed up...i tested this and it works:

 

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      function render() {
        var arr = document.getElementsByTagName("div");
        var data = {
          'result[]' : [],
          'xReturnValue[]': [],
          'yReturnValue[]' : []
        };
    
        for(var i = 0; i < arr.length; i++)
        {
           var xReturnValue = -10;
           var yReturnValue = -5;
           for(var elem = arr[i];elem != null;elem = elem.offsetParent)
           {
              xReturnValue += elem.offsetLeft;
              yReturnValue += elem.offsetTop;
           }
           data['result[]'].push(arr[i].innerHTML);
           data['xReturnValue[]'].push(xReturnValue);
           data['yReturnValue[]'].push(yReturnValue);
        }
        $.post("render.php",data);
      }
    </script>

[cleary1981]

Thanks. That solved that problem. Im now getting the following error when the script runs.

 

'$' is undefined. Is there something missing in the last line of code?

 

function render() {
        var arr = document.getElementsByTagName("div");
        var data = {
          'result[]' : [],
          'xReturnValue[]': [],
          'yReturnValue[]' : []
        };
    
        for(var i = 0; i < arr.length; i++)
        {
           var xReturnValue = -10;
           var yReturnValue = -5;
           for(var elem = arr[i];elem != null;elem = elem.offsetParent)
           {
              xReturnValue += elem.offsetLeft;
              yReturnValue += elem.offsetTop;
           }
           data['result[]'].push(arr[i].innerHTML);
           data['xReturnValue[]'].push(xReturnValue);
           data['yReturnValue[]'].push(yReturnValue);
        }
        $.post("render.php",data);
      }

 

 

[rhodesa]

nope...that means jQuery.js isn't loading...are you sure you have the location of that correct?

[cleary1981]

yeah but somehow it got turned into a html file. Ive changed that and I dont get the error but the coordinates are still not updating. Any ideas?

[cleary1981]

Can anyone help me out I am still stuck?

[cleary1981]

[code]I think I have found the problem here but does anyone know how to solve it?

Whatever is being passed to php as the value of the object_name is undefined.

heres the javascript

function render() {

var arr = document.getElementsByTagName("div");

        var data = {

          'result[]' : [],

          'xReturnValue[]': [],

          'yReturnValue[]' : []

        };

   

        for(var i = 0; i < arr.length; i++)

        {

          var xReturnValue = -10;

          var yReturnValue = -5;

          for(var elem = arr;elem != null;elem = elem.offsetParent)

          {

              xReturnValue += elem.offsetLeft;

              yReturnValue += elem.offsetTop;

         

          }

          data['result[]'].push(arr.innerHTML);

          data['xReturnValue[]'].push(xReturnValue);

          data['yReturnValue[]'].push(yReturnValue);

        }

        $.post("render.php",data);

       

      }[/code]

 

heres the php

<?php
require "config.php";
foreach($_POST['result'] as $n=>$result){
  $xReturnValue = $_POST['xReturnValue'][$n];
  $yReturnValue = $_POST['yReturnValue'][$n];
  //do what you want with the data
$q = mysql_query("update object set xpos='$xReturnValue', ypos='$yReturnValue' where object_name = '$result'");

}

?>

 

I have added an alert in the code and found that .innerHTML is undefined.

[KevinM1]

Your code doesn't make sense.  First, you set arr to an array of <div> elements.  Then, in your second for-loop, you set elem to equal that entire array, which is wrong.  You also attempt to use innerHTML on the entire array, which is also wrong.  You need to remember to use the array index you're using in the loop.  So, instead, you should have:

 

.
.
.

for(var elem = arr[i]; elem != null; elem = elem.offsetParent)
{
   //stuff
}

.
.
.

data['result[]'].push(arr[i].innerHTML);

 

That should produce...something.   At the very least, you should get some sort of output.

[cleary1981]

Yeah but the problem I was having was that not every record was getting read into mysql. I need a function that will read the whole block of records in. Can you suggest anything?

[rhodesa]

let's step back to the HTML page. you have posted the javascript, but can you post the HTML that it is parsing?