$.ajax({
url: $(waterIndexModel.addWaterChargesURL).val(),
success: function (data) {
$(waterIndexModel.addWaterChargePlaceHolder).html('');
$(waterIndexModel.addWaterChargePlaceHolder).html(data);
$(waterIndexModel.addWaterChargeModal).modal('show');
$(waterIndexModel.saveWaterChargesBtn).on('click', function () { waterIndexModel.saveWaterCharge() })
$("#ChargeDate").datepicker({
onSelect: function () {
$(this).trigger("focus").trigger("blur");
}
});
waterIndexModel.EnableValidators(waterIndexModel.addWaterChargeForm);
},
error: function (error) {
alert(error.responseText);
}
});
why won't my onSelect event on the datepicker fire? If I am not mistken this should fire when I select a date. As you can see I have simplified it to be as simple as it can be
Related
How can I make the code below an on change actionlink? So when I check the checkbox it will trigger an actionlink!
#Html.CheckBoxFor(c => OutOfBank.Available)
You can send an Ajax request when Checkbox changed, which triggers the action each time you check or uncheck the checkbox.
#Html.CheckBoxFor(c => OutOfBank.Available)
<script>
$(function () {
$('#Available').change(function () {
$.ajax({
url: '/example/#OutOfBank.Available',
cache: false,
method: 'GET',
success: function (data) { alert('success'); },
error: function () { alert('error'); }
});
});
});
</script>
I am using autocomplete of jQuery, everything is working fine but select and change event is not working. Please help me out of it.
$("#id").autocomplete({
source: function (request, response) {
$.ajax({
type: "GET",
contentType: "text/html; charset=utf-8",
url: sUrl + "&id="+$.trim(request.term),
dataType: "xml",
success: function (data) {
//success code
},
select: function (event, ui) {
alert("dfd"); //This is not getting executed
},
change: function (event, ui) {
alert("chnge"); //This is not getting executed
},
error: function (result) {
alert(result.responseText);
}
});
}
});
I try to store an identifier into an hiddenfield when a value is selected with a jquery autocomplete field.
But the select event is never fired and I dont't see why..
here is my code
$(document).ready(function () {
$('#test').autocomplete(
{
source: function (request, response) {
$.ajax({
url: "/Controller/Method", type: "POST", dataType: "json",
data: { Comparaison: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.text, value: item.text, id : item.value };
}));
},
select: function (event, ui) {
alert("selected");
//$("#idProprio").val(ui.item.id);
}
});
},
});
});
The autocompletion is properly working, I can see the values, select one but when I select a value nothig happens..
I believe your curly braces are wrong. select is being set as part of the ajax parameter, not autocomplete:
$(document).ready(function () {
$('#test').autocomplete(
{
source: function (request, response) {
$.ajax({
url: "/Controller/Method", type: "POST", dataType: "json",
data: { Comparaison: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.text, value: item.text, id : item.value };
}));
}
});
},
select: function (event, ui) {
alert("selected");
//$("#idProprio").val(ui.item.id);
}
});
});
I have links like following.
Deneme Müşteri 2
Deneme Müşteri 2
I want to use jquery ajax post like this:
$(".customer_details").click(function () {
$.ajax({
url: $(this).attr("href"),
type: 'POST',
beforeSend: function () {
},
complete: function () {
},
success: function (result) {
$("#customer_operations_container").html(result);
},
error: function (result) {
alert("Hata!");
}
}); //end ajax
});
Or this:
$(".customer_details").click(function () {
$("#customer_operations_container").load($(this).attr("href"));
});
And Action Method
public ActionResult _EditCustomer(int CustomerId)
{
// get customer from db by customer id.
return PartialView(customer);
}
But I cant do what I wanted. When I click to link, PartialView does not load. It is opening as a new page without its parent. I tried prevent.Default but result is the same.
How can I load the partialView to into a div?
Note: If I use link like this <a href="#"> it works.
Thanks.
Maybe the problem is with the actionresult, try with Content to see if that changes anything.
public ActionResult _EditCustomer(int CustomerId)
{
// get customer from db by customer id.
return Content(customer.ToString());
}
Try one of these...
$(".customer_details").click(function (e) {
e.preventDefault()
$.ajax({
url: $(this).attr("href"),
//I think you want a GET here? Right?
type: 'GET',
beforeSend: function () {
},
complete: function () {
},
success: function (result) {
$("#customer_operations_container").html(result);
},
error: function (result) {
alert("Hata!");
}
}); //end ajax
});
Or
$(".customer_details").click(function (e) {
e.preventDefault();
$("#customer_operations_container").load($(this).attr("href"));
});
Or
$(".customer_details").click(function (e) {
e.preventDefault();
$.get($(this).attr("href"), function(data) {
$("#customer_operations_container").html(data);
});
});
If none of this works, check if there's any js errors
The problem is when you click on the link you already start navigation to it. So just use e.preventDefault() or return false from the click method to prevent the default behavior
$(".customer_details").click(function (e) {
e.preventDefault();
...
}
This should help you out:
$.ajax({
url: $(this).attr("href"),
type: 'POST',
beforeSend: function () {
},
complete: function () {
},
success: function (result) {
$("#customer_operations_container").html(result);
},
error: function (result) {
alert("Hata!");
}
}); //end ajax
return false;
The only thing you where missing is the prevention of A tag working. By returning false your custom event is called and the default event is not executed.
Try this
$(function(){
$(".customer_details").click(function (e) {
e.preventDefault();
});
});
Using ready event
Demo: http://jsfiddle.net/hdqDZ/
I do ajax post on my mvc app when dropdown change.
$(function () {
$('#meters').change(function () {
var analizor_id = $(this).val();
if (analizor_id && analizor_id != '') {
$.ajax({
url: '#Url.Action("AnalizorInfoPartial", "Enerji")',
type: 'GET',
cache: false,
data: { analizor_id: analizor_id },
success: function (result) {
$('#TableAnalizorInfo').html(result);
}
});
}
});
});
DropDown
#Html.DropDownList("sno", new SelectList(Model, "sno", "AnalizorAdi"), "-- Analizör Seçiniz --", new { id = "meters" })
Can I show a loading image or anything else during ajax process? (between begin - finish event) and Code example?
EDIT
Can I use like this?
success: function (result) {
$('#TableAnalizorInfo').html(result);
}
begin:function(){
//show image
}
complete:function(){
//hide image
}
Thanks.
Of course, the events you are looking for are beforeSend and complete:
if (analizor_id && analizor_id != '') {
$.ajax({
url: '#Url.Action("AnalizorInfoPartial", "Enerji")',
type: 'GET',
cache: false,
beforeSend: function() {
// Show your spinner
},
complete: function() {
// Hide your spinner
},
data: { analizor_id: analizor_id },
success: function (result) {
$('#TableAnalizorInfo').html(result);
}
});
}
or you could do it globally for all AJAX requests on the page using global AJAX event handlers:
$(document).ajaxSend(function() {
// Show your spinner
}).ajaxComplete(function() {
// Hide your spinner
});