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

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 () {
}
});

Related

How to bind dropdownlist using ajax get

I want to know how to bind dropdownlist using ajax get. This is the code, What is wrong?
$("#dropdown").on("click",
function ()
{
$.ajax(
{
url: '#Url.Action("List", "Employee")',
type: "POST",
data: $("#dropdown").serialize(),
success: function (data) {
var org = '<option>Select Organisation </option>';
for (var i = 0; i < data.length; i++) {
org += '<option value="' + data[i].organisationid + '">' +
data[i].organisationname + '</option>';
}
$("#dropdown").html(org);
}
});

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)
});

CSS class in jquery

I want to apply a CSS class to a gridview. I tried to apply this style
reference link, so I try this
$(function () {
$('[ID*=search_data]').on('click', function () {
var fromdate = $('[ID*=fromdate]').val();
var todate = $('[ID*=todate]').val();
var regiondrop = $('[ID*=regiondrop] option:selected')[0].value;
var tabledata= $('[ID*=tabledata]');
var obj = {};
obj.fromdate = fromdate;
obj.todate = todate;
obj.regiondrop = regiondrop;
Getdataa(obj);
return false;
});
});
function Getdataa(obj) {
//alert('1');
$.ajax({
type: "POST",
url: "WebForm1.aspx/search_data",
data: "{'fromdate':'" + obj.fromdate + "','todate':'" + obj.todate + "','regiondrop':'" + obj.regiondrop + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
var final = JSON.parse(result.d).response;
console.log(JSON.parse(result.d).response)
$("#tabledata").empty();
if (final.length > 0) {
$("#tabledata").append(
"<tr ><th>ID</th><th>OwnerName</th></tr>");
for (var i = 0; i < final.length; i++) {
if (final[i] !== null) {
$("#tabledata").append("<tr><td>" +
final[i][0] + "</td> <td>" +
final[i][1] + "</td> <td>" +
}
}
}
else {
$("#tabledata").hide();
$("#Label4").text("No Data");
}
},
error: function (error) {
alert("error");
}
});
}
UPDATE
ok i update these lines in jquyer after $("#tabledata").empty();
$("th").addClass("GridviewScrollHeader");
$("td").addClass("GridviewScrollItem");
but when i build then there is no effect in grid view
And gridview in html
<table id="tabledata">
</table>
When i apply this then gridview is display with simple where as i want to apply this css in gridview when i apply this then gridview display without formatting..
what i try
what i want
So how i apply css ??
any solution?
ok i use this and this work for me
$("#tabledata tr:first").addClass('GridviewScrollHeader');
$("#tabledata tr").addClass('GridviewScrollItem');

Categories

Resources