Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    select drop down list does not drop down when called through ajax request

    Hi, I am creating this scenario where when a form opens I want a select drop down list to open within a div. i call a function that calls the server side script to retrieve the select options for mysql db. Then i use ajax responseText to call the php response. I created all the code for this, and the select drop down list appears. However, when I clicks on the drop down to select an option, the drop down list immediately closes as soon as I release my mouse button. The drop down list does not stay open.

    I am not sure what this problem is:

    here is my code:

    ajax:

    Code:
    
    /* This is the ajax request function used to create 
       a request object based on the browser */
    
    function getHTTPObject() {
      var xhr = null ;
      try {
        xhr = new XMLHttpRequest() ;
      } catch(e) {
        // standards request failed - try ie
        try {
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          // both attempts failed
          xhr = null ;
        }
      }
      return xhr ;
    }
    /*-----------------------------------------------------------------------------------------------*/
    function display_course_name()
    {
    	courseReq = getHTTPObject();
    	if(courseReq == null)
    	{
    		alert("Your browser does not support AJAX!");
    		return;
    	}
    	var url="cData.php";
    	 courseReq.onreadystatechange=function() {
    	    //alert(course); 
            if (courseReq.readyState==4 || courseReq.readyState=="complete") { 
                //alert(xmlhttp.responseText);
                document.getElementById('cName').innerHTML=courseReq.responseText; 
            } 
        } 
        courseReq.open("GET",url,true); 
        courseReq.send(null); 
    }
    
    /*--------------------------

    this is where I call the ajax function:
    Code:
    <form action="sessionFormSubmit.php" onclick="display_course_name()" onsubmit="training_sec_id();" name="sessionForm" method="post" id="sessionForm">
    this is my php server side script:

    Code:
    <?php
    include("mysqlConnection.php");
    //fetch course name and course instructor for courses table and display as options
    //use '<<' as delimiter.
    $result = @mysql_query('SELECT DISTINCT courseName FROM courses WHERE courseName != "" ');
    if (!$result) {
     exit('<p>Error performing query: ' . mysql_error() .
         '</p>');
    }     
    echo'<p><label>* Course Name</label> <select name="training" id="training" onclick="display_course_instructor(this.value);">';
    while ($row = mysql_fetch_array($result)) {
     echo '<option value="' .$row['courseName']. '">' . $row['courseName'] . '</option>';
     }
    echo'</select><span>&nbsp;&nbsp;Choose a Course</span></p>'; 
    include("mysqlConnClose.php");
    ?>

    any help would be much appreciated!! Thanks!

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    You should use onchange or onblur and not onclick with the select element.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

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