Jump to content

update array


cleary1981

Recommended Posts

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);
}

Link to comment
Share on other sites

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);
	}
}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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
}
?>

Link to comment
Share on other sites

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);
}

 

 

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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);
      }

 

 

Link to comment
Share on other sites

[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.

Link to comment
Share on other sites

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. :P  At the very least, you should get some sort of output.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.