newb javascript help

Discussion in 'Web Design and Development' started by Cabbit, Feb 1, 2008.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    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.

    PHP:
    <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(515);
    ?></div>
    </body>
    </html> 
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Here's something to play with. The 1000 is in milliseconds so equals 1 second. Enjoy.

    Code:
    function displayRandom()
    {
      x = document.getElementById('content');
      x.innerHTML = ++x.innerHTML;
      setTimeout(displayRandom, 1000);
    }
    window.onload = displayRandom;
    
     
  3. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #3
    your gona have to explain what that dose will it allow me to refreash the div or it that the entire window?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #5

    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.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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

    Code:
    /*
       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);
        }
      }
    }
    
     
  8. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #8
    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!
     

Share This Page