SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chained Select Menu issue - AJAX

    Hi,

    I am currently using the following script to run a PHP script when a dropdown menu option is selected.
    This then returns the results from a SQL query and places it in a 2nd dropdown.

    However, I would also like to run a script when the web page initially loads.

    This basically means I hope my select menu ("2nd dropdown") will be populated with the results of the PHP script when the page loads. And the user can then filter the results down by using the first dropdown menu.

    Code JavaScript:
    // Have a function run after the page loads:
    window.onload = init;
     
     
    /* ------------------------------------------------------------------------
     * Can I run this...
     * ajax.open('get', 'dept_results_ajax.php');
     * ... as soon as my page loads and return the results?
     *  ------------------------------------------------------------------------
    */
     
     
    // Function that adds the Ajax layer:
    function init() {
     
      // Get an XMLHttpRequest object:
      var ajax = getXMLHttpRequestObject();
     
      // Attach the function call to the form submission, if supported:
      if (ajax) {
     
        // Check for DOM support:
        if (document.getElementById('results')) {
     
          // Add an onsubmit event handler to the form:
          $('#did').change(function() {
     
            // Call the PHP script.
            // Use the GET method.
            // Pass the department_id in the URL.
     
            // Get the department_id:
            var did = document.getElementById('did').value;
     
            // Open the connection:
            ajax.open('get', 'dept_results_ajax.php?did=' + encodeURIComponent(did));
     
            // Function that handles the response:
            ajax.onreadystatechange = function() {
              // Pass it this request object:
              handleResponse(ajax);
            }
     
            // Send the request:
            ajax.send(null);
     
            return false; // So form isn't submitted.
     
          } // End of anonymous function.
     
        )} // End of DOM check.
     
      } // End of ajax IF.
     
    } // End of init() function.
     
    // Function that handles the response from the PHP script:
    function handleResponse(ajax) {
     
      // Check that the transaction is complete:
      if (ajax.readyState == 4) {
     
        // Check for a valid HTTP status code:
        if ((ajax.status == 200) || (ajax.status == 304) ) {
     
          // Put the received response in the DOM:
          var results = document.getElementById('results');
          results.innerHTML = ajax.responseText;
     
          // Make the results box visible:
          results.style.display = 'block';
     
        } else { // Bad status code, submit the form.
          document.getElementById('dept_form').submit();
        }
     
      } // End of readyState IF.
     
    } // End of handleResponse() function.


    Many thanks for any pointers here.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You can add a callback to the handleResponse function:

    Code javascript:
    function handleResponse(ajax, callback) {

    So that you can pass in a function that will be run once the response has been successfully handled.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •