I've written an auto-complete code using jQuery in script tags in a given file.
In that I have various events like select open close etc.
I want to call another function in the same file but not within the jQuery block. However this is not getting called.
$(function() {
function log( message ) {
makeRequest(message);
}
$("#searchArea").autocomplete({
source: function (request, response) {
$.ajax({
type: "GET",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "YAHOO.Finance.SymbolSuggest.ssCallback",
data: {
query: request.term
},
cache: true,
url: "http://autoc.finance.yahoo.com/autoc"
});
YAHOO.Finance.SymbolSuggest.ssCallback = function (data) {
response($.map(data.ResultSet.Result, function (item) {
return {
label: item.symbol+', '+item.name+'('+item.exchDisp+')',
value: item.symbol
}
}));
}
},
minLength: 1,
select: function (event, ui) {
$("#searchArea").val(ui.item.symbol);
sendAcURL = "http://cs-server.usc.edu:29686/examples/servlet/HelloWorldExample?symbol="+ui.item.value;
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
log(sendAcURL);
}
});
});
function makeRequest(url) {
alert("here");
}
I want to call makeRequest() through select event, but alert does not pop-up, hence my request is not called. Why is that so?
Related
i need a ok / cancel delete confirmation dialogue box before i send ajax request in order to remove item from database
var id=ID;
$.ajax({
type: "POST",
url: "sample.aspx?Mode=Delete",
data: { id: id },
success: function (response) {
});
You can simply use Javascript's confirm function. This is the easiest approach :)
var r = confirm("Are you sure you want to delete this?");
if (r == true) {
var id=ID;
$.ajax({
type: "POST",
url: "sample.aspx?Mode=Delete",
data: { id: id },
success: function (response) {}
});
} else {
// Do something if they push cancel button
}
You need to use jquery UI plugins.
Then just before the ajax function you need to do this:
$('a.deleteBtn').on('click', function (e) {
e.preventDefault();
** get you values here **
$('div.deleteDialog').dialog({
modal: true,
width: 400,
height: 'auto',
buttons: {
"Delete": function () {
$(this).dialog('close');
setTimeout(function () {
$.ajax({
method: 'POST',
url: url,
data: {****},
success: function () {
},
error: function () {
});
}, 1000);
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
});
In youy html file you need to add the dialog
<div class="deleteDialog" title="Package Delete Confirmation" style="display: none">
Are you sure you want to delete this?
</div>
I am trying to fire a change event after auto complete.this change event will load a textbox with a name corresponding auto completes selected id. auto complete event is working perfectly but the change event is not responding.
<script>
$('#CustomerSupplyId').autocomplete({
source: function (request, response) {
$.ajax({
type: "GET",
url: "/Purchase/GetSuggestion",
data: { text: request.term },
success: function (data) {
response($.map(data, function (profile) {
return { label: profile.CustomerSupplyNm, value: profile.CustomerSupplyId, id: profile.CustomerSupplyId }
}
))
},
change: function (data) {
response($.map(data, function (profile) {
$("#textbox").val(profile.CustomerSupplyNm);
}))
}
})
}
});
</script>
What am i doing wrong here or what should i do?
if i do the success method like this
success: function (data) {
response($.map(data, function (profile) {
return { label: profile.CustomerSupplyNm, value: profile.CustomerSupplyId, id: profile.CustomerSupplyId },
$("#textbox").val(profile.CustomerSupplyNm)
}
))
}
the 'testbox' is loaded but the auto complete suggestion is despaired.But the 'textbox value is being changed for every keystroke which i don't want.
Set the textbox value in response's callback before returning
$('#CustomerSupplyId').autocomplete({
source: function (request, response) {
$.ajax({
type: "GET",
url: "/Purchase/GetSuggestion",
data: { text: request.term },
success: function (data) {
response($.map(data, function (profile) {
$("#textbox").val(profile.CustomerSupplyNm);
return { label: profile.CustomerSupplyNm, value: profile.CustomerSupplyId, id: profile.CustomerSupplyId }
}))
}
})
}
});
there is no change attribute for jquery's .ajax() method,
check docs here .
you should listen events after ajax call has been completed like:
$.ajax({
type: "GET",
url: "/Purchase/GetSuggestion",
data: { text: request.term },
success: function (data) {
response($.map(data, function (profile) {
return { label: profile.CustomerSupplyNm, value: profile.CustomerSupplyId, id: profile.CustomerSupplyId }
}
))
},
complete: function (data) {
do your dom manipulation here
}
})
jQuery ajax doesn't have a property change. So adding change property doesn't help.
I think what you want to do is something like this.
...
.autocomplete({
source: {
...
}
change: {
// Do something ...
}
})
...
i am Creating a page that search all client details...
i am also using json for autocomplete textbox with data of datatable...
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txtSearch.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
},
minLength: 1
});
});
i want to view data of that selected name on textbox on textchanged event,
their setup of textbgox looks like..`
<asp:TextBox ID="txtSearch" runat="server" AutoPostBack="True"
ontextchanged="txtSearch_TextChanged"></asp:TextBox>
That textchenged event trigger properly in mozilla, but not working in chrome,,
can anyone suggests some solution....
I would suggest calling server side's textbox onchange event after selecting a value from the autocomplete list as,
...
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
__doPostBack("txtSearch", "TextChanged");
},
minLength: 1
});
and remove autopostback property of that textbox as we are firing it from client side.
Or you can make an ajax call on select event and populate required data in client side itself.
` $(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
InitAutoCompl();
});
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
InitAutoCompl();
}
function InitAutoCompl() {
$("#<%=txtSearch.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: ''<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('##')[0],
val: item.split('##')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
minLength: 1, change: function (event, ui) { __doPostBack("txtSearch", "TextChanged"); }
});
}
and remove Autopostback="true" from TextBox
`
I am using Jquery autocomplete with ajax.
Everything works fine except when I set minLength to 0.
When I choose an element from the list, the autocomplete doesn't stop running and shows me the list again.
Here is the code:
$("#id_from").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://127.0.0.1:8000/core/get_from_cities",
dataType: "json",
data: {term: request.term},
success: function (data) {
response($.map(data.data, function (item) {
return {
label: item.value,
value: item.value
}
}));
}
});
},
minLength: 0
});
Thanks..
EDIT:
Here is the solution I came up with:
$("#id_to").focus(function() {
$( "#id_to" ).autocomplete( "enable" );
});
$("#id_ffrom").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://127.0.0.1:8000/core/get_from_cities",
dataType: "json",
data: {term: request.term},
success: function (data) {
response($.map(data.data, function (item) {
return {
label: item.city,
value: item.city,
}
}));
}
});
},
minLength: 0,
select: function (event, ui) {
$('#id_from_country').val(ui.item.country)
$("#id_ffrom").autocomplete( "disable" );
}
});
I have the following code:
$('#DoButton').click(function (event) {
event.preventDefault();
$("input:checked").each(function () {
var id = $(this).attr("id");
$("#rdy_msg").text("Starting" + id);
doAction(id);
});
});
function doAction(id) {
var parms = { Id: id };
$.ajax({
type: "POST",
traditional: true,
url: '/adminTask/doAction',
async: false,
data: parms,
dataType: "json",
success: function (data) {
$("#rdy_msg").text("Completed: " + id);
},
error: function () {
var cdefg = data;
}
});
}
When the button is clicked it checks the form and for each checked input it calls doAction() which then calls an Ajax function. I would like to make it all synchronous with a 2 second delay between the completion of one call and the running of the next. The delay is to give the user time to see that the last action has completed.
By setting async=false will that really make the ajax function wait?
How can I add a 2 second wait after the Ajax has run and before the next call to doAction?
There is option in jQuery to set the ajax function synchronous
$.ajaxSetup({
async: false
});
To make the function to wait you can use .delay()
Try the solution of this question also.
Try to do it using recursion
$('#DoButton').click(function (event) {
event.preventDefault();
doAction( $("input:checked").toArray().reverse() );
});
function doAction(arr) {
if( arr.length == 0 ) return;
var id = arr.pop().id;
$("#rdy_msg").text("Starting" + id);
$.ajax({
type: "POST",
traditional: true,
url: '/adminTask/doAction',
async: false,
data: { Id: id },
dataType: "json",
success: function (data) {
$("#rdy_msg").text("Completed: " + id);
setTimeout(function(){ doAction(arr); }, 2000);
},
error: function () {
var cdefg = data;
$("#rdy_msg").text("Error: " + id);
setTimeout(function(){ doAction(arr); }, 2000);
}
});
}
Use setTimeout for the AJAX call doAction.