newbie SELECT created from AJAX not firing the onchange
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 2 of 2

Thread: newbie SELECT created from AJAX not firing the onchange

  1. #1
    Join Date
    Jan 2013
    Posts
    2

    newbie SELECT created from AJAX not firing the onchange

    I have a web page with multiple dropdown lists. The dropdown list ( in real example will
    be coming from database) in this example comes from ajax.

    How can I get the the ONCHANGE to fire from a select statement from a drop down list?
    And How do I get the value of what was selected?

    I have spent hours on this.I want the onchange to fire checkCity and get value in checkCity function.
    ========
    Code:
    <%
    ''' testGetCity.asp
    strcc=request.querystring("cc")
    If Len(trim(strcc))=0 THEN strcc="1"
    If strcc="1" THEN
       response.write("<select name=""listcity"" idname=""listcity"" ")
       response.write("&nbsp;onchange=""checkCity(this)"">")
       response.write "<option value=""CA_FRESNO"">Fresno</option>"
       response.write "<option value=""CA_LOS_ANGELES"">Los_Angeles</option>"
       response.write "<option value=""CA_SACRAMENTO"">Sacramento</option>"
       response.write("</select>")
    END IF
    If strcc="2" THEN
       response.write("<select name=""listcity"" idname=""listcity"" ")
       response.write("&nbsp;onchange=""checkCity(this)"">")
       response.write "<option value=""TX_AUSTIN"">Austin</option>"
       response.write "<option value=""TX_DALLAS"">Dallas</option>"
       response.write "<option value=""TX_HOUSTON"">Houston</option>"
       response.write("</select>")
    END IF
    
    %>
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>test_AjaxCity</title>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <div>
      <div id="listcity01">California</div>
      <div id="listcity02">Texas</div>
      </div>
      <script type="text/javascript">
    function checkCity(what){
      alert("Inside_checkCity option chosen is=");
    }
    $(document).ready(function()
    {
    function runRequest(num){
        if (num > 2){
        return;
        }
        if (eval(num) ==1){
           var mssg="testGetCity.asp?cc=1";   
        }
        if (eval(num) ==2){
           var mssg="testGetCity.asp?cc=2";   
        }
        $.ajax
        ({
        type: "POST",
        url: mssg,
        async: false,
        data:  "" ,
        success: function(msg){
             if (eval(num) ==1){
                $("#listcity01").append(msg);
             }   
             if (eval(num) ==2){
                $("#listcity02").append(msg);
             }   
        }
        });
    }
    var intjs;
    for(intjs=1;intjs<3;intjs++){
        runRequest(intjs);
    }
    });  
      </script>
      
    </body>
    </html>
    Suggestions
    TIA
    shall42

  2. #2
    Join Date
    Jan 2013
    Posts
    2

    Re: newbie SELECT created from AJAX not firing the onchange-SOLVED

    I got some good info from Dave ( dsvick ).

    SOLVED - here is the results of having multiple select statements on a page
    and able to get the value.

    Code:
    <%
    ''' testGetCity.asp
    strcc=request.querystring("cc")
    If Len(trim(strcc))=0 THEN strcc="1"
    If strcc="1" THEN
       response.write("<select name=""AAlistcity"" idname=""listcity"" ")
       response.write("&nbsp;onchange=""checkCity(this)"">")
       response.write "<option value=""CA_FRESNO"">Fresno</option>"
       response.write "<option value=""CA_LOS_ANGELES"">Los_Angeles</option>"
       response.write "<option value=""CA_SACRAMENTO"">Sacramento</option>"
       response.write("</select>")
    END IF
    If strcc="2" THEN
       response.write("<select name=""BBlistcity"" idname=""listcity"" ")
       response.write("&nbsp;onchange=""checkCity(this)"">")
       response.write "<option value=""TX_AUSTIN"">Austin</option>"
       response.write "<option value=""TX_DALLAS"">Dallas</option>"
       response.write "<option value=""TX_HOUSTON"">Houston</option>"
       response.write("</select>")
    END IF
    %>
    Now the other page which calls the page above.
    I hope this helps someone else. I spent a lot of time on this.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>test_AjaxCity</title>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <div>
      <div id="listcity01">California</div>
      <div id="listcity02">Texas</div>
      </div>
      <script type="text/javascript">
    $(document).ready(function()
    {
    $("body").on("change", "#listcity01,#listcity02", function(selected) {
          var strCity
          strCity=$(':selected',this).attr('value');
          alert("A_the selected value is: " + strCity);
    });
    function runRequest(num){
        if (num > 2){
        return;
        }
        if (eval(num) ==1){
           var mssg="testGetCity.asp?cc=1";   
        }
        if (eval(num) ==2){
           var mssg="testGetCity.asp?cc=2";   
        }
        $.ajax
        ({
        type: "POST",
        url: mssg,
        async: false,
        data:  "" ,
        success: function(msg){
             if (eval(num) ==1){
                $("#listcity01").append(msg);
             }   
             if (eval(num) ==2){
                $("#listcity02").append(msg);
             }   
        }
        });
    }
    var intjs;
    for(intjs=1;intjs<3;intjs++){
        runRequest(intjs);
    }
    });  
      </script>
      
    </body>
    </html>

Tags for this Thread

Posting Permissions

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


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center