I have a JQuery Autocomplete function that I need to be able to pass a url into. I'm trying to pull the url from the html data-url attribute, however I'm currently getting a variable is undefined message in the JavaScript console, so I know I'm not getting the values I expect. I've included my code below. Any help would be greatly appreciated.
JQuery Function:
$(function () {
$(".autocomplete").autocomplete({
delay: 0,
source: function (request, response) {
var baseURL = $(this).data("url");
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: baseURL + request.term,
dataType: "json",
success: function (data) {
response(data)
}
});
},
minLength: 1,
});
HTML Element:
<td style="width: 90%">
<label for="tag_Name" class="inline">Server Tags: </label>
<input class="fixed autocomplete" type="text" id="tag_Name" placeholder="Type tags to add..." data-url="/RequestFieldValues/GetLikeResourceTags/?prefix=" />
</td>
Try this instead...
$(function () {
$(".autocomplete").each(function() {
var baseURL = $(this).data("url");
$(this).autocomplete({
delay: 0,
source: function (request, response) {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: baseURL + request.term,
dataType: "json",
success: function (data) {
response(data)
}
});
},
minLength: 1,
});
});
});
I've put the .autocomplete() inside an each() function so you can refer to this to get the base url from the data attribute. You can then pass that into the source function.
Incidentally, if there is more than 1 input then you need to make each one have a unique ID. You shouldn't have elements with the same ID :)
Another way to change the URL in a ajax request
$.ajax({
url: "http://static.url/",
beforeSend: function (xhr) {
this.url = "http://dyn.url/" + "here"
}
});
i think what you should be doing is :
$(function () {
var baseURL = $(".autocomplete").data('url');
$(".autocomplete").autocomplete({
delay: 0,
source: function (request, response) {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: baseURL + request.term,
dataType: "json",
success: function (data) {
response(data)
}
});
},
minLength: 1,
});
Related
I'm calling Ajax like below
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: path,
dataType: "json",
data: '{ "jsondata":' + jsondata + ',"key":"' + getValue('id') + '"}',
success: function (data) {
callback(data);
},
error: function (error) {
callback(error.responseText);
}
});
I want to get the "Data" value at calling time because after the call the execution doesn't goes to the desired web method and the error is showing like
""Message":"Invalid web service call, missing value for parameter: \u0027obj\u0027..."
I have to track the the Ajax posting value during Ajax call and find out what is the problem with posting data.Is there any tricks to get the data value before Ajax calling?
Any help will be appreciated.
Edit: I'm sending the jsondata value like below
var jsondata = '{ "pagenumber":"' + pagenumber + '","sortColumn":"' + sortColumn + '","sortDirection":"' + sortDirection + '","rowPerPage":"' + rowPerPage + '"}';
Thanks.
I was just checking with below code -
please have a look. please check beforesend content
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '/dummy',
dataType: "json",
data: '{dummy:"dummy"}',
success: function (data) {
alert(data);
},
error: function (error) {
alert(error);
},
beforeSend: function(data,data1) {
console.log('before'+data1.data)
},
});
})
});
var path = "test_ajax.php";
var jsondata = "Testing123";
var test = "test";
var data = {jsondata : jsondata,key : test};
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: path,
dataType: "json",
data: data,
success: function (data) {
alert("success:"+data);
},
error: function (error) {
alert("failure"+error.responseText);
}
});
i got my json string inside the ajax as function like this way
$.ajax({
type: "POST",
url: "http://localhost/./Service/GetPageInfo",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify({
filename: filename
}),
success: function (data) {
alert('Success');
},
error: function () {
alert('Error');
}
});
here i get data like
[{"main":{"sub":[],"tittle":"manu","startvalue":"","stopvalue":"","status":"","accumalated":"","comment":""}}]
i want it in a variable like
var myjsonobject =[{"main":{"sub":[],"tittle":"manu","startvalue":"","stopvalue":"","status":"","accumalated":"","comment":""}}]
There you go :
$.ajax({
type: "POST",
url: "http://localhost/./Service/GetPageInfo",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify({
filename: filename
}),
success: function (data) {
alert('Success');
var jsonobject = data;
},
error: function () {
alert('Error');
}
});
Also I strongly advise you to use promises to make API calls: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise
var jsonobject= null;
$.ajax({
type: "POST",
url: "http://localhost/./Service/GetPageInfo",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify({
filename: filename
}),
success: function (data) {
jsonobject=data;
alert('Success');
},
error: function () {
alert('Error');
}
});
If you want wait for ajax response and fill up variable then pass async: false in ajax request options.
Based on your comment, you need to parse the JSON in your success handler,
success: function (data) {
alert('Success');
var myjsonobject = JSON.parse( data );
},
I have a webservice method that takes the id of an element to determine the source for autocompletes.
In a nutshell, I'm doing this:
$("input[type='text']").autocomplete({
source: function(request, response) {
var id = $(this).attr('id');
var params = {'id': id, 'term': request.term};
var jsonParams = JSON.stringify(params);
$.ajax({
type: "POST",
url: "Page.aspx/GetAutoCompleteList",
data: jsonParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
response(JSON.parse(msg.d));
},
error: function() {
response([]);
}
});
}
});
But id isn't referring to the original selector.
What can I do to get the id of the selected input element? Or what is a better strategy for this?
You'd need to maintain a context of each input element, something like this:
$("input[type='text']").each(function (i, ele) {
ele = $(ele);
ele.autocomplete({
source: function (request, response) {
var id = ele.attr('id');
var params = {'id': id, 'term': request.term};
var jsonParams = JSON.stringify(params);
$.ajax({
type: "POST",
url: "Page.aspx/GetAutoCompleteList",
data: jsonParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// ...
},
error: function () {
// ...
},
async: false
});
}
});
});
Try
$(this.element).prop("id");
this.element[0].id;
$(this.element.get(0)).attr('id');
JSFIDDLE
$("input[type='text']").autocomplete({
source: function(request, response) {
var id = $(this.element).prop("id");
var id2=this.element[0].id;
var id3=$(this.element.get(0)).attr('id');
console.log(id);
console.log(id2);
console.log(id3);
var params = {'id': id, 'term': request.term};
var jsonParams = JSON.stringify(params);
$.ajax({
type: "POST",
url: "Page.aspx/GetAutoCompleteList",
data: jsonParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
response(JSON.parse(msg.d));
},
error: function() {
response([]);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="asd"></input>
I want to pass the parameter to another page using ajax.Actually i have one popup dialog box,in that dialog box i have one text field,i have to send that value to another page to save into db.not getting how to do it.
Here is my code
$(function() {
$("#button").click(function() {
$("#popup").dialog({
title: "Add",
width: 430,
height: 250,
modal: true,
buttons: {
Add: function() {
var t = ($('#user').val());
$.ajax({
type: "POST",
url: "Details.aspx.cs/getData",
data: {
"test1": t
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert(data);
}
});
$(this).dialog('close');
}
}
});
});
})
The ajax call seems fine. There could be a possibility that the json string is not formed correctly from the textbox javascript value. try using JSON.stringify:
function() {
var t = ($('#user').val().trim());
var payload = { "test1" : t };
$.ajax({
type: "POST",
url: "Details.aspx.cs/getData",
data: JSON.stringify(payload),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
alert(data);
}
});
You are not transferring the data correct. if you want to do it this way, you have you use JSON.stringify of JSON.parse.
You can also try to use
data: "{'test':'" + t+ "'}",
or something of this sort, I used to do it in the past, but don't have the example in front of my eyes now. Will have it clearly later on though.
I'm trying to recreate JQUery autocomplete example from its website:
http://jqueryui.com/autocomplete/#multiple-remote
The only thing I change is I changes the source property from :
source: function( request, response ) {
$.getJSON( "search.php", {
term: extractLast( request.term )
}, response );
},
To:
source: function (request, response) {
$.ajax({
type: "POST",
url: "/UIClientsWebService.asmx/SearchCRMUsers",
data: "{term:'" + extractLast(request.term) + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$("#commentBody").autocomplete("option", "source", result.d);
}
}, response);
},
Now the problem is autocomplete just work for first ',' . When I choose my first item, then when I want to search and choose second item, nothing happen. There is no error in my firebug. I can see search method call but source does not change and also nothing shown as my autocomplete items. I can see my search term change correctly but actually no search happen.
try add the option multiple: true to your script
$(document).ready(function() {
src = '/UIClientsWebService.asmx/SearchCRMUsers';
$("#yourSelector").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
dataType: "json",
data: "{term:'" + extractLast(request.term) + "'}",
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300,
multipleSeparator:",",
multiple: true,
});
});