JQuery - feedback

Question

I need to select a value from the drop-down list after loading it:

EDIT: In the script associated with the view, I have:

//Dropdown cascade call when trigger is called and fill councilDropdown: $("#districtDropdown").cascade({ url: "/Address/ListCouncilByDistrict", paramName: "districtId", firstOption: 'Selecione o Concelho...', childSelect: $("#councilDropdown") }); $("#PostalCode").keyup(function () { loadPTPostalCode(); }); $("#PostalCodeExtension").keyup(function () { loadPTPostalCode(); }); function loadPTPostalCode() { if ($("#PostalCode").val() >= 1000) { $.ajax({ url: '/Address/GetPTPostalCode', type: "POST", dataType: "json", data: { postalCode: $("#PostalCode").val(), postalCodeExtension: $("#PostalCodeExtension").val() }, success: function (data) { if (data != null) { $("#districtDropdown").val(data.PTDistrict_Id); // Set the Dropdown value $('#districtDropdown').trigger('change'); // Trigger (force the dropdown to load // *** This is done to soon, the dropdownlist of the Councils is not all loaded yet *** $("#councilDropdown").val(data.PTCouncil_Id); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus) } }); } 

}

EDIT: View

 @model Heelp.ViewModels.AddressPTViewModel <h2>Create</h2> @using (Ajax.BeginForm(MVC.Address.CreateAddressPT(), new AjaxOptions { OnSuccess = "showLoginConfirmationResultMessage" }, new { @id = "AddressForm" })) { @Html.AntiForgeryToken() <div class="address1"> @Html.LabelFor(model => model.Address1) @Html.TextBoxFor(model => model.Address1) @Html.ValidationMessageFor(model => model.Address1) </div> <div class="address2"> @Html.TextBoxFor(model => model.Address2) @Html.ValidationMessageFor(model => model.Address2) </div> <div class="city"> @Html.LabelFor(model => model.City) @Html.TextBoxFor(model => model.City) @Html.ValidationMessageFor(model => model.City) </div> <div class="postalCode"> @Html.DisplayNameFor(m => m.PostalCode) @Html.TextBoxFor(m => m.PostalCode, new { @Value = "" }) @Html.ValidationMessageFor(m => m.PostalCode) </div> <div class="postalCodeExtension"> @Html.LabelFor(model => model.PostalCodeExtension) @Html.TextBoxFor(model => model.PostalCodeExtension) @Html.ValidationMessageFor(m => m.PostalCodeExtension) </div> <div class="postalCodeCity"> @Html.LabelFor(model => model.PostalCodeCity) @Html.TextBoxFor(model => model.PostalCodeCity) @Html.ValidationMessageFor(m => m.PostalCodeCity) </div> <div id="district"> @Html.DisplayNameFor(m => m.PTDistrict_Id) @Html.DropDownListFor(m => m.PTDistrict_Id, Model.PTDistrictList, HeelpResources.PTDistrictViewDropDownListFirstRecord, new { id = "districtDropdown" }) @Html.ValidationMessageFor(m => m.PTDistrict_Id) </div> <div id="council"> @Html.DisplayNameFor(m => m.PTCouncil_Id) @Html.DropDownListFor(m => m.PTCouncil_Id, Model.PTCouncilList, HeelpResources.PTCouncilViewDropDownListFirstRecord, new { id = "councilDropdown" }) @Html.ValidationMessageFor(m => m.PTCouncil_Id) </div> <p> <input type="submit" value="Create" /> </p> } <div> @Html.ActionLink("Back to List", "Index") </div> 

EDIT:

Cascade function:

 // Cascade function (function ($) { $.fn.cascade = function (options) { var defaults = {}; var opts = $.extend(defaults, options); return this.each(function () { $(this).change(function () { var selectedValue = $(this).val(); if (selectedValue == '') { opts.childSelect.empty(); return; } var params = {}; params[opts.paramName] = selectedValue; $.post(opts.url, params, function (items) { //$.getJSON(opts.url, params, function (items) { opts.childSelect.empty(); if (opts.firstOption != "") opts.childSelect.append( $('<option/>') .attr('value', '') .text(opts.firstOption)); $.each(items, function (index, item) { // alert(opts.firstOption); opts.childSelect.append( $('<option/>') .attr('value', item.Id) .text(item.Name) ); }); }); }); }); }; })(jQuery); 

But when I do this, since Dropdownlist is not loaded yet, val () does not exist yet.

For example, if I put a warning message before, it works fine because it is the loading time of the dropdown list.

How to set the value of the dropdown list of the board only after the dropdown menu is loaded?

Answer 1

I would say that there are two approaches.

1

The best practice would be to simply add a callback function to your cascade. This can be done as follows:

 ... $.post(opts.url, params, function (items) { //$.getJSON(opts.url, params, function (items) { opts.childSelect.empty(); if (opts.firstOption != ""){ opts.childSelect.append( $('<option/>') .attr('value', '') .text(opts.firstOption)); $.each(items, function (index, item) { // alert(opts.firstOption); opts.childSelect.append( $('<option/>') .attr('value', item.Id) .text(item.Name) ); }); if( typeof(opts.callback) == "function" )opts.callback();//issue callback } }); ... 

It will be used when setting up the cascade here:

 $("#districtDropdown").cascade({ url: "/Address/ListCouncilByDistrict", paramName: "districtId", firstOption: 'Selecione o Concelho...', childSelect: $("#councilDropdown"), callback: function(){ districtCallback(); } }); 

and is defined as you like:

 function districtCallback(){ $("#councilDropdown").val($("#districtDropdown").val()); } 

2

Fast and dirty. jsFiddle demo

 success: function (data) { if (data != null) { $("#districtDropdown").val(data.PTDistrict_Id); // Set the Dropdown value $('#districtDropdown').trigger('change'); // Trigger (force the dropdown to load (function councilVal(){ if( typeof($("#councilDropdown").val()) != "undefined" ){ $("#councilDropdown").val(data.PTCouncil_Id); }else{ setTimeout(councilVal,50); } })() } } 

Answer 2

As your requirement " set the value of the drop-down list of the board only after the dropdown menu is loaded ."

You need to execute a synchronous Ajax request. You can specify the async false option to get a synchronous Ajax request.

 $.ajax({ url: '/Address/GetPTPostalCode', type: "POST", dataType: "json", data: { postalCode: $("#PostalCode").val(), postalCodeExtension: $("#PostalCodeExtension").val() }, success: function (data) { if (data != null) { $("#districtDropdown").val(data.PTDistrict_Id); $('#districtDropdown').trigger('change'); // *** This is done to soon, the dropdownlist of the Councils is not all loaded yet *** $("#councilDropdown").val(data.PTCouncil_Id); } }, async: false }); 

Answer 3

I would update the cascading plugin to trigger an event when ddl is updated.

 (function ($) { $.fn.cascade = function (options) { var defaults = {}; var opts = $.extend(defaults, options); return this.each(function () { $(this).change(function () { // #### store reference to changed element for later #### var self = this, selectedValue = $(this).val(); if (selectedValue == '') { opts.childSelect.empty(); return; } var params = {}; params[opts.paramName] = selectedValue; $.post(opts.url, params, function (items) { //$.getJSON(opts.url, params, function (items) { opts.childSelect.empty(); if (opts.firstOption != "") opts.childSelect.append( $('<option/>') .attr('value', '') .text(opts.firstOption)); $.each(items, function (index, item) { // alert(opts.firstOption); opts.childSelect.append( $('<option/>') .attr('value', item.Id) .text(item.Name) ); }); // #### Trigger event #### self.trigger("update"); }); }); }); }; })(jQuery); 

now you can get attached to this:

  ... // *** #### fixed #### This is done to soon, the dropdownlist of the Councils is not all loaded yet *** $("#councilDropdown").on("updated",function(){ $(this).val(data.PTCouncil_Id); }); } 

Answer 4

Try creating two events in the drop-down menu: 1. custom event and 2. change the event

When the user manually changes, then the dropdown value will change the event.

 $('#dictrctDropdown').change(function (event){ $('#dictrctDropdown').trigger('custom'); }); $('#dictrctDropdown').on('custom', function (event, param1){ // Load council dropdown if(param1){ $("#councilDropdown").val(param1); } }); 

from "/ Address / GetPTPostalCode" successful call back to raise custom event for "dictrctDropdown"

 function loadPTPostalCode() { if ($("#PostalCode").val() >= 1000) { $.ajax({ url: '/Address/GetPTPostalCode', type: "POST", dataType: "json", data: { postalCode: $("#PostalCode").val(), postalCodeExtension: $("#PostalCodeExtension").val() }, success: function (data) { if (data != null) { $.getJSON('disctrictURL','data to post (if any)',function(response){ //Load district dropdown /* $.each(items, function (index, item) { // alert(opts.firstOption); opts.childSelect.append( $('<option/>') .attr('value', item.Id) .text(item.Name) ); }); */ $("#districtDropdown").val(data.PTDistrict_Id); // Set the Dropdown value }); //Now use district id load council dropdown and set value $.getJSON('councilURL','data to post (if any)',function(response){ //Council dropdown $("#districtDropdown").val('council id'); // Set the Dropdown value }); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus) } }); } 

Hope this helps!