PDA

View Full Version : newb javascript help



babyjenniferLB
Feb 1, 2008, 10:02 AM
made this seemingly simple javascript. what is ment to do is every second its ment to echo random numbers into the div. what it dose on my mamp test server is just display the first results and dosnt follow the java script.

<html>
<head>
<script type='text/javascript'>
window.load = function() {
window.onload = load;
var counter = 0;
window.setInterval(function() {
document.getElementById('content').innerHTML = (counter++).toString();
}, 1);
};
</script>
</head>
<body>
<div id='content'><?php
echo rand() . "\n";
echo rand() . "\n";
echo rand(5, 15);
?></div>
</body>
</html>


angelwatt
Feb 1, 2008, 11:01 AM
Here's something to play with. The 1000 is in milliseconds so equals 1 second. Enjoy.

function displayRandom()
{
x = document.getElementById('content');
x.innerHTML = ++x.innerHTML;
setTimeout(displayRandom, 1000);
}
window.onload = displayRandom;
babyjenniferLB
Feb 1, 2008, 11:31 AM
Here's something to play with. The 1000 is in milliseconds so equals 1 second. Enjoy.

function displayRandom()
{
x = document.getElementById('content');
x.innerHTML = ++x.innerHTML;
setTimeout(displayRandom, 1000);
}
window.onload = displayRandom;


your gona have to explain what that dose will it allow me to refreash the div or it that the entire window?
angelwatt
Feb 1, 2008, 12:05 PM
function displayRandom()
{
// grab the tag on the page with content as its id
x = document.getElementById('content');
// Take the content of 'content' which is hopefully a number and increment
// it and set that new number back to the page content
x.innerHTML = ++x.innerHTML;
// In one second call the function again, which will update
// the content without reloading the page
setTimeout(displayRandom, 1000);
}
// When page loads, execute this function.
window.onload = displayRandom;


I added some comments to my code. Hopefully that clears it up a little. Essentially, yes, it refreshes the div without reloading the window. Also this is just something to play with, I don't think it directly answers what you are trying to do. JavaScript has Math.random() which you can use to generate new random numbers rather than just incrementing them like I did in this code.
babyjenniferLB
Feb 1, 2008, 01:33 PM
I added some comments to my code. Hopefully that clears it up a little. Essentially, yes, it refreshes the div without reloading the window. Also this is just something to play with, I don't think it directly answers what you are trying to do. JavaScript has Math.random() which you can use to generate new random numbers rather than just incrementing them like I did in this code.


Thats really cool that it works now perhaps you can help with the last bit instead of a random number i would like it to execute a php command.
angelwatt
Feb 1, 2008, 02:07 PM
Thats really cool that it works now perhaps you can help with the last bit instead of a random number i would like it to execute a php command.

To run PHP from JavaScript takes AJAX. You'll need to use xmlHTTPRequest object I think it's called. It takes a bit of coding to do it as well and don't have the code with me for it, but you should be to use Google to find some AJAX templates that write out the hard parts for you.
angelwatt
Feb 1, 2008, 06:44 PM
OK I got to my AJAX template. You'll still likely need to do some reading to make use of it though, but should help. There's a spot that says php_script_url and that is where you place your php file name as a url.

Some relevant reading: http://www.oracle.com/technology/pub/articles/oracle_php_cookbook/ullman-ajax.html

/*
Skeleton code for AJAX
*/

var isIE = false;
var req; // global request and XML doc objects

function loadXMLDoc(url)
{
req = false;
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest && !(window.ActiveXObject)) {
try { req = new XMLHttpRequest(); }
catch(e) { req = false; }
}
// branch for IE/Windows ActiveX version
else if (window.ActiveXObject) {
isIE = true;
try { req = new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e) {
try { req = new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e) { req = false; }
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open("GET", php_script_url, true);
req.send("");
}
}

function processReqChange()
{
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
// ...processing statements go here...

}
else {
alert("There was a problem retrieving the XML data:\n" +
req.statusText);
}
}
}
bootedbear
Feb 1, 2008, 07:47 PM
If you're gonna get involved with Ajax, I recommend adopting jQuery to handle all the minutia for you.

For example, to load an element from the server:

$('#elementId').load('/some/url');

And that's it!