SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie Question - Javascript/AJAX function problem

    Hello everyone:

    I am having a really annoying problem with javascript and calling a function. I have asked many people but no one has been able to help me, but I still believe there is a simple solution somewhere.


    This is how it works. I have a select box on a page. When onChange event is executed a function is called which sends a http request. The code returned is echo'd to produce another select box with more options.

    This all works perfectly. The problem begins when I want to have two select box's output but with different names. So they have the same options, the same text, just different names. Simple as that. However I can't get it to work. Code as follows:


    PHP Code:
    <?php
        
    include_once ("include/stdlib.php");
        include (
    "include/stdcfg.php");
    ?>
    <html>
    <head> <title> test page </title>
    <script language="javascript"  type="text/javascript">

    function createRequestObject() {

       var req;

       if(window.XMLHttpRequest){
          // Firefox, Safari, Opera...
          req = new XMLHttpRequest();
       } else if(window.ActiveXObject) {
          // Internet Explorer 5+
          req = new ActiveXObject("Microsoft.XMLHTTP");
       } else {
          // There is an error creating the object,
          // just as an old browser is being used.
          alert('Problem creating the XMLHttpRequest object');
       }

       return req;

    }

    // Make the XMLHttpRequest object
       var http = createRequestObject();

    function sendRequest() {
       // Open PHP script for requests
       var mainCategory = document.getElementById("main_category").value;
       http.open('get', 'getSubCategories.php?name=sub_category&param='+mainCategory);
       http.onreadystatechange = handleResponse;
       http.send(null);
       
       sendRequest;

    }

    function sendRequest2() {
       // Open PHP script for requests
       var mainCategory = document.getElementById("main_category").value;
       http.open('get', 'getSubCategories.php?name=second_sub_category&param='+mainCategory);
       http.onreadystatechange = handleResponse;
       http.send(null);

    }


    function handleResponse(element) {

       if(http.readyState == 4 && http.status == 200){

          // Text returned FROM the PHP script
          var response = http.responseText;
        alert(http.responseText);

          if(response) {
             // UPDATE ajaxTest content
             document.getElementById(element).innerHTML = response;
          }

       }

    }

    </script>

    </head>

    <body>

    <?php    
        
    echo "<form>";    
                echo 
    "<select id='main_category' name='main_category' onChange='sendRequest();'>";
                
    $result runQuery("SELECT * FROM categories WHERE parent_category = ''");
                
                while (
    $row mysql_fetch_array($result)) {
                    
    $id $row['id'];
                    
    $category $row['category'];
                    echo 
    "<option id='$id' value='$id'> $category";
                }
                echo 
    "</select>";

        
        echo 
    "<div id='sub_category'></div>";

        echo 
    "</form>";


    ?>

    </body>
    </html>

    There we are then. I've tried everything that I can think off.

    Originally I copied the code to call and create the select boxes, but that didn't work. I then tried giving the function a parameter, so I could call it twice but with a different name given:

    <select onChange='sendRequest('box_1'); sendRequest('box_2');'>

    That didn't work. I then tried coping and pasting the function sendRequest to sendRequest2, and calling the functions after one another - still doesn't work.

    I've been stuck on this for 2 days now, and still no luck. As I said, I'm sure there must be a simple solution.

    Simplicity is the key, as I have only just started learning ajax and even js too.


    Thanks for all your help,
    Gary.

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <select> element in this case doesn't have a 'value'. The 'selected index' has a value. So to get the value that the person selects in the dropdown, you would need something like this:
    Code:
    //'sel' is a convenience var to reduce typing
    var sel = document.getElementById("main_category");
    var mainCategory = sel(sel.selectedIndex).value;
    You see that I need to determine which one of the options has been selected before I can send that value to the XHR.

    The other piece of code that's perplexing is your handleResponse function. There isn't an instance in your code where you pass the 'element' argument to that function, but you're using that argument as a string to identify a document object to update? You may want to revisit that one, too.

    Hopefully, I've helped a bit.

    Jon


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
  •