Develop Reference

Ajax - Firefox not working

ajax chrome also works. But firefox is not working. I did not understand the reason. Sometimes I have this problem. Firefox also needs to be written differently. Help please.
$(function () {
//[id$ = txtAra]
$("[id$=txtAra]").autocomplete({
source: function (request, response) {
$.ajax({
url: "/AramaScript.aspx/Search",
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,
val: item
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#btnAra").click();
},
minLength: 1
});
});

my jquery autocomplete not working

i use jquery for create an autocomplete for a textbox, data fetches from an an asmx webservice. i monitor my code on firebug ,this tool shows request sent and xml response recieved . but autocomplete not open for textbox :(
Could someone please tell me why my code for the jquery autocomplete is not working?
jquery code:
<link href="../Script/MainCSS.css" rel="stylesheet" />
<link href="../Script/jquery-ui.css" rel="stylesheet" />
<script src="../Script/jquery-1.10.2.js"></script>
<script src="../Script/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('.textBox').autocomplete({
source: function (request, response) {
$.ajax({
url: "/Services/BusService.asmx/GetRouteInfo",
data: { param: $('.textBox').val() },
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var err = eval("(" + XMLHttpRequest.responseText + ")");
alert(err.Message)
// console.log("Ajax Error!");
}
});
},
minLength: 2 //This is the Char length of inputTextBox
});
});
</script>
my c# code:
[WebMethod]
public string[] GetRouteInfo(string param)
{
List<string> list_result = new List<string>();
AutoTaxiEntities useEntity = new AutoTaxiEntities();
System.Data.Entity.Core.Objects.ObjectResult<DAL.Model.SP_FIND_ROUTE_ROUTESTOPS_Result> sp_result = useEntity.SP_FIND_ROUTE_ROUTESTOPS(param);
foreach (DAL.Model.SP_FIND_ROUTE_ROUTESTOPS_Result sp_result_item in sp_result.ToList())
{
list_result.Add(sp_result_item.ID + "," + sp_result_item.ITEMTYPE + "," + sp_result_item.TITLE);
}
return list_result.ToArray();
}

Looking at your added script references, i think you have not added autocomplete.js script. Please add it and try it once.Please click here

$(document).ready(function () {
$('#<%=txtSearch.ClientID%>').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: "/Services/BusWebService.asmx/GetRouteInfo",
data: "{ 'param': '" + request.term + "' }",
dataType: "json",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
itemid: item.split(',')[0],
itemtype: item.split(',')[1],
label: item.split(',')[2]
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2,
select: function (event, ui) {
$('#<%=hfItem.ClientID%>').val(ui.item.itemid + ',' + ui.item.itemtype + ',' + ui.item.label);
//$("form").submit();
}
});
});

Textbox's Textchanged event not fire in chrome

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
`

Autocomplete in two input boxes? - javascript

Hi i am trying to find out how to use my javascript code for two input boxes. the data its grabing and the URL is using C# code but that should not matter. Please help me with my autocomplete..
Here is a test page of it in action
http://www.bivar.com/test.aspx
Here is the code i am using for the javascript.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$(".autosuggest").autocomplete({
select:function(event, ui){
window.location.href = '/Products/ProductInfoCenter.aspx?partnum=' + ui.item.value;
},
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/test.aspx/GetAutoCompleteData",
data: "{'PartNumber':'" + document.getElementById('txtPartNum').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert(err.message);
}
});
}
});
}
</script>
Here are the two input boxes
<input type="text" id="txtPartNum" class="autosuggest" />
<input type="text" id="txtPartNum2" class="autosuggest" />
Thank you and please help.

Here is your function updated. Tested and its working perfectly. Problem was that, it was passing value of first input box every time. I used $(this.element) to get current element on which autocomplete is requested. When dealing with classes we have to make use of (this) keyword to avoid conflicts.
function SearchText() {
$(".autosuggest").autocomplete({
select:function(event, ui){
window.location.href = '/Products/ProductInfoCenter.aspx?partnum=' + ui.item.value;
},
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/test.aspx/GetAutoCompleteData",
data: "{'PartNumber':'" + $(this.element).val() + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert(err.message);
}
});
}
});
}

The only problem I see is that both the inputs are sending same data as parameter. But that is what it supposed to do isn't it? Because you are using this -
data: "{'PartNumber':'" + document.getElementById('txtPartNum').value + "'}",
in your code. I think this is the error. But please make sure you ask properly what you are looking for. Your question is not completely understandable. A usual code should look like this -
data: "{'PartNumber':'" + request.term + "'}",
Let me know if this what you were looking for.

jquery ajax isn't working

I am trying to get user information by using twitter api. The jquery code is below :
<script type="text/javascript">
function GetUser() {
$.ajax({
type: "GET",
url: "http://api.twitter.com/1/users/show.json?user_id=id&include_entities=true&callback=?",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
cache:true,
timeout:8000,
success: function (json) {
alert("Successfull");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
alert(thrownError);
}
});
}
</script>
xhr.responseText:undefined
thrownError:[object Error]
And html code :
<input type="submit" value="Submit" onclick="GetUser();" />

First your URL is not correct. Instead of
user_id=id
in your URL you have to use a actual value for id (id is just placeholder in your case). For example:
user_id=82193320
which would give you the data for my twitter user (uwe_guenther) back.
You can easily lookup twitter ids here:
http://mytwitterid.com/
If you just want to lookup user data by screen name you could use:
screen_name=uwe_guenther
instead.
The Twitter API description can you find here:
https://dev.twitter.com/docs/api/1/get/users/show
I have attached a working example for looking up screen_name by user_id and user_id by screen_name here:
The jsFiddle with the following example can be found here: http://jsfiddle.net/uwe_guenther/EvJBu/
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id='userIdTextField' type='text' placeholder='user_id'/>
<input id='userIdSubmitButton' type="submit" value="Submit"/>
<div id='screenNameResultView'></div>
<br>
<input id='screenNameTextField' type='text' placeholder='screen_name'/>
<input id='screenNameSubmitButton' type="submit" value="Submit"/>
<div id='userIdResultView'></div>
<br>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src='main.js'></script>
</body>
</html>
main.js
$(document).ready(function (){
$('#userIdSubmitButton').click(function (){
var userId = $('#userIdTextField').val();
$.ajax({
type: "GET",
url: "http://api.twitter.com/1/users/show.json?user_id=" + userId + "&include_entities=true&callback=?",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
cache:true,
timeout:1000,
success: function (json) {
alert("Successfull: screen_name=" + json.screen_name);
$('#screenNameResultView').text("screen_name=" + json.screen_name);
console.log(json);
},
error: function () {
alert("No Result");
}
});
});
$('#screenNameSubmitButton').click(function (){
var screenName = $('#screenNameTextField').val();
$.ajax({
type: "GET",
url: "http://api.twitter.com/1/users/show.json?screen_name=" + screenName + "&include_entities=true&callback=?",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
cache:true,
timeout:1000,
success: function (json) {
alert("Successfull: user_id=" + json.id);
$('#userIdResultView').text("user_id=" + json.id);
console.log(json);
},
error: function () {
alert("No Result");
}
});
});
});

Your Url is wrong
<script type="text/javascript">
function GetUser() {
$.ajax({
type: "GET",
url: "http://api.twitter.com/1/users/show.json?user_id=id&include_entities=true&callback=?",//this is wrong
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
cache:true,
timeout:8000,
success: function (json) {
alert("Successfull");
},
error: function () {
alert("cant search");
}
});
}
</script>

Here is a workin example http://jsfiddle.net/kMgES/
$.ajax({
url: 'http://api.twitter.com/1/users/lookup.json?screen_name=noradio&callback=?',
type: 'GET',
dataType: 'json',
timeout: 8000,
success: function (data) {
alert(data[0].name);
},
error: function () {
alert("cant search");
}
});
In this example the search is done by screen name. Take a look at https://dev.twitter.com/docs/api/1/get/users/show for all possible options.
Consider using this for error handdling
error: function(XMLHttpRequest, textStatus, errorThrown){
// error handling
}