Going reusable with data attributes and jquery - javascript

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

how to call function inside ajax call

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()

Javascript get JSON value from URL error

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.

Send data from a javascript ajax function to a jsp

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 a additional data with form serialized data on ajax?

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()+'&param1='+value1+'&param2='+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);
}
});

why does returning the jquery AJAX promise in this function fail to give me the data?

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);
});

Categories

Resources