Chained Select Menu - работает, но требует небольшого изменения - AJAX

В настоящее время я использую следующий скрипт для запуска PHP-скрипта каждый раз, когда выбирается выпадающее меню. Работает отлично. Затем он возвращает результаты запроса SQL и помещает его во второй раскрывающийся список.

Тем не менее, я также хотел бы запустить скрипт PHP при начальной загрузке веб-страницы.

По сути, я надеюсь, что мое меню выбора ("2-й выпадающий") будет заполнено результатами PHP-скрипта при первой загрузке страницы. Затем пользователь может отфильтровать результаты, используя первое выпадающее меню.

Вот мой текущий файл Javascript. Я не использую jQuery.

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

РЕДАКТИРОВАТЬ

// ajax.js

/*  This page defines a function for creating an Ajax request object.
 *  This page should be included by other pages that 
 *  need to perform an XMLHttpRequest.
 */

/*  Function for creating the XMLHttpRequest object.
 *  Function takes no arguments.
 *  Function returns a browser-specific XMLHttpRequest object
 *  or returns the Boolean value false.
 */
function getXMLHttpRequestObject() {

    // Initialize the object:
    var ajax = false;

    // Choose object type based upon what's supported:
    if (window.XMLHttpRequest) {

        // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
        ajax = new XMLHttpRequest();

    } else if (window.ActiveXObject) { // Older IE browsers

        // Create type Msxml2.XMLHTTP, if possible:
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) { // Create the older type instead:
            try {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }

    } // End of main IF-ELSE IF.

    // Return the value:
    return ajax;

} // End of getXMLHttpRequestObject() function.

Большое спасибо за любые указатели здесь.

0 ответов

Другие вопросы по тегам