I am a jQuery newbie and trying to implement the autocomplete functionality along with jQuery typewatch. That is, to get the data from web service after a certain time period say 750 ms rather than after minLength.
<script type="text/javascript">
$(document).ready(function () {
$('.searchinput').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Services/SampleWebService.asmx/GetProduct",
data: '{"searchString":"' + request.term + '"}',
dataType: "json",
async: true,
success: function (data) {
response(data);
}
});
},
});
$('.searchinput').typewatch({
callback: $.autocomplete,
wait: 750,
highlight: false
});
});
My autocomplete thing works absolutely fine but somehow I am not able to include the typewatch thing to it. I am sure there is a serious coding failure which I am not aware of.
Thanks
The jquery autocomplete have this option as parameter called delay:
http://api.jqueryui.com/autocomplete/#option-delay
So what you have to do is to change that parameter, and remove the typewatch as:
$(document).ready(function () {
$('.searchinput').autocomplete({
delay:750,
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Services/SampleWebService.asmx/GetProduct",
data: '{"searchString":"' + request.term + '"}',
dataType: "json",
async: true,
success: function (data) {
response(data);
}
});
},
});
});
The parameter called "delay" is the time you have to wait affter keydown to call external service. That is only for don't overload service with no "sensitive" search data.
What I understood from user question, is that he wants to call the autocomplete "update" function every 750ms.
You could do that changing the typewatch "segment" with this:
$('.searchinput').typewatch({
callback: function(){
$(".searchinput").data("autocomplete").search();
},
wait: 750,
highlight: false
});
That will trigger the search for the service and display popup response every 750ms
Related
It's not a working properly anchor tag in the success function of ajax in jquery. Button clicked but not perform action.
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "#Url.Action("Action", "Controller")",
dataType: "json",
success: function (data) {
$.each(data.models, function (index, value) {
$('#Teacher_table tbody').append("<tr><td> <a asp-action='Action_name' asp-route-id="+value.Id +">Edit</a></td></tr>");
});
}
});
});
I find the solution to this problem.
asp-action is not work in success function in asp.net MVC core. So use this code
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "#Url.Action("Action", "Controller")",
dataType: "json",
success: function (data) {
$.each(data.models, function (index, value) {
$('#Teacher_table tbody').append("<tr><td><a href='/Controller/Action?id=" + Id + "'>Anchor Name</a></td></tr>");
});
}
});
});
I'm trying to learn ASP.NET WebHooks, but the docs are pretty sparse right now.
What I'm trying to do is subscribe to a specific events. All the samples I can find demonstrate subscribing to all the events, which is not very useful for me.
EDIT:
This is the code for subscribing I found in the docs:
function subscribe() {
$.ajax({
type: "POST",
url: "/api/webhooks/registrations",
data: JSON.stringify({
WebHookUri: "http://localhost:59927/api/webhooks/incoming/custom",
Secret: "12345678901234567890123456789012",
Description: "My first WebHook!"
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data, status) { alert(status); },
failure: function(errMsg) { alert(errMsg); }
});
return false;
}
What should be the code for subscribing to a "BookAdded" event?
Thanks!
So, for anyone else looking for the answer, this is how it should be done:
function subscribe() {
$.ajax({
type: "POST",
url: "/api/webhooks/registrations",
data: JSON.stringify({
WebHookUri: "http://localhost:59927/api/webhooks/incoming/custom",
Secret: "12345678901234567890123456789012",
Description: "My first WebHook!",
Filters: ["BookAdded"]
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data, status) { alert(status); },
failure: function(errMsg) { alert(errMsg); }
});
return false;
}
Note the Filters field added to the ajax statement.
I'm making the following ajax request:
$.ajax({
type: 'POST',
url: 'AJAX.aspx/TestPageLoad',
data: JSON.stringify({}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert('Success');
},
error: function (x, e) {
alert( x.responseText);
}
});
I put a break point in my AJAX.aspx page but it does not get hit. Is it the way it supposed to be? According to this article it does.
I put a breakpoint in the Page_Load of my AJAX.aspx page but it does
not get hit
It's because the JavaScript executes on DOM Ready.
Doesn't Page_Load event get fired when making ajax calls?
No. It executes after Page life cycle and on DOM ready
For that you have to set the debugger in Ajax call like below
$(document).ready(function () {
debugger; //A kind of Break Point
$.ajax({
type: 'POST',
url: 'AJAX.aspx/TestPageLoad',
data: JSON.stringify({}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert('Success');
},
error: function (x, e) {
alert(x.responseText);
}
});
});
I'm trying to get data back after an element is ready in the DOM. I'm trying to use the load function from JQUERY but I get a message .load() is not a function.
Is there a best practice when using ajax to get data for an element (in my case a div) during a page load? I'm using ASP.NET and calling a webmethod in code behind.
Here is my ajax/jquery code:
$(document).ready(function () {
$(function () {
$("[id$=divArea]").load()(function () {
$.ajax({
type: "POST",
url: "apage.aspx/Role",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
alert("got data from Role");
},
error: function (data) {
alert("failed to get data from Role");
}
});
});
});
Thanks.
$(document).ready() is for calling code once the DOM is ready - therefore, if I have understood you correctly, you don't need to include $("[id$=divArea]").load()(function () {
It should work like this:
$(document).ready(function () {
$(function () {
$.ajax({
type: "POST",
url: "apage.aspx/Role",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
alert("got data from Role");
},
error: function (data) {
alert("failed to get data from Role");
}
});
});
});
By the way - it was probably a paste error, but you also omitted the $(document).ready closing }); in the code you posted.
I think that the problem it's the code itself, try the code like this
$(document).ready(function (){
$("[id$=divArea]").load('apage.aspx/Role',function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
})
});
I'm having quite a frustrating problem that I'm sure is TRIVIAL. Whenever I move this jQuery post inside the click function it sometimes works, but most of the time does not.
If I move it outside it works and posts and gives a response like it should everytime..
::boggled:: Someone please enlighten me.
$(document).ready(function() {
$('#Button1').click(function() {
//alert(document.getElementById('TextBox1').value);
$.ajax({
type: "POST",
url: "sudoku.asmx/getSolution",
data: "{'pid':'34367'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert("succes " + msg.d);
},
error: function(msg) {
alert("fail " + msg.d);
}
});
});
});
Looks like you need to have your click event return false.
$("#Button1").click(function()
{
$.ajax(...);
return false;
});