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.
Related
This is my aspx page code
function grid(datas)
{
var datass = {datas: datas};
var myJSON = JSON.stringify(datass);
$.ajax({
url: 'EditCustomerBills.aspx/LoadGrid',
method: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: myJSON,
success: function (data) {
alert("Success");
},
error:function(error){
alert("failed");
}
});
}
and this is my behind code
[WebMethod]
public static string LoadGrid(string datas)
{
//GetCustomerBillDetail(data);
string datass = datas.ToString();
return datass;
}
I'm using code perfectly, but output is failed. I'm struggling for four days. please help me. thank you.
I don't know what is your "myJSON" is . according to me your code should be sometinhg like this.
[System.Web.Services.WebMethod]
public static string GetCurrentTime(string datas)
{
return "Hello " + datas + Environment.NewLine + "The Current Time is: "
+ DateTime.Now.ToString();
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function ShowCurrentTime() {
$.ajax({
type: "POST",
url: "CS.aspx/GetCurrentTime",
data: '{datas: "Your Data" }', // your data should be here.
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
alert(response.d);
}
</script>
below picture will give you a idea how we can call the server side method.
for more reference please see this.
edit as follows and share with f12 in console output?
error: function (error) {
console.log(error);
}
I found this code on the internet, I'm using it to populate a textbox with autocomplete elements, the problem I have tho is that I also have a DropDownList that lets you choose between three languages, and I would like to change a parameter depending on the selected language. This is the code:
<script language="javascript" type="text/javascript">
$(function () {
$('#<%=txtCompanyName.ClientID%>').autocomplete({
source: function (request, response) {
$.ajax({
url: "Default.aspx/GetCompanyName",
data: "{ 'pre':'" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return { value: item }
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
});
});
I would like to change the "url: Default.aspx/GetCompanyName" parameter everytime I switch the language on the DropDownList. I tried a lot of things, but I think the closest was this:
...
if(document.getElementById('DropDownListName').value == "Company")
url: "Default.aspx/GetCompanyName",
} else {
url: "Default.aspx/IgnoreInput",
}
...
Thanks in advance for the help!
lets assume your dropdown has static values like this, you can fire this each time the dropdown changes:
<select id="languages" onchange="OnLanguageChange(this)">
<option value="default.aspx/GetCompanyEN">English</option>
<option value="default.aspx/GetCompanyFR">Francais</option>
<option value="default.aspx/GetCompanyES">Espanol</option>
</select>
add your code to this function to meet your needs, so the el.value would be your url
function OnLanguageChange(el) {
alert(el.value)
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
$(function () {
$("[id*=btnaddrecords]").bind("click", function () {
var user = {};
user.invoice_no = $("[id*=txtinvoice]").val();
user.sale_description = $("[id*=txtsale]").val();
user.transdate = $("[id*=txttdate]").val();
user.transtype = $("[id*=ddtransaction]").val();
$.ajax({
type: "POST",
url: "Default.aspx/SaveUser",
data: '{user: ' + JSON.stringify(user) + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert("User has been added successfully.");
window.location.reload();
}
});
return false;
});
});
</script>
There are two main problems in the code you shared:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
$(function () {
A script element can load one script. It can load it from a URL using a src attribute, or it can be embedded a child node. You can't have both at the same time.
You need two script elements.
You should also consider using the current version of jQuery. 1.6.2 is very old.
You say you are sending JSON:
contentType: "application/json; charset=utf-8",
but:
'{user: ' + JSON.stringify(user) + '}'
Will not give you JSON.
You need:
JSON.stringify({ user: user })
This assumes that Default.aspx/SaveUser expects a JSON formatted request in the first place.
This is the code i am currently using for my auto complete search for an input box. I have tried multiple times to get it to search or submit the search when you click on what automatically pops up. Please help I have tried everything
<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">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$(".autosuggest").autocomplete({
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);
}
});
}
});
}
Here is the code after attempting to add the submit/enter click function.
<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">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$(".autosuggest").autocomplete({
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);
},
select: function(event, ui) {
$("#searchform button").click();
}
});
}
});
}
Thank you.
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
}