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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    AJAX select question inline html

    Hi,
    I have what is probably a stupid issue. I have a select box that is being filled by an an ajax request to a SQL DB and returns the results in a select box. That part works fine.

    The second part of the request is that i also want my inline html to change results if i change my selection.

    that part is not working. I tried to put my onchange event into the option in php, but that doesn't return anything either.
    $display_string .= "<option onchange=\"getSoftwareUpdate();\"> $row[Software] </option>";


    clear as mud?

    Any help would be much appreciated!



    //this section gets the results from the php script and returns back the values in the db.

    <script language="javascript" type="text/javascript">
    <!--
    //Browser Support Code
    function getSoftwareFunction()
    {
    var ajaxRequest; // The variable that makes Ajax possible!
    try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
    } catch (e){
    // Internet Explorer Browsers
    try{
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try{
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e){
    // Something went wrong
    alert("Please contact Trinity Help Desk at ext. 88817");
    return false;
    }
    }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
    var ajaxDisplay = document.getElementById('ajaxDiv');
    ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
    }


    var SoftwareName = document.getElementById('results').value;
    var ManufacturerName = document.getElementById('results').value;
    var VersionName = document.getElementById('results').value;
    var InstallLocationName = document.getElementById('results').value;
    var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName
    ajaxRequest.open("POST", "getSoftwareName.php" + queryString, true);
    ajaxRequest.send(null);
    }

    </script>

    //this next part i want to return the results based on an onchange event in the select option


    <script language="javascript" type="text/javascript">
    <!--
    //Browser Support Code
    function getSoftwareUpdate()
    {
    var ajaxRequest1; // added
    try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest1 = new XMLHttpRequest();
    } catch (e){
    // Internet Explorer Browsers
    try{
    ajaxRequest1 = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try{
    ajaxRequest1 = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e){
    // Something went wrong
    alert("Please contact Trinity Help Desk at ext. 88817");
    return false;
    }
    }
    }

    //added
    // Create a function that will receive data sent from the server
    ajaxRequest1.onreadystatechange = function(){
    if(ajaxRequest1.readyState == 4){
    var ajaxDisplay1 = document.getElementById('ajaxDiv1');
    ajaxDisplay1.innerHTML = ajaxRequest1.responseText;
    }
    }
    //end add

    var Software = document.getElementById('results').value;
    var SoftwareName = document.getElementById('results').value;
    ajaxRequest1.open("POST", "getSoftwareName1.php" + SoftwareName, true);
    ajaxRequest1.send(null);



    }
    </script>
    <html>
    <div id='ajaxDiv1'></div>
    <div id='ajaxDiv'>
    <select id='results' onchange="getSoftwareUpdate();" name="Software"> </select>
    </div>
    </html>

    </td>

  • #2
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Maybe a more condensed way to look at this would be to say I have a dynamically loading select option using AJAX and php. Based on what the user selects, I would like to have ajax use the inline html to return results. i have tried to put in a basic function to see if i am even getting the value, but I am not.


    <script language="javascript" type="text/javascript">
    <!--
    //Browser Support Code
    function getSoftwareFunction()
    {
    var ajaxRequest; // The variable that makes Ajax possible!
    try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
    } catch (e){
    // Internet Explorer Browsers
    try{
    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try{
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e){
    // Something went wrong
    alert("Please contact Trinity Help Desk at ext. 88817");
    return false;
    }
    }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
    var ajaxDisplay = document.getElementById('ajaxDiv');
    ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
    }


    var SoftwareName = document.getElementById('results').value;
    var ManufacturerName = document.getElementById('results').value;
    var VersionName = document.getElementById('results').value;
    var InstallLocationName = document.getElementById('results').value;
    var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName
    ajaxRequest.open("POST", "getSoftwareName.php" + queryString, true);
    ajaxRequest.send(null);
    }

    </script>
    <script type="text/javascript">
    function getSelectedValue(){
    var index = document.getElementById('results').selectedIndex;
    alert("value="+document.getElementById('results').value);
    alert("text="+document.getElementById('results').options[index].text);
    }
    </script>
    <body onload='getSoftwareFunction()'>
    <html>
    <div id='ajaxDiv'>
    <select id='results' onchange="getSelectedValue();" name="Software"> </select>
    </div>

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    Why are you specifying that you are doing a POST when clearly you are doing send(null) and putting all the information in the querystring????

    Try changing from POST to GET, since that's what you are doing.

    But of course if your PHP code is *expecting* POST, then you can't do what you are doing, at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,857
    Thanks
    78
    Thanked 4,417 Times in 4,382 Posts
    I should note, too, that if any of your form field values contain spaces or various other special characters, they *MUST* be encoded, whether used in the querystring or in post data. So I'd do:
    Code:
    var SoftwareName = encodeURIComponent( document.getElementById('results').value );
    var ManufacturerName = encodeURIComponent( document.getElementById('results').value );
    var VersionName = encodeURIComponent( document.getElementById('results').value );
    var InstallLocationName = encodeURIComponent( document.getElementById('results').value );
    var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName
    But now that I see that, it makes no sense: WHY are you passing the *SAME VALUE* for all those querystring fields???

    All four values are just the value of the form field named "results"!!!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    If I have construed this properly it amounts to a two-stage dynamic listbox, the second being downloaded as an entire block of HTML rather than just downloading the option data.
    This is a pretty clunky way of doing things but I suppose it could work. <Option>s don't have an onchange event, so the onchange handler for the downloaded listbox has to be written into the <select> tag in the same way as the first.

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I was able to figure out that it was not returning the value because i messed something up in php.

    however, now i'm stuck with a new question.
    how do i make my ajax function work in php?



    echo "
    <script type=\"text/javascript\">
    function getSoftwareUpdate()
    {
    var ajaxRequest1;
    try{
    ajaxRequest1 = new XMLHttpRequest();
    } catch (e){
    try{
    ajaxRequest1 = new ActiveXObject(\"Msxml2.XMLHTTP\");
    } catch (e) {
    try{
    ajaxRequest1 = new ActiveXObject(\"Microsoft.XMLHTTP\");
    } catch (e){
    alert(\"Please contact Trinity Help Desk at ext. 88817\");
    return false;
    }
    }
    }

    ajaxRequest1.onreadystatechange = function(){
    if(ajaxRequest1.readyState == 4){
    var ajaxDisplay1 = document.getElementById('ajaxDiv1');
    ajaxDisplay1.innerHTML = ajaxRequest1.responseText;
    }
    }

    var Software = document.getElementById('results').value;
    var SoftwareName = document.getElementById('results').value;
    ajaxRequest1.open(\"POST\", \"getSoftwareName1.php\" + SoftwareName, true);
    ajaxRequest1.send(null);


    }
    </script>
    ";


  •  

    Posting Permissions

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