We Keep Coding

ASP.NET - Set DropDownList's value and text attributes using JS

I have a Dropdownlist control in one of my ASCX page.
<asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="borderColorChange(this.id)" CssClass="dropDownBox" DataTextField="EmpName" DataValueField="EmpID">
My objective is to fill this Dropdownlist with 'EmpID' as value attribute and 'EmpName' as text attribute.
JS code to fetch these 'EmpName' and 'EmpID' values are as follows :
$(document).ready(function ()
{
loadSavedFreeTextSearchCombo();
}
function loadSavedFreeTextSearchCombo() {
var params = {
loginID: $('#loginID').val()
};
var paramsJSON = $.toJSON(params);
$.ajax({
type: "POST",
url: _WebRoot() + "/Ajax/EmpDetails.asmx/GetEmp",
data: paramsJSON,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#demoddl').empty();
$('#demoddl').append($("<option></option>").val(0).html("--Employee Names --"));
$.each(data.d, function (index, value) {
$('#demoddl').append($("<option></option>").val(value.EmpID).html(value.EmpName));
});
},
error: function () {
showError("Failed to load Saved Search Data!");
}
});
}
Although the entire code runs without any error (the EmpDetails.asmx method returns the valid data successfully), the dropdwonlist doesn't get filled with the required data returned.
What am I doing wrong? I guess somehting's wrong at my 'success' event code

Since you're intended to use DropDownList server control ID as selector, it is necessary to set ClientIDMode="Static", especially if you're using <asp:ContentPlaceHolder> or <asp:Content> to prevent ASPX engine creating <select> element with id attribute containing dropdown's placeholder name:
<asp:DropDownList ID="demoddl" runat="server" ClientIDMode="Static"
onchange="apply(this.options[this.selectedIndex].value,event)"
onclick="borderColorChange(this.id, 'Click')"
onblur="borderColorChange(this.id)"
CssClass="dropDownBox" DataTextField="EmpName" DataValueField="EmpID">
If you cannot use ClientIDMode="Static" attribute for certain reasons (e.g. avoiding multiple <select> elements with same ID), use ClientID property of the control as selector, i.e. <%= demoddl.ClientID %>:
$.ajax({
type: "POST",
url: _WebRoot() + "/Ajax/EmpDetails.asmx/GetEmp",
data: paramsJSON,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#<%= demoddl.ClientID %>').empty();
$('#<%= demoddl.ClientID %>').append($("<option></option>").val(0).html("--Employee Names --"));
// recommended to check against undefined here
$.each(data.d, function (index, value) {
$('#<%= demoddl.ClientID %>').append($("<option></option>").val(value.EmpID).html(value.EmpName));
});
},
error: function () {
showError("Failed to load Saved Search Data!");
}
});

How to change RequiredField dynamically?

I have a dropdownlist and when I selected a value from it I am checking the value from another table and according to returning value I change the visibility of a layout item. Now I need to set it Required if it is visible(If the value from ajax is 3 or 5). How can I do it? Here is my ajax that set visible or not.
Edit: I want to set liGid required when in if condition.
`$.ajax({
type: "POST",
url: "TestPage.aspx/GetCode",
data: '{"XKod":"' + s.GetValue().toString() + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.d.GrupKodu == 3 || msg.d.GrupKodu == 5) {
fytbTab0.GetItemByName('liGid').SetVisible(true);
}
else {
fytbTab0.GetItemByName('liGid').SetVisible(false);
}
}
});`

Add the line
fytbTab0.GetItemByName('liGid').required = true;

How do I prevent reset the select box after ajax post action?

I want to make the option I selected fix to after AJAX POST.
Currently I am doing the work manually.
I put the value at OnChange in the HiddenField,
and after doing AJAX POST, re-insert the value selected in "ddlUserCont".
<select id="ddlUserCont" onchange="ddlUserCont_Onchange(this);"></select>
function ddlUserCont_Onchange(obj) {
document.getElementById("<%=hidSelddlUserCont.ClientID %>").value = obj.value;
}
-> After AJAX POST action..
function btnTest_Click() {
// ... Some logic
$.ajax({
type: "POST",
cache: false,
url: "../../WebServices/WebService.asmx/GetTest",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
OnSuccess_GetTest(data, sTestVal);
},
error: function (request, status, error) {
console.log("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
}
});
}
function OnSuccess_GetTest(response, sTestVal) {
var items = response.d;
// ... Some logic
var sSelPageName = document.getElementById("<%=hidSelddlUserCont.ClientID %>").value;
document.getElementById("ddlUserCont_" + sSelPageName).selected = "true";
}
Do I use UpdatePanel ?

Why is it getting reset? is the page reloading? or is some other script resetting it?
function OnSuccess_GetTest(response, sTestVal) {
var items = response.d;
// ... Some logic
var sSelPageName = document.getElementById("<%=hidSelddlUserCont.ClientID %>").value; // get the value from the hidden field
document.getElementById("ddlUserCont).value = sSelPageName; // set it on the select options element
}
Just make sure that select has an option child element with value=<sSelPageName> at the time.

Javascript Circular reference exception

I am trying to update the description field for a record in a database using a JQuery.change for the input on the view. However, after wiring up my clientside code I am now getting a circular reference exception when trying to stringify the JSON in order to make the ajax call. Any help would be greatly appreciated.
Here's the code:
<div class="divTableCell">
<label for="CheckRunDescription" id="checkRunDescriptionLabel">Description:</label>
<input type="text" id="CheckRunDescription" style="width: 270px;" />
</div>
The JQuery:
$('#CheckRunDescription')
.change(function() {
$(this).data("old", $(this).data("new") || "");
var newDetails = $(this).data("new", $(this).val());
updateCheckRunDetails(newDetails);
});
function updateCheckRunDetails(newDetails) {
var checkRunID = $('#checkRunID').val();
var js = JSON.stringify({ checkRunDetails:newDetails, checkRunID:checkRunID });
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: './PayInvoicesWS.asmx/UpdateCheckRunDetails',
data: js,
dataType: "json",
success: function (data) {
},
error: function (data) {
}
});
}

You are trying to stringify a jQuery object.
var newDetails = $(this).data("new", $(this).val());// returns `$(this)`
I am guessing you want the input value passed to the function
Try
$('#CheckRunDescription')
.change(function() {
var newDetails = $(this).val();
$(this).data("old", $(this).data("new") || "").data("new", newDetails );
updateCheckRunDetails(newDetails);
});

Issue with Data returning from AJAX call showing up in Bootstrap Multiselect dropdown

I am using Bootstrap Multiselect from http://davidstutz.github.io/bootstrap-multiselect/#getting-started
However, my dropdown is not showing my results...or even dropping down for that matter. Not sure if it makes any difference, but I am using this in a Modal and I am using this along side AngularJS.
This is all I should have to put on my HTML page (according to the website above):
<select id="primaryCategory-dropdown" multiple="multiple"></select>
I am making the following AJAX call to my service:
function loadPrimaryCategories() {
$.ajax({
url: '/Portal/api/PrimaryCategories/GetAll',
type: 'GET',
dataType: 'json',
success: function (data) {
$.each(data, function(i, primaryCategory) {
$("#primaryCategory-dropdown").append('<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>');
});
},
error: function(data) {
alert(data);
}
});
}
I am getting results back(I have 57 to be exact):
<option value="1">2004 Examination
<option value="2">341 Meeting
<option value="3">Abandonment
But the button does not open to show my results. It will enable and disable when I click on it. You can also see a scroll list box appear with all the values when I change the style='display: block'. It almost seems like it isn't binding properly.
I am following the same instructions as this example, but once I implement it into my solution it doesn't work: https://jsfiddle.net/3p3ymwwc/

I tried with $("#ddlState").multiselect('refresh');
but it didn't work for me.
But when I replaced 'refresh' with 'rebuild' it works:
$("#ddlState").multiselect('rebuild');

I found it!
I needed to add to my ajax call 'async: false'

try adding the refresh call inside the success method:
$.ajax({
url: '/Portal/api/PrimaryCategories/GetAll',
type: 'GET',
dataType: 'json',
success: function (data) {
$.each(data, function(i, primaryCategory) {
$("#primaryCategory-dropdown").append('<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>');
});
$("#primaryCategory-dropdown").multiselect('refresh');
},
error: function(data) {
alert(data);
}
});

You might be loading multiselect.js file before the option list updated with AJAX call so while execution of multiselect.js file there is empty option list is there to apply multiselect functionlaity.
So first update the option list by AJAX call then initiate the multiselect call you will get the dropdown list with the dynamic option list.
Hope this will help you out.
// Multiselect dropdown list related js & css files
[http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css][1]
[http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js][2]
// This function should be called while loading page
var loadParentTaskList = function(){
$.ajax({
url: yoururl,
method: 'POST',
success: function(data){
// To add options list coming from AJAX call multiselect
for (var field in data) {
$('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
}
// To initiate the multiselect call
$("#parent_task").multiselect({
includeSelectAllOption: true
})
}
});
}
// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>

Even if anyone is facing problem in populating the dropdown after ajax call using jquery-multiselect plugin..
Try using reload instead of "refresh" OR "rebuild"
$('#select-id').change(function(){
var selectedId = $('#select-id').val();
$.ajax({
url: 'url-to-action', //getDatafromYourMethod()
type: "post",
dataType: "json",
data: {
data: 'fetchData',
name: selectedId
},
crossDomain: true,
success: function(returnData) {
var options = '';
$.each(returnData, function(key, value){
options +='<option value='+key+'>'+value+'</option>';
})
$('#select-ids').html(options);
$('#select-ids').multiselect('reload');
}
});
});

idk why your code isn't being rendered properly, but do give this a try.
Instead of appending one by one , store that html data as a string in variable and then once you have finsihed iterating over all the items, append them at once. Try putting this in inside your success: function(data)
let htmldata=""
$.each(data, function(i, primaryCategory) {
htmldata+= '<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>';
});
$("#primaryCategory-dropdown").html(htmldata);
},

TRY THIS,100% YOU WILL GET EXPECTED OUTPUT
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="bootstrap-2.3.2.min.js" type="text/javascript"></script>
<script src="bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "multiselect.aspx/BindStates",
dataType: "json",
async: false,
success: function(data) {
var select = $("#ddlState");
select.children().remove();
if (data.d) {
$(data.d).each(function(key,value) {
$("#ddlState").append($("<option></option>").val(value.State_id).html(value.State_name));
});
}
$('#ddlState').multiselect({includeSelectAllOption: true});
$("#ddlState").multiselect('refresh');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});
</script>
<center>
<select id="ddlState" name="ddlState" multiple="multiple">
</select>
</center>
</div>
include this css in top