I used firebug in Mozilla code below and it simply does not run. Any suggestions?
$.ajaxSetup({ cache: false }); //only executes this line, then exit
$.ajax({
url : "/Home/LoadMap",
dataType: "json",
type:"post",
success: function (data) {
$.each(data, function (i, item) {
.........
});
$.ajaxSetup({ cache: true });
}
});
Related
I'm using jquery ui autocomplete.
My problem is when I use a call to a external json, the suggest function stops working.
$(document).ready(function() {
$('.comu').autocomplete({
source: function(request, response) {
$.ajax({
url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json",
dataType: "json",
success: response
});
},
minLength: 0,
autoFocus: true,
select: function(event, ui) {
event.preventDefault();
$(".comu").val(ui.item.label);
},
});
});
Example of my code: codepen
Thanks in advance!
I suspect you could have found someone that answered this already. But here is a solution for you.
$(document).ready(function() {
$('.comu').autocomplete({
source: function(request, response) {
$.ajax({
url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json",
dataType: "json",
success: function(jData) {
var results = [];
$.each(jData, function(ind, val) {
if (val.label.toLowerCase().indexOf(request.term) === 0) {
results.push(val);
}
});
response(results);
}
});
},
minLength: 0,
autoFocus: true,
select: function(event, ui) {
event.preventDefault();
$(".comu").val(ui.item.label);
},
});
});
Working Example: https://jsfiddle.net/Twisty/mL3h8pm0/
The AJAX request will just return all the results, and that is what you are passing to your response. So if you do not filter that down before you pass it to response you will always end up with a complete list.
This filters the list using indexOf() but you can use any method you'd like.
Here is another solution that will cut down on your HTTP overhead:
var m = [];
$(document).ready(function() {
$.getJSON("https://raw.githubusercontent.com/edusl/test/master/municipios1.json", function(result) {
$.each(result, function(ind, val) {
m.push(val);
});
});
$('.comu').autocomplete({
source: m,
minLength: 0,
autoFocus: true,
select: function(event, ui) {
event.preventDefault();
$(".comu").val(ui.item.label);
},
});
});
Working Example: https://jsfiddle.net/Twisty/mL3h8pm0/2/
This gets all the data once and populates an array. Autocomplete can then use this like normal.
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 have following code.I show user a fancybox and they click Submit on Form I close fancybox and show them processing on page and do an AJAX post using JQuery. But some how fancybox gets stays open until AJAX form post is completed.Which creates confusion for user .
function BeginProcess(){
$.fancybox.close();
$("#imgProcess").attr("src", "/admin/images/loading_animation.gif");
$('#imgProcess').show();
PostAJAXForm();
}
function PostForm(FormData){
$.ajax({
type: "POST",
url: "process_image.jsp",
data: FormData,
contentType: "application/x-www-form-urlencoded",
async: false,
success: function(response) {
response = $.trim(response);
$('#imgProcess').delay(10000).hide();
return response;
},
error: function(xhr, ajaxOptions, thrownError) {
alert("There was an error. Please undo image and perform action again. " );
$('#lblProcess').delay(5000).hide();
return;
}
});
}
Here's a snippet:
var params = $(this).serialize();
var self = this;
$.ajax({
type: 'POST',
url: self.action,
data: params,
beforeSend: function(){
alert('Closing');
$.fancybox.close();
},
success: function(data){
alert('Finished processing form');
return false;
},
dataType: 'json'
});
Sorry if something is messed up or left out from that snippet - but you should get the idea.
You need to add $.fancybox.close() in Jquery' Ajax's beforeSend function.
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/ajaxSend/
This should help you out too
http://snipplr.com/view/47979/close-a-fancybox-when-you-submit-a-form-with-ajax