Load Data from Database to Javascript Array

Ajax => server => change array elements

[bear]

Hi,

I have a website that uses javascript arrays to dynamically list the data the user wants.
a[1] = "this"
a[2] = "that"
the data is initially loaded in chunks from js files.
What I want to do is to get data from a database via Ajax and php and to load different values into the existing arrays on the client side.
i.e.
a[1] = "another"
a[2] = "whatever"
I've tried various ways but nothing works. It is much faster to sort and select info for the user using the javascript arrays once the new chunck of data has been loaded. I'd like to do it dynamically without reloading the page, even though it may take some time to reload the data. I can pre-bulid chuncks as .js files, and load these dynamically - but using a database allows for a much wider range of options.
Any suggestions?

[Bernard Marx]

That's a little vague, perhaps. What have you tried?

If you're loading the initial arrays as script files, then -esp. for large amounts of data- literals are the way to go:

var a = ["this","that","the other"];

You can't create anything but a "dense" array like that, but I doubt you want to do anything else.

The array can be updated, Ajax-stylee, using JSON as the representation. I guess if the updates are partial, then the best way is to use

Object

objects to allow you to specify index & data:

'{0:"not this",2:"another other"}'

Then, after

eval

-ing, loop with a for .. in loop, updating the array.

[edited by: Bernard_Marx at 10:10 pm (utc) on June 28, 2007]

[bear]

Thanks Bernard,

what I'm trying to do is to change an array element in the HTML client-side --- R[297] = "Original"

by calling a PHP file that extracts data from a database

to replace "Original" with "Changed" and have the array element on the client side changed to "Changed"

i.e. do the equivalent of -- R[297] = "Changed" -- via a js function.

Obviously I need to deal with a long list of array elelents - and hopefully pass an entire array from PHP to js array, but I cannot get even the single array element to transfer.

(I've tried AJAX equivalent as well, but first the append child)

HTML

array already declared R[297] = "Original";

The js function to load the php file >>> myfile = "getit.php" is

function dochunky(myfile) {
var myhead= document.getElementsByTagName('head')[0];//or 'body'
var script= document.createElement('script');
script.type= 'text/javascript';
script.setAttribute('language', 'javascript');
script.src= myfile;
myhead.appendChild(script);
}

PHP
"getit.php"

<?php
blah blah blah
echo "R[297] = 'CHANGED';"; //ie change the js array value
?>

I've also tried various versions with AJAX where I build the
script in PHP then echo it

echo "<script type=\"text/javascript\">\n";
echo "R[297] = \"Changed\";\n"; //for array
echo "</script>\n\n";

etc.

There's somthing in the PHP that I'm missing?

The .js file equivalent seems to work OK - with or without the function

.js file

R[297] = "change is done";

or

function helper() {;
R[297] = "change is done";
alert( "change is done" + R[297]);
};
helper(); // this makes sure data loaded before moving on
//remove child via function

This is driving me nuts!

Maybe I need to do more on the client side?

Cheers, John

[bear]

Hi,

maybe I'm not eval() ing the result?

If so how? - via the echo in PHP or via javascript?

echo "eval( R[297] = \"Changed\");"; ?

or client side

[bear]

Hi

I got this version working

The js function to load the php file >>> myfile = "getit.php" is

function dochunky(myfile) {
var mytag = document.getElementsByTagName('body')[0];//or 'head'
var script= document.createElement('script');
script.type = 'text/javascript';
script.setAttribute('language', 'javascript');
script.src = myfile;
mytag.appendChild(script);
}

PHP
"getit.php"

<?php
blah blah blah
echo "R[297] = 'CHANGED';"; //ie change the js array value
?>

This is very simple and does not require eval()!
It works with a function transfer as well -- myfunct('something') -- no eval() required.

GREAT!

[Bernard Marx]

Sorry, bear. I haven't been ignoring you. I have been asleep in my bed during your struggles. Good to see you got there anyway.

The script tag method is certainly neat and clean. I had it in mind. The reason I didn't mention it is that someone somewhere did an in-depth study of the technique and, although it came off well, a problem was reported in some browser or other (a Mac browser, I think).

Remember to clean up after you. Give the appended tag an id, and remove it from the doc before adding a new one. The script effects will remain.

Alternatively, I have had success by simply having a single id'd script tag for this purpose from the start, then making requests by swapping a time-based query string on the src url.

A simple function call in each new download can provide a callback mechanism:

echo 'arrayUpdated("R");';

-------------------------------------------

As regards the eval. Using this technique makes it unnecessary, but, using an HTTPRequest, would involve eval-ing object literals, rather than stuff inside script tags.

[edited by: Bernard_Marx at 2:00 pm (utc) on June 29, 2007]

[bear]

Thanks Bernard,

I have been using a timeout to remove child - but your idea with the code substitution via id would be more precise. Thanks for the call back idea. I was thinking of building the script call inside a function that would be evoked when the load was completed. Saw this idea somewhere.

PHP echo

function helper() {;
R[297] = "Changed";
(alert that transfer completed)
};
helper();
remove child or substitute
If OK within a certain time do something
if timeout send error message and try again
};

I'll have another look at AJAX but the separate browser paths worry me in terms of browser upgrades.

Thanks Again

Cheers,