Develop Reference

Dropdown list return always default value 0

I have problem. When i didn't search something in dropdown It has got default selected value=0. And its saving my database. If it can send value"NULL" not will save in my database. How can i send default value "NULL"?
<div class="form-group">
<label class="control-label col-md-2"></label>
<div class="col-md-8">
#*#Html.DropDownList("CustomerID", null, new { #class = "form-control", required = "required", placeholder = "Müşteri Seçiniz" })*#
#Html.DropDownList("CustomerID", Enumerable.Empty<SelectListItem>(), "", new { #multiple = "multiple", #id = "CustomerID", #class = "form-control" })
#Html.ValidationMessageFor(model => model.CustomerID, "", new { #class = "text-danger", style="color:red"})
<p style="color:red;margin-bottom:-3px" id="errorpersonel"></p>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
debugger;
$("#CustomerID").pqSelect({
singlePlaceholder: '', width: '92%'
});
$.ajax({
url: "/TicketDashboard/GetCustomer",
method: "Post",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#CustomerID").empty();
$.each(data, function (index, value) {
debugger;
$('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.CustomerName + '</option>');
});
$("#CustomerID").pqSelect("refreshData");
$('span[data-valmsg-for="OpportunityAttachmentViewModel.CCMail"]').html('Boş geçilemez.');
}
});
});
$("#CustomerID").pqSelect({
singlePlaceholder: '',
multiplePlaceholder: 'Müşteri Seçiniz',
maxSelect: 1,
}).on("change", function (evt) {
pccmail = $(this).val();
if (pccmail != "") {
$('span[data-valmsg-for="OpportunityAttachmentViewModel.CCMail"]').html('');
} else {
$('span[data-valmsg-for="OpportunityAttachmentViewModel.CCMail"]').html('Boş geçilemez');
}
$('[id^=CCMailinput]').val(pccmail);
});
Its my codes. How can i change selected value "0"? It should be "NULL" when i sent form

You can choose a null value as below if the selected value is 0.
pccmail = $(this).val()=="0"?null:(this).val();
<div class="form-group">
<label class="control-label col-md-2"></label>
<div class="col-md-8">
#*#Html.DropDownList("CustomerID", null, new { #class = "form-control", required = "required", placeholder = "Müşteri Seçiniz" })*#
#Html.DropDownList("CustomerID", Enumerable.Empty<SelectListItem>(), "", new { #multiple = "multiple", #id = "CustomerID", #class = "form-control" })
#Html.ValidationMessageFor(model => model.CustomerID, "", new { #class = "text-danger", style="color:red"})
<p style="color:red;margin-bottom:-3px" id="errorpersonel"></p>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
debugger;
$("#CustomerID").pqSelect({
singlePlaceholder: '', width: '92%'
});
$.ajax({
url: "/TicketDashboard/GetCustomer",
method: "Post",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#CustomerID").empty();
$.each(data, function (index, value) {
debugger;
$('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.CustomerName + '</option>');
});
$("#CustomerID").pqSelect("refreshData");
$('span[data-valmsg-for="OpportunityAttachmentViewModel.CCMail"]').html('Boş geçilemez.');
}
});
});
$("#CustomerID").pqSelect({
singlePlaceholder: '',
multiplePlaceholder: 'Müşteri Seçiniz',
maxSelect: 1,
}).on("change", function (evt) {
pccmail = $(this).val()=="0"?null:(this).val();
if (pccmail != "") {
$('span[data-valmsg-for="OpportunityAttachmentViewModel.CCMail"]').html('');
} else {
$('span[data-valmsg-for="OpportunityAttachmentViewModel.CCMail"]').html('Boş geçilemez');
}
$('[id^=CCMailinput]').val(pccmail);
});

change event not perform on datepicker through jquery

I want to pass a selected date to controller for performing operation on database.
But my jquery is not functioning properly..
Can anyone help me solve the issue?
here is my View code :
<div class="form-group">
#Html.EditorFor(model => model.DT, new { htmlAttributes = new { #class = "form-control datepicker", placeholder = "PRC Date", Value = DateTime.Now.ToShortDateString() } })
#Html.ValidationMessageFor(model => model.DT, "", new { #class = "text-danger" })
</div>
here is my jQuery Code..
$("#DT").on("change", function () {
debugger
var selectedValue = $(this).val();
alert(selectedValue);
$.ajax({
type: "POST",
url: '#Url.Action("DateWiseData", "ProcessWax")',
contentType: "application/json; charset=utf-8",
data: selectedValue,
dataType: "json",
success: function (data) {
if (data.status == true) {
alert('Successfully done.');
}
else {
alert('Failed');
}
},
//error: function () { alert('Error. Please try again.'); }
});
});

HTML:
<div class="form-group">
#Html.TextBoxFor(model => model.DT, new { htmlAttributes = new { #class = "form-control datepicker", placeholder = "PRC Date", Value = DateTime.Now.ToShortDateString() } })
</div>
jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
alert();
$("#DT").on("change", function () {
var selectedValue = $(this).val();
alert(selectedValue);
$.ajax({
type: "POST",
url: "/ProcessWax/DateWiseData?Date=" + selectedValue ,
contentType: "application/json; charset=utf-8",
data: selectedValue,
dataType: "json",
success: function (data) {
if (data.status == true) {
alert('Successfully done.');
}
else {
alert('Failed');
}
},
//error: function () { alert('Error. Please try again.'); }
});
});
</script>
Controller:
[HttpPost]
public ActionResult DateWiseData(DateTime Date)
{
}

If you want that select a date from Jquery datepicker and send it to your controller you can simply bind your datepicker to your controller.
HTML :
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div class="form-group">
#Html.EditorFor(model => model.DT, new { htmlAttributes = new { #class = "form-control datepicker", placeholder = "PRC Date", Value = DateTime.Now.ToShortDateString() } })
#Html.ValidationMessageFor(model => model.DT, "", new { #class = "text-danger" })
</div>
<button type="submit"></button>
}
Controller :
[HttpPost]
public ActionResult Index(YourModel t)
{
var date = t.DT;
//Do whatever you want (ex. save in database)
return View();
}
UPDATE:
Please Try this code:
$( function() {
$( "#DT" ).datepicker()
.on("change", function () {
var selectedValue = $(this).val();
alert(selectedValue);
$.ajax({
type: "POST",
url: '#Url.Action("DateWiseData", "ProcessWax")',
contentType: "application/json; charset=utf-8",
data: selectedValue,
dataType: "json",
success: function (data) {
if (data.status == true) {
alert('Successfully done.');
}
else {
alert('Failed');
}
}
});
});
} );
As you can see in the code you forgot to put .datepicker() after $("#DT") .

Need Help while Populating the DropDownList via Java Script from MVC. List not populating

I am facing the problem when I am populating the DropDownList by JavaScript via MVC. I am getting the Uncaught TypeError: Cannot read property 'length' of undefined while populating the DDL.
My Code as define below
View:-
<div class="form-group">
<label>SubRetailer</label>
#Html.DropDownListFor(m => m.SubRetailer, Model.SubRetailerList, "All Selected", new { #class = "form-control", id = "SubParentRetailerDDL" })
</div>
Controller : -
public ActionResult getSubRetailer(int ParentRetailerID)
{
List<DashboardGetSubRetailer_Result> lstDesig = db.DashboardGetSubRetailer(ParentRetailerID).ToList();
return Content(JsonConvert.SerializeObject(lstDesig), "application/json");
}
JavaScripts function:-
function GetNames(ParentRetailerID) {
if (ParentRetailerID > 0) {
$("#SubParentRetailerDDL").get(0).options.length = 0;
$("#SubParentRetailerDDL").get(0).options[0] = new Option("Loading SubRetailer", "-1");
alert("ParentRetailerID : "+ ParentRetailerID);
$.ajax({
type: "POST",
url: "Search/getSubRetailer",
data: "{ParentRetailerID:" + ParentRetailerID + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("success : " + ParentRetailerID);
$("#SubParentRetailerDDL").get(0).options.length = 0;
$("#SubParentRetailerDDL").get(0).options[0] = new Option("Select SubRetailerName", "-1");
**$.each(msg.d, function (index, item) {
$("#SubParentRetailerDDL").get(0).options[$("#SubParentRetailerDDL").get(0).options.length] = new Option(item.SubRetailerName, item.SubRetailerID);
});
},**
error: function () {
alert("error : " + ParentRetailerID);
$("#SubParentRetailerDDL").get(0).options.length = 0;
alert("Failed to load SubRetailer");
}
});
}
else {
$("#SubParentRetailerDDL").get(0).options.length = 0;
}
}
I am facing the error at below step in java script. I am getting the data from Controller but not populating in DDL.
$.each(msg.d, function (index, item) {
$("#SubParentRetailerDDL").get(0).options[$("#SubParentRetailerDDL").get(0).options.length] = new Option(item.SubRetailerName, item.SubRetailerID);
});

I do not know what you are trying to do with that line. But if you are trying to replace the options of your second dropdown with the data coming from the server, you can simply do this.
$("#SubParentRetailerDDL").html(""); //Clear existing items
//loop through the items came back and append to dropdown
$.each(msg, function (index, item) {
$("#SubParentRetailerDDL")
.append("<option value='"+item.SubRetailerID+"'>"+item.SubRetailerName+"</option>");
});
Also there is no reason for you to explicitly Serialize the data to json format because there is already a Json method which does that for you.
public ActionResult getSubRetailer(int ParentRetailerID)
{
var data = db.DashboardGetSubRetailer(ParentRetailerID).ToList();
return Json(data , JsonRequestBehavior.AllowGet);
}
This code will work assuming your DashboardGetSubRetailer method returns a collection of items each with a SubRetailerID and a SubRetailerName property. If you have a single property called d which the collection, just udpate the $.each(msg with $.each(msg.d

Its working now as below
Changes in View--
<div class="form-group">
<label>Retailer</label>
#Html.DropDownListFor(m => m.Retailer, new SelectList(Model.lstParentRetailsDetails, "ParentRetailerID", "ParentRetailerName"), "All Selected", new { id = "ParentRetailerDDL", #class = "form-control" })
</div>
<div class="form-group">
<label>SubRetailer</label>
#Html.DropDownListFor(m => m.SubRetailer, new SelectList(Enumerable.Empty<SelectListItem>(), "SubRetailerID", "SubRetailerName"), "All Selected", new { #class = "form-control", id = "SubParentRetailerDDL" })
</div>
-- Inside Java Scripts
$().ready(function (msg) {
$("#ParentRetailerDDL").bind("change", function () {
GetNames($(this).val());
});
});
function GetNames(ParentRetailerID) {
if (ParentRetailerID > 0) {
$("#SubParentRetailerDDL").empty();
$.ajax({
type: "POST",
url: "Search/getSubRetailer",
data: "{ParentRetailerID:" + ParentRetailerID + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$.each(msg, function (index, item) {
$("#SubParentRetailerDDL").append("<option value='" + item.SubRetailerID + "'>" + item.SubRetailerName + "</option>");
});
},
error: function () {
$("#SubParentRetailerDDL").get(0).options.length = 0;
alert("Failed to load SubRetailer");
}
});
}
else {
$("#SubParentRetailerDDL").get(0).options.length = 0;
}
}

Want to prevent selecting specific item in jQuery UI AutoComplete

I am developing textbox with autocomplete using jQuery UI Autocomplete.
After that, I can create textbox with autocomplete, but one issuce has occured now.
In my textbox, I want to prevent selecting specific item from autocomplete list.
If I select specific item, Autocomplete list display again or not to close.
$(function (prefixText) {
$("textBox").autocomplete({
autoFocus: false,
minLength: 0,
delay: 50,
source: function (request, response) {
var data = "{ 'prefixText': '" + prefixText
+ "','count': '" + 30
+ "','pixWidth': '" + 100 + "' }";
$.ajax({
type: "POST",
url: "Example.asmx/" + method,
cache: false,
data: data,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.name,
id: item.id,
name: item.name
}
}))
}
});
},
select: function (event, ui) {
var id = ui.item.id
//not match guid type
if (id.match(/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}/) === null) {
if ($("text_id") !== null) {
$("text_id").val(-1);
}
return false
}
else {
if ($("text_id") !== null) {
$("text_id").val(ui.item.id);
}
$("textBox").val(ui.item.name);
}
}
});
});
});
If someone know answer, please teach me.

Based on the example from here: How to disable element in jQuery autocomplete list
I think this code will work for you:
$(function (prefixText) {
$("textBox").autocomplete({
autoFocus: false,
minLength: 0,
delay: 50,
source: function (request, response) {
var data = "{ 'prefixText': '" + prefixText
+ "','count': '" + 30
+ "','pixWidth': '" + 100 + "' }";
$.ajax({
type: "POST",
url: "Example.asmx/" + method,
cache: false,
data: data,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.name,
id: item.id,
name: item.name
}
}))
}
});
},
select: function (event, ui) {
var id = ui.item.id
//not match guid type
if (id.match(/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}/) === null) {
if ($("text_id") !== null) {
$("text_id").val(-1);
}
return false
}
else {
if ($("text_id") !== null) {
$("text_id").val(ui.item.id);
}
$("textBox").val(ui.item.name);
}
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
//Add the .ui-state-disabled class and don't wrap in <a> if value is empty
var id = item.id
if (id.match(/[0-9a-z]{8}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{4}-[0-9a-z]{12}/) === null) {
return $('<li class="ui-state-disabled">'+item.label+'</li>').appendTo(ul);
} else{
return $("<li>")
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
};
});
If you can provide a working version of your code (the items can also be from a predefined list, not based on ajax call) it will be much easier to help.

Jquery not working in modal popup ASP.NET MVC

I have a modal popup that I want to use some cascading drop down lists in.
The drop downs work fine when I render the page as a regular view but when I render it as a partial in a modal popup I lose the functionality.
The script doesn't seem to run at all now.
Here is the code that should run when a drop down value is selected:
$("#artistSelect").change(function () {
if ($(this).val() != "") {
$("#pieceSelect").empty();
$("#productSelect").empty();
$.ajax({
type: 'POST',
url: '#Url.Action("GetMasterImages")',
dataType: 'json',
data: {
artistId: $(this).val()
},
success: function (masterImages) {
$(masterImages).each(function (i, masterImage) {
$("#pieceSelect").append('<option value="' + masterImage.Value + '">' + masterImage.Text + '</option');
});
$("#productSelect").append('<option value="">-- Select Piece --</option>');
},
error: function (ex) {
alert('failed to get piece list.' + ex);
}
});
} else {
$("#pieceSelect").empty();
$("#productSelect").empty();
$("#productSelect").append('<option value="">-- Select Artist --</option>');
$("#pieceSelect").append('<option value="">-- Select Artist --</option>');
}
return false;
});
$("#pieceSelect").change(function () {
if ($(this).val() != "") {
$("#productSelect").empty();
$.ajax({
type: 'POST',
url: '#Url.Action("GetProducts")',
dataType: 'json',
data: {
imageMasterId: $(this).val()
},
success: function (products) {
$(products).each(function (i, product) {
$("#productSelect").append('<option value="' + product.Value + '">' + product.Text + '</option');
});
},
error: function (ex) {
alert('failed to get product list.' + ex);
}
});
} else {
$("#productSelect").empty();
$("#productSelect").append('<option value="">-- Select Piece --</option>');
}
return false;
});
The scripts are located in my main scripts file.
and my now partial view:
<div class="form-group">
<div class="row">
<div class="col-md-3">
#Html.DropDownList("Artist", Model.Dropdowns.ArtistItems, new { #id = "artistSelect", #class = "form-control" })
</div>
<div class="col-md-3">
#Html.DropDownList("Piece", new List<SelectListItem> { new SelectListItem { Text = "-- Select Artist --", Value = "" } }, new { #id = "pieceSelect", #class = "form-control" })
</div>
<div class="col-md-3">
#Html.DropDownListFor(m => m.CustomerItem.ItemID, new List<SelectListItem> { new SelectListItem { Text = "-- Select Artist --", Value = "" } }, new { #id = "productSelect", #class = "form-control" })
</div>
</div>
Why do my cascading drop downs no longer work?