Develop Reference

How can I make a multi select dynamic dependent to another multiselect

Beginner here. How can I make a multi select dynamic dependent to another multiselect. The code below is for when a user select a single value and the values of the other select changes based on the value selected. What I want is when all values are selected the values will display all values of each.
$("#value").change(function () {
var user = $("#users_select").val();
$('#value').empty();
$('#value').append($("<option> </option>"));
for (i = 0; i < jsonResult.length - 1; i++) {
if (jsonResult[i]["value"] == user) {
$('#tasks_select').append($("<option value="+jsonResult[i]
["value"]+">" + jsonResult[i]["value"] + "</option>"));
}
}
});

try like this:
$.ajax({
url: base_url + 'url',
type: "GET",
data: {'id': id},
dataType: 'json',
success: function (data) {
var html = '';
$.each(data, function (key, value) {
html += '<option value="' + value.id + '">' + value.selectname + '</option>';
});
$('#id' + count).html(html).select2();
},
error: function () {
}
});

How do i pass array values obtained from multiselection in dropdown as filter in url of ajax call

I have a project dropdown.A user can multiselect projects.
I want to pass the values selected from multiselection in dropdown as filter parameters in ajax url.
The code is as follows:
function CheckIfPresent(callback)
{
var proj = [];
var urlprograms;
if ($("#projNameDropdown :selected").text() != 'Select all projects') {
$('#projNameDropdown :selected').each(function (i, sel) {
proj[i++] = $(sel).val();
if (proj.length == 1)
urlprograms = "(Project_Name/Project_Name eq '" + proj[0] + "')";
});
if (proj.length > 1) {
for (i = 1; i < proj.length; i++) {
urlprograms += " or (Project_Name/Project_Name eq '" + proj[i] + "')";
}
}
}
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists('')/items?$select=*,Project_Name/Project_Name&$expand=Project_Name&$filter=" + urlprograms + "'",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function (dataActive) {
}
error: function (dataActive) {
console.log(dataActive);
}
});
}
I am not able to reach the success method and get error.What is that I am doing wrong?

Generic jquery function for cascading dropdownlists (asp.net mvc)

I'm working on a medical appointment system and I'm using a jquery function to filter the items in my cascading dropdownlists. Is there a way of writing a 'generic' to handle all the dropdownlists instead of writing the same thing several times?
$(document).ready(function () {
$('#ddlIl').change(function () {
$.ajax({
type: "post",
url: "/Users/GetIlce",
data: { Id: $('#ddlIl').val() },
datatype: "json",
traditional: true,
success: function (data) {
var ilce = "<select id='ddlIlce'>";
ilce = ilce + '<option value="">--Seçin--</option>';
for (var i = 0; i < data.length; i++) {
ilce = ilce + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
ilce = ilce + '</select>';
$('#ddlIlce').html(ilce);
}
});
});
});
I have the following dropdownlists: State, City, Department, Hospital, and Doctor

If you want to wrap the AJAX call in a function to serve all dropdownlists in view, probably this code below apply for them:
/*
* #param url = URL to fetch data (i.e. controller action method
* returning IEnumerable<SelectListItem> or SelectList)
* #param source = source dropdownlist name
* #param target = target dropdownlist name
*/
function cascadeDropDownList(url, source, target) {
$.ajax({
type: 'POST',
url: url,
data: { Id: $('#' + source).val() },
dataType: 'json',
traditional: true,
success: function (data) {
// remove previous option contents first
$('#' + target + ' option').each(function() {
$(this).remove();
});
// add new option contents
var options = '<option value="">--Seçin--</option>';
for (var i = 0; i < data.length; i++) {
options += '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
$('#' + target).html(options);
}
});
}
Usage in change event:
$(document).ready(function () {
$('#ddlIl').change(function () {
var url = '/Users/GetIlce'; // recommended: '#Url.Action("GetIlce", "Users")'
var source = $(this).attr('id');
cascadeDropDownList(url, source, 'ddlIlce');
});
});
NB: The function above assumes target dropdownlist has already created in view page and you just want to insert option element values without recreating select element. If you want to create new target dropdownlist instead, modify the function like below:
/*
* #param url = URL to fetch data (i.e. controller action method
* returning IEnumerable<SelectListItem> or SelectList)
* #param source = source dropdownlist name
* #param target = target element (e.g. div)
* #param ddlName = target dropdownlist name
*/
function cascadeDropDownList(url, source, target, ddlName) {
$.ajax({
type: 'POST',
url: url,
data: { Id: $('#' + source).val() },
dataType: 'json',
traditional: true,
success: function (data) {
var ddl = "<select id='" + ddlName + "'>";
ddl += '<option value="">--Seçin--</option>';
for (var i = 0; i < data.length; i++) {
ddl += '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
}
ddl += '</select>';
$('#' + target).html(ddl);
}
});
}
Usage:
$(document).ready(function () {
$('#ddlIl').change(function () {
var url = '/Users/GetIlce'; // recommended: '#Url.Action("GetIlce", "Users")'
var source = $(this).attr('id');
var target = $('#targetdiv').attr('id');
cascadeDropDownList(url, source, target, 'ddlIlce');
});
});
Working example: .NET Fiddle

change drop down list values when checkbox is checked in jquery asp.net mvc

this is my code to change the drop down list values when the checkbox is checked. I use asp.net mvc framework and java script to call the action. The list of the drop-down should show only the expired medicines when the checkbox is checked. But, it results in (Error: [object:object]). It didn't hit the controller action 'getmedicine'. Can anyone help me?
function GetMedicineList(_isExp) {
var url = "getmedicine";
$.ajax({
url: url,
data: { IsExp: _isExp },
cache: false,
type: "GET",
dataType: "json",
success: function (data) {
var markup = "<option value='0'>Please Select Expired Medicine</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
}
$("#clientId").html(markup).show();
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
and in the view,
#Html.CheckBoxFor(m => m.IsExp, new { Id = "isExp", #onchange = "GetMedicineList(this.value);" })

I solved the problem. One error is the action that I use to trigger is not an action result. It is a list. I changed it. I also I have did some changes in js. It works properly now.
var GetMedicine= function () {
var url = UrlMedicine.GetMedicineChecked;
var isExp = $('#isExp').val();
var url = url + '?isExp=' + isExp;
$.get(url, null, function (data) {
{
var markup = "<option value='0'>Please Select Expird medicine</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
}
$("#medicineId").html(markup).show();
}
});
}
var GetMedicineList = function () {
if ($('#isExp').is(":checked")) {
userMedicineHistory.GetMedicine();
}
}
return {
GetMedicineList: GetMedicineList,
GetMedicine: GetMedicine
};
$(document).ready(function () {
$("#isExp").change(userMedicineHistory.GetMedicineList)
});

Incrementally load a webpage: Where can I put: $("#LoadingImage").Hide();

I am not very experienced with JavaScript. Please see the code below:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
function GetSQLTable() {
//alert($("#<%=fieldGroupReferences.ClientID%>")[0].value)
var str = $("#<%=fieldGroupReferences.ClientID%>")[0].value
var res = str.split(",");
for (var i = 0; i < res.length; i++) {
$("#LoadingImage").show();
var div = document.createElement('div');
div.id = "div" + i
document.body.appendChild(div);
//alert(res[i]);
$.ajax({
type: "POST",
url: "Default3.aspx/GetSQLTable",
data: '{username: "' + $("#<%=fieldUserName.ClientID%>")[0].value + '", terminalname: "' + $("#<%=fieldTerminalName.ClientID%>")[0].value + '", terminalip: "' + $("#<%=fieldTerminalIP.ClientID%>")[0].value + '", mappingid: "' + res[i] + '", usergroup: "' + $("#<%=fieldUserGroup.ClientID%>")[0].value + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess(i,res.length),
failure: function (response) {
//alert(response.d);
alert('there was an error loading the webpage')
}
});
}
function OnSuccess(i,totalrows) {
return function (response) {
if (response.d != "") {
document.getElementById('div' + i).innerHTML = document.getElementById('div' + i).innerHTML + '<br>' + '<br>' + response.d;
}
}
}
}
window.onload = GetSQLTable
</script>
The code incrementally builds a webpage i.e. x number of HTML tables are obtained and displayed to the webpage as and when they become ready. This works.
The problem is I don't know how to remove the LoadingImage once the webpage is complete i.e. $("#LoadingImage").hide();. OnSuccess is called x number of times depending on how many tables are returned so I cannot put it in there.

One way would be to count the number of successful onSuccess() calls, and hide your loading image when they are all complete:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">
function GetSQLTable() {
//alert($("#<%=fieldGroupReferences.ClientID%>")[0].value)
var str = $("#<%=fieldGroupReferences.ClientID%>")[0].value
var res = str.split(",");
var numSucceeded = 0;
for (var i = 0; i < res.length; i++) {
$("#LoadingImage").show();
var div = document.createElement('div');
div.id = "div" + i
document.body.appendChild(div);
//alert(res[i]);
$.ajax({
type: "POST",
url: "Default3.aspx/GetSQLTable",
data: '{username: "' + $("#<%=fieldUserName.ClientID%>")[0].value + '", terminalname: "' + $("#<%=fieldTerminalName.ClientID%>")[0].value + '", terminalip: "' + $("#<%=fieldTerminalIP.ClientID%>")[0].value + '", mappingid: "' + res[i] + '", usergroup: "' + $("#<%=fieldUserGroup.ClientID%>")[0].value + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess(i,res.length),
failure: function (response) {
//alert(response.d);
alert('there was an error loading the webpage')
}
});
}
function OnSuccess(i,totalrows) {
return function (response) {
if (response.d != "") {
document.getElementById('div' + i).innerHTML = document.getElementById('div' + i).innerHTML + '<br>' + '<br>' + response.d;
numSucceeded++;
if (numSucceeded === totalrows) {
$("#LoadingImage").hide();
}
}
}
}
}
window.onload = GetSQLTable
</script>

Try using .when with an array of your ajax calls. Something like this (simplified to remove the irrelevant bits):
function GetSQLTable() {
//...
var calls = [];
for (var i = 0; i < res.length; i++) {
//..
calls.push($.ajax({
type: "POST",
//..
}));
}
$.when(calls).then(function(d) {
// all done!!!
});