I have many Bootstrap Type-ahead attached to my text-box.
I was using there id to select then and attach typeahead.
Sample
$("#SireTag").typeahead({
source: function (query, process) {
$.ajax({
url: '/Bull/GetSireTag',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
});
}
});
Now i decided to make it more readable and short by using a single java-script code to attach type ahead to all my text-boxes.
<input data-typeahead-url="/Bull/GetSireTag" id="SireTag" name="SireTag" type="text" value="">
New Javascript
$('*[data-typeahead-url]')
.each(function () {
alert(this);
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
But its not working i am not so proficient with java-script anyone now whats wrong.
I tried developers tool ajax request is not made.
$('*[data-autocomplete-url]') doesn't select your elements because you're using data-typeahead-url.
You need to return the ajax result to the source, also don't use alert() to debug, use console.log() instead:
$('input[data-typeahead-url]').each(function () {
$(this).typeahead({
source: function (query, process) {
return $.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: { query: query },
dataType: 'json',
async: true,
success: function (resp) {
console.log(resp);
return process(resp);
}
});
}
});
});
Hope it helps.
$('*[data-typeahead-url]')
.each(function () {
var url = $(this).data("typeahead-url");
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: url,
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
Problem: The code was making ajax request but to the same address.
Diagnose: I tried log($(this).data("typeahead-url");) which gave desired output.
Solution: I created and stored the Url the used it as a parameter in ajax call
var url = $(this).data("typeahead-url");
Hope this help.
Related
I am trying to call function within ajax success block which is not happening.
Below I have given code which i was tried.
$("#form-data").submit(function(e) {
e.preventDefault();
var me = this;
$.ajax({
type: "POST",
url: "{{route('storeData.store')}}",
data: fd,
processData: false,
contentType: false,
success: function(data) {
me.callFunc(); // here i need to call that fucntion once data is stored in database
}
});
})
$(document).ready(function(e) { // here i need to call that fucntion when page loads
this.callFunc();
})
function callFunc() { // this is the function needs to call
$.ajax({
type: "GET",
url: "{{route('getData.get')}}",
success: function(data) {
console.log("output data", data)
}
})
}
Call your "callFunc()" without me / this as per below.
$("#form-data").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "{{route('storeData.store')}}",
data: fd,
processData: false,
contentType: false,
success: function(data) {
callFunc(); // here i need to call that fucntion once data is stored in database
}
});
})
$(document).ready(function(e) { // here i need to call that fucntion when page loads
callFunc();
})
function callFunc() { // this is the function needs to call
$.ajax({
type: "GET",
url: "{{route('getData.get')}}",
success: function(data) {
console.log("output data", data)
}
})
}
You don't have to use this
$(document).ready(function (e) {
function callFunc() { // this is the function needs to call
$.ajax({
type: "GET",
url: "{{route('getData.get')}}",
success: function (data) {
console.log("output data", data)
}
})
}
$("#form-data").submit(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "{{route('storeData.store')}}",
data: fd,
processData: false,
contentType: false,
success: function (data) {
callFunc(); // here i need to call that fucntion once data is stored in database
}
});
});
callFunc(); // here i need to call that fucntion when page loads
});
Your function is globally available so just call it like any other javascript function inside any other function
callFunc()
im using the function below to get image names. I also use the json code to get data of a different url, but somehow it isnt working at this. (im new to javascript. Just writing php normally.
function getImgname(name) {
$.getJSON("http://url.com/info.php?name="+name, function(json321) {
return json321.js_skininfo;
});
}
Try this:
function getImgname(myName) {
$.ajax({
url: 'http://url.com/info.php',
data: {
name: myName
},
type: 'POST',
dataType: 'json',
success: function(data) {
// do what you want with your data
return data.js_skininfo;
}
});
}
I tried this now:
function getImgname(myName) {
$.ajax({
url: "http://url.com/ninfo.php",
type: 'POST',
dataType: 'json',
success: function (data) {
return data.js_skininfo;
},
error: function () {
}
});
}
This isnt working (undefinied), but if i alert the data.js_skininfo it shows me the correct value.
This is what I am trying to do. On a home page.. say /home.jsp, a user clicks on a link. I read value of the link and on the basis of which I call a RESTful resource which in turn manipulates database and returns a response. Interaction with REST as expected happens with use of JavaScript. I have been able to get information from REST resource but now I want to send that data to another JSP.. say /info.jsp. I am unable to do this.
I was trying to make another ajax call within success function of parent Ajax call but nothing is happening. For example:
function dealInfo(aparameter){
var requestData = {
"dataType": "json",
"type" : "GET",
"url" : REST resource URL+aparameter,
};
var request = $.ajax(requestData);
request.success(function(data){
alert(something from data); //this is a success
//I cannot get into the below AJAX call
$.ajax({
"type": "post",
"url": "info.jsp"
success: function(data){
alert("here");
("#someDiv").html(data[0].deviceModel);
}
});
How do I go about achieving this? Should I use some other approach rather than two Ajax calls? Any help is appreciated. Thank You.
You can use the following function:
function dealInfo(aparameter) {
$.ajax({
url: 'thePage.jsp',
type: "GET",
cache: false,
dataType: 'json',
data: {'aparameter': aparameter},
success: function (data) {
alert(data); //or you can use console.log(data);
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': data},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}
});
}
Or make the AJAX call synchronous:
function dealInfo(aparameter) {
var request = $.ajax({
async: false, //It's very important
cache: false,
url: 'thePage.jsp',
type: "GET",
dataType: 'json',
data: {'aparameter': aparameter}
}).responseText;
$.ajax({
url: 'info.jsp',
type: "POST",
cache: false,
data: {'oldValorFromFirstAjaxCall': request},
success: function (info) {
alert(info); //or you can use console.log(info);
$("#someDiv").html(info);
}
});
}
In this way I'm using.
"type": "post" instead of type: 'post'
Maybe it will help. Try it please. For Example;
$.ajax({
url: "yourURL",
type: 'GET',
data: form_data,
success: function (data) {
...
}
});
How to pass an additional data with form serialize data on ajax post method?.
below is my code which was using for ajax post,
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frm.serialize(),
success: function (data) {
alert(data);
}
});
});
here, how to pass a additional_data with serialize form data
From jQuery API DOCS
The .serializeArray() method creates a JavaScript array of objects
The .serialize() method creates a text string in standard URL-encoded notation.
I think to use push , we need to use serializeArray
try to use
var frmData = frm.serializeArray();
frmData.push({name: "name", value: "test"});
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frmData,
success: function (data) {
alert(data);
}
});
});
You need to push the elements to the existing serialized data.
var frmData = frm.serialize();
frmData.push({name: nameofthevariable, value: valueofthevariable});
frmData.push({name: nameofthevariable2, value: valueofthevariable2});
frmData.push({name: nameofthevariable3, value: valueofthevariable3});
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frmData,
success: function (data) {
alert(data);
}
});
});
serialize() create a query string of the form. So you can append additional parameters into it.
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frm.serialize()+'¶m1='+value1+'¶m2='+value2,
success: function (data) {
alert(data);
}
});
});
serializearray() can be used to send additional parameters. PFB code for sending additional parameters.
var request = $('form').serializeArray();
request.push({name: "kindOf", value: "save"});
Ajax call
$.ajax({
url: "/ST/SubmitRequest",
dataType: "json",
//contentType: "application/json",
type: "POST",
data: request,
//data: r1,
success: function (response) {
//Setinterval();
//alert("Done...!");
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
This AJAX works on jsfiddle
var a = $.ajax({
url: "/echo/json/",
type: "post",
data: {
json: JSON.stringify({
a: true
})
},
dataType: "json"
});
a.done(function (data) {
console.log(data);
});
Why won't it work when I make a the function and return the AJAX promise?
var a = function () {
return $.ajax({
url: "/echo/json/",
type: "post",
data: {
json: JSON.stringify({
a: true
})
},
dataType: "json"
});
}
a.done(function (data) {
console.log(data);
});
Is this not the correct syntax? Well, apparently not, but how can I build the AJAX request into the function? FIDDLE
Since a is a function, you have to call it:
a().done(function(data) {
console.log(data);
});