Dropdown list filled using jquery ajax not showing after submit button click

Question

Im using jquery ajax to fill the dropdownlist.Every thing works fine,but when i click the submit button, the filled dropdownlist gets cleared and nothing is showing.

What could be the problem ?

The code i've written is given below

 $("#locationList").change(function () {
             FillCashSafe();
         })

 function FillCashSafe() {
         $("#CashSafeLists").empty();
         var locationNo = document.getElementById('<%=locationList.ClientID%>').value;               
         $.ajax({
             url: "HealthReport.aspx/GetCashsafes",
             data: '{Location: "' + locationNo+ '"}',
             type: "POST",
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             success: function (data) {
                 var optionhtml = '<option value="-1">Select One</option>';                     
                 if (data) {                        
                     $("#CashSafeLists").append(optionhtml)
                     $("#CashSafeLists").trigger("liszt:updated");
                     $.each(data.d, function (key, value) {
                         $("#CashSafeLists").append($("<option></option>").val(value.CashsafeId).html(value.CashsafeSerialNo));
                         $("#CashSafeLists").trigger("liszt:updated");
                     });                         
                 }
                 else {                        
                     $("#CashSafeLists").append(optionhtml)
                     $("#CashSafeLists").trigger("liszt:updated");
                 }                     
             },
             error: function (result) {                    
                 $("#CashSafeLists").append($("<option></option>").val("-1").html("Select one"));
                 $("#CashSafeLists").trigger("liszt:updated");
             }
         });

The button click is as follows

<input type="submit" id="Submit1" name="btnSearch" value="Search"
class="btn btn-primary btn-Addbutton " style="margin-left: 4px;" runat="server"   
onserverclick="SearchButtonClicked"  />

Your page is refreshing after the form is submitted, cleaning out the options you added to the list. You have to make sure the list is built on every page load. — Cᴏʀʏ
– Cᴏʀʏ, Commented May 20, 2014 at 12:52
Are you calling a server function with the button click? Doing a postback? — Dean.DePue
– Dean.DePue, Commented May 20, 2014 at 12:53
If you are Using Update Panel then, Dropdown named "CashSafeLists" must be out side the Updatepanel or you should manually call Change event each time like <script> at the end of page $(function(){ $("#locationList").change(function () { FillCashSafe(); }).change(); }); </script> — AB Vyas
– AB Vyas, Commented May 20, 2014 at 12:53

Cᴏʀʏ · Accepted Answer · 2014-05-20 12:53:12Z

1

Your page is refreshing after the form is submitted, cleaning out the options you added to the list. You have to make sure the list is built on every page load.

One easy trick to make that happen is to trigger the change event on the list after the DOM is ready and you've assigned the handler:

$(function() {
    $("#locationList").change(function () {
        FillCashSafe();
    }).change(); // <-- added this!
});

answered May 20, 2014 at 12:53

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SparAby Over a year ago

Thankyou you was absolutely right.But i've one doubt how can i maintain the currently selected item in the cashsafelist dropdown

Gurdev · Accepted Answer · 2018-07-17 15:12:12Z

0

On the server side you need to access the selected value of dropdown using Request.Form name value collection. Assuming your dropdown has a IDof dropdown1 and you are using asp.net webforms. Then you can access using the following method.

string value = Request.Form[dropdown1.UniqueID];

answered Jul 17, 2018 at 15:12

Gurdev

6815 silver badges6 bronze badges

Collectives™ on Stack Overflow

Dropdown list filled using jquery ajax not showing after submit button click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related