We Keep Coding

How to work with jQuery UI auto-complete extender for text searching

I'm working with jQuery UI Auto Complete extenders for populating list.
Here i include this article for more reference of my code detail.
Here I modify method for auto complete. In article this calls from css class and I want from the ID of the control.
This is my jQuery script :
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$("#<%=txt_reason.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Raise_Ticket.aspx/SearchReasons",
data: "{'prefixText':'" + $("#<%=txt_reason.ClientID %>").val() + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
</script>
And this is my method:
[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
[System.Web.Services.WebMethod]
public static List<string> SearchReasons(string prefixText)
{
using (DataClassesDataContext db = new DataClassesDataContext())
{
var query = db.Reasons.Where(r => r.ReasonText.Contains(prefixText)).Select(r => r).ToList();
List<string> reasons = new List<string>();
foreach (var item in query)
{
reasons.Add(item.ReasonText.ToString());
}
return reasons;
}
}
The problem is not detecting this textbox not displaying result.

Use this
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$("#txt_reason").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Raise_Ticket.aspx/SearchReasons",
data: "{'prefixText':'" + $("#txt_reason").val() + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
</script>
Using this you can also try
$(document).ready(function () {
$("#textbox").autocomplete({
source: function (request, response) {
$.ajax({
url: "URL",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (retrieveddata) {
if (retrieveddata.length > 0) {
}
},
error: function (request, status, error) {
console.log("Error! " + request.responseText);
}
})
},
});
})
Take Tern Variable in Code

Not able to fetch data/Response on Success of Jquery.Ajax()

Hi people, I am craving myself from past 3 days and I just couldn't find the way to access json response seen on my browser
Here is my Ajax code :
$("[id*=btnModalPopup]").live("click", function () {
$("#tblCustomers tbody tr").remove();
$.ajax({
type: "POST",
url: "CallDataThroughJquery.aspx/GetLeadDetails",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("Hi Json");
alert(data.Leadno); // **Says data.leadno is undefined**
response($.map(data.d, function (item) { // **here I am going some where wrong**
//**cannot catch response. Help!**
}))
},
failure: function (response) {
alert(response.d);
}
});
});
Please help me on this.. Thanks in Advance!

I see that your JSON is an array with an object. Try data[0].Leadno

$.ajax({
type: "POST",
url: "CallDataThroughJquery.aspx/GetLeadDetails",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert("Hi Json");
alert(data.d[0]['Leadno']); // **Says data.leadno is undefined**
response($.map(data.d, function (item) { // **here I am going some where wrong**
//**cannot catch response. Help!**
}))
},
failure: function (response) {
alert(response.d);
}
});
Try your alert with 'data.d[0]['Leadno']'.

How to get data with jQuery ajax?

I'm try using jQuery Ajax for popularize a jqxGrid, but is not success
my jQuery code:
$.ajax(
{
url: "Cliente.aspx/GetClient",
type: "POST",
data: {},
dataType: "json",
success: function (msg) {
alert(msg);
},
error: function(msg) {
alert("error"); //msg is returning error
}
});
I'm try get data with Entity Framework
[WebMethod]
public static string GetClient()
{
string dados;
using (SysContext db = new SysContext())
{
dados = new JavaScriptSerializer().Serialize(db.Clients.ToList());
}
return dados;
}
Where is my error? why

Look over here: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
You are missing:
contentType: "application/json; charset=utf-8",
Which is needed to go to the Webmethod. So it will be:
$.ajax(
{
url: "Cliente.aspx/GetClient",
type: "POST",
data: {},
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (msg) {
alert(msg);
},
error: function(msg) {
alert("error"); //msg is returning error
}
});

Unable to execute Ajax call to c# method

Im trying to call a c# method on select changed event of a dropdown list,The select change event triggers but the ajax does not work
<script type="text/javascript">
$(document).ready(function () {
$('body').delegate('#drpselect1', 'change', function () {
var groupname = $("#drpselect1 option:selected").text();
alert(groupname);
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "sample.aspx/getdata",
dataType: "json",
{"text":groupname},
success: function () {
alert("works");
// window.location.href = "ClubCreation.aspx";
},
Error: function () {
alert('error');
}
});
/* $.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "sample.aspx/getdata",
data:{"text":groupname}
dataType: "json",
success: function () {
alert('Successfully Saved');
//window.location.href = "ClubCreation.aspx";
},
Error: function () {
}
});*/
});
});
</script>
c# method
[WebMethod]
public static void getdata(String text)
{
//do stuff
}

You have to decorate getdata method with
[WebMethod] attribute.
In your c# code [WebMethod] is missing.

try this
check this line
data:'{"text":"'+groupname+'"}',//put "data:"
now,
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "sample.aspx/getdata",
dataType: "json",
data:'{"text":"'+groupname+'"}',//put "data:"
success: function () {
alert("works");
// window.location.href = "ClubCreation.aspx";
},
Error: function () {
alert('error');
}
});

Probabky you missing attributes:
[System.Web.Services.WebMethod()]
public static void getdata(String text)
Look here for more informations: Using jQuery to directly call ASP.NET AJAX page methods

ajax request not working on IE

function VReload()
{
$.ajax({
type: "GET",
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});
This piece of code is working fine on Mozilla and chrome but not on IE. Ajax call is not firing on IE. What could be the reason.

Switch off caching by doing this:
$.ajax({
type: "GET",
cache: false,
url: "/foo/",
success: function (data) {
$("#myid").html(data);
}
});

set cache false
$.ajaxSetup({ cache: false });
or
$.ajax({
cache: false,
//other options
});

Try this:
function VReload()
{
var timestamp = new Date();
$.ajax({
type: "GET",
url: "/foo/" + "&timestamp=" + timestamp.getTime(),
success: function (data) {
$("#myid").html(data);
}
});
}
$(document).ready(function() {
setInterval('VReload()', 1000)
});

use jQuery's $.get() function
$.get('/foo/', {}, function(data){
// whatever
});