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);
}
});
}
});
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 this functionality to fill the JQuery UI with minimum length set to 2. This code works good when I try to select the list through mouse or through keyboard.
But once I publish my code through my virtual machine it does not work. Neither the minimum length works nor the mouse or keyboard selection works.
Please help me here.
function SPAutoComplete(request, response) {
//debugger;
$.ajax({
url: 'Contracts/SearchSpByNumber',
type: 'GET',
cache: false,
contentType: "application/json; charset=utf-8",
data: request,
dataType: 'json',
success: function (json) {
var i = 0;
i++;
// call autocomplete callback method with results
response($.map(json, function (item) {
return {
label: item.SP_NBR,
SPDesc: item.SP_DESC,
ID: item.ElementID
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert('error - ' + textStatus);
console.log('error', textStatus, errorThrown);
}
});
}
$("#SP1").autocomplete({
source: SPAutoComplete,
minLength: 2,
select: function (event, ui) {
// alert('you have selected ' + ui.item.name + ' ID: ' + ui.item.name);
$("#SP1").val(ui.item.label);
$("#SPDesc1").val(ui.item.SPDesc);
$("#SPDesc1").attr("readonly", true);
$("#SP1ID").val(ui.item.ID);
_newDirty = true;
event.preventDefault();
return false;
},
change: function (event, ui) {
debugger;
if (ui.item != undefined || ui.item != null) {
$("#SP1").val(ui.item.label);
$("#SPDesc1").val(ui.item.SPDesc);
$("#SPDesc1").attr("readonly", true);
$("#SP1ID").val(ui.item.ID);
event.preventDefault();
return false;
}
},
focus: function (event, ui) {
debugger;
$("#SP1").val(ui.item.value);
return false;
}
});
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 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 });
}
});
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/