locked
Dropdownlit bind items but does not select the saved item in edit mode RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I have a view in my application through there is one autocomplete dropdown and one normal dropdown.

    The second dropdown bind depend on the selected item in first dropdwon. All is working fine. It saves all data in database.

    The problem is that when the view comes in edit mode it fill all controls with the save items even the first dropdown, but the second dropdown always select the first value not the saved one.

    Below is my first dropdown

     <script>
           $(document).ready(function () {
            var ltauto = "";
            var j = 1;
             $.ajax({
                 type: 'GET',
                url: '@Url.Action("AutoComplete", "Event")',
                 datatype: JSON,
                 async: false,
                 success: function (data) {
                     ltauto = "<script> $(function () { var availableTags1 = [";
                     $(data).each(function (i) {
                         //alert($(this).length);
                         if (j == data.length) {
                             ltauto += "\"" + data[i].label + "\" ];";
                         }
                         else {
                             ltauto += "\"" + data[i].label + "\",";
                         }
                         j = j + 1;
                     });
                     ltauto += " $(\"#txt_pnno\").autocomplete({ source: availableTags1 });  }); <\/\script>";
                     $("#autoscriptadd1").html(ltauto);
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    
    
        </script>

    and the below is the second dropdown

     <script type="text/javascript">
        $(document).ready(function () {
            _teamleader();
        });
        function _teamleader() {
            var pnno = document.getElementById('txt_pnno').value;
            var myarray = pnno.split('(');
            if (myarray.length > 0) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("GETEMAIL", "Event")',
                    data: { "prono": myarray[0] },
                    context: document.body,
                    datatype: JSON,
                    success: function (data) {
                        if (data != "") {
                            var dt = data.data;
                            if (dt != "") {
                                var j = 1;
                                $("#ddl_avdvdeputy").empty();
                                $(dt).each(function (i) {
                                    if (dt[i].email + "" != "") {
                                        $("#ddl_avdvdeputy").append($("<option></option>").val(dt[i].email).html(dt[i].email));
                                        j = j + 1;
                                    }
                                });
                                if (document.getElementById("hdavname").value != "") {
                                    document.getElementById("ddl_avdvdeputy").value = document.getElementById("hdavname").value;
                                }
    
                                document.getElementById("hdavname").value = document.getElementById("ddl_avdvdeputy").value;
    
                            }
                            else {
                                $("#ddl_avdvdeputy").append($("<option></option>").val("dntSave_").html(""));
                            }
                        }
                        else {
                            $("#ddl_avdvdeputy").empty();
                            $("#ddl_avdvdeputy").append($("<option></option>").val("dntSave_").html(""));
                           
                        }
                    }
    
                });
    
    
            }
            else {
    
            }
        }
        function _avnamechange() {
            document.getElementById("hdavname").value = document.getElementById("ddl_avdvdeputy").value;
           
        }
        </script>

    Why it is not selection the right item. I put a break point where I am fetching the data from database and it is getting the right value.

    Please suggest.

    Monday, September 2, 2019 4:43 AM

Answers

  • User1052662409 posted

    It seems the design is based on the first AJAX function executing first because it is synchronous.   JavaScript events do not execute in order.  You should assume the two AJAX functions are running at the same time when the page loads.

    I just put a hidden field and fill the hiddenfield with the model's property value and assigned it to dropdown.

    Now it works fine.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 6, 2019 8:32 AM

All replies

  • User475983607 posted

    It seems the design is based on the first AJAX function executing first because it is synchronous.   JavaScript events do not execute in order.  You should assume the two AJAX functions are running at the same time when the page loads.

    Secondly, since the AJAX code snippets runs when the page loads, this logic can be moved to Razor in the View.  That will save you 2 request and you can use standard Html helpers to populate the selects.  The only JavaScript you'll need is the autocomplete library.  In the end the code will be far simpler and easier to maintain.

    Monday, September 2, 2019 11:58 AM
  • User-719153870 posted

    Hi demoninside9,

    The problem is that when the view comes in edit mode it fill all controls with the save items even the first dropdown, but the second dropdown always select the first value not the saved one.

    It's hard to understand what is an edit mode, are you saying these controls are all in a partial view or something like popping up after you clicked an edit button? Or something else?

    Also, code provided is not enough, maybe you can share more, detailed code like your view markup and your event method behind? So that community might reproduce your problem.

    Best Regard,

    Yang Shen

    Tuesday, September 3, 2019 6:42 AM
  • User1052662409 posted

    It seems the design is based on the first AJAX function executing first because it is synchronous.   JavaScript events do not execute in order.  You should assume the two AJAX functions are running at the same time when the page loads.

    I just put a hidden field and fill the hiddenfield with the model's property value and assigned it to dropdown.

    Now it works fine.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 6, 2019 8:32 AM