Develop Reference

Charts in Dashboard should update after form submission

I am showing default charts on my dashboard and there is a form also and I want to update/filter the charts after the form submission.
Js code:
$(document).ready(function() {
$.ajax({
url: (contextPath + "/setting/dashboard"),
success: function(result){
drawLineChart()
}
}
});
$("#chartupdate").submit(function(e){
e.preventDefault();
var form = $(this);
var url = form.attr('action') ;
$.ajax({
url: url,
type: "POST",
data: form.serialize(),
success: function(data){
console.log("form" + data);
}
}) ;
}); });

A bracket inline 9 was preventing the execution of .submit function. Remove the bracket
$(document).ready(function() {
$.ajax({
url: (contextPath + "/setting/dashboard"),
success: function(result){
drawLineChart()
}
});
$("#chartupdate").submit(function(e){
e.preventDefault();
var form = $(this);
var url = form.attr('action') ;
$.ajax({
url: url,
type: "POST",
data: form.serialize(),
success: function(data){
console.log("form" + data);
}
}) ;
});
});

How to make a search with jquery and the wikipedia API

I have read a lot of posts, old, new and the wikipedia documentation.
I have this request that works itself and in the sanbox:
https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=einstein&format=json
https://www.mediawiki.org/wiki/Special:ApiSandbox#action=query&format=json&list=search&srsearch=einstein
but when I try to use it in a javascript script, I can not get the data:
I tried both ajax and Json:
here is the code I used:
a 'GET' request with ajax :
code markup sucks
function build_wiki_search_url(pattern) {
var base_url = "https://en.wikipedia.org/w/api.php";
var request_url = "?action=query&format=json&list=search&srsearch=";
var url = base_url + request_url + pattern;
return url;
}
$(document).ready(function() {
$("#doit").click(function() {
console.log("Submit button clicked");
var pattern = $("#search").val();
var url = build_wiki_search_url(pattern);
console.log(url);
$.ajax( {
type: "GET",
url: url,
dataType: 'jsonp',
success: function(data) {
console.log(data);
},
error: function(errorMessage) {
console.log("damnn");
}
});
console.log("end");
});
})
a 'POST' request with ajax following the wikipedia documentation
var base_url = "https://en.wikipedia.org/w/api.php";
$.ajax( {
contentType: "application/json; charset=utf-8",
url: base_url,
data: {
action: 'query',
list: 'search',
format: 'json',
srsearch: 'einstein',
origin: '*',
},
dataType: 'json',
type: 'POST',
success: function(data) {
console.log("ok");
// do something with data
},
error: function(errorMessage) {
console.log("damnn");
}
} );
and a getJSON try:
//getJSON atempt.
console.log(url + '&callback=?');
$.getJSON(url + '&callback=?', function(json) {
console.log("ok");
});
Here is the output in my console:
Submit button clicked
https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=einstein
script.js
end

The problem comes in fact from the html:
<form >
<input type="text" id="search"> <button id="doit"> Search!!</button>
</form>
Since the button is in a form, this button normal behavior is to generate a submit action. So the idea is to disable this normal behavior with:
$("#doit").click(function(e) {
e.preventDefault();
The full working code :
function build_wiki_search_url(pattern) {
var base_url = "https://en.wikipedia.org/w/api.php";
var format = "&format=json";
var request_url = "?action=query&format=json&list=search&srsearch=";
var url = base_url + request_url + pattern;
return url;
}
$(document).ready(function() {
$("#doit").click(function(e) {
e.preventDefault();
console.log("Submit button clicked");
var pattern = $("#search").val();
var url = build_wiki_search_url(pattern);
$.ajax( {
type: "GET",
url: url,
dataType: 'jsonp',
success: function(data) {
console.log(data.query.searchinfo.totalhits);
},
error: function(errorMessage) {
console.log("damnn");
}
});
});
})

Ajax not being called in javascript function

In the success function I want to call a function. The problem is that ajax does not fire, so the data is never triggered and display. Here is my ajax call with a javascript function call in the success function.
$.ajax({
type: "POST",
url: "./api/login.php",
data: dataString,
cache: false,
success: function(data){
if(data){
//FUNCTION CALL WHEN USER LOGGING IN
retrieveUserBlogData();
window.location = "api/home.php";
}else{
$('.alert').show();
}
}
});
function retrieveUserBlogData(){
$.ajax({
type: "GET",
url: 'retrievePostData.php',
data: "",
dataType: 'json',
success: handleData
});
}
function handleData(data) {
alert(data);
var blog_file = data[3];
$('#imageDiv')
.append('<img id="blog_img" src="upload/' + blog_file + '"><br>');
}
I cant figure out why the ajax in the retrieveUserBlogData() function is not being triggered.
Any help would be appreciated Thanks.

Even if the AJAX succeeds, you are redirecting the browser to a different page after the first AJAX request:
window.location = "api/home.php";
So I would suggest removing that.

Try the following code for redirecting to another window
window.location.assign(URL);
then it may work.

Try it like this
$.ajax({
type: "POST",
url: "./api/login.php",
data: dataString,
cache: false,
success: function(data){
if(data){
//FUNCTION CALL WHEN USER LOGGING IN
retrieveUserBlogData();
}else{
$('.alert').show();
}
}
});
function retrieveUserBlogData(){
$.ajax({
type: "GET",
url: 'retrievePostData.php',
data: "",
dataType: 'json',
success: function(data){
alert(data);
var blog_file = data[3];
$('#imageDiv')
.append('<img id="blog_img" src="upload/' + blog_file + '"><br>');
window.location = "api/home.php";
}
});
}

Can I call ajax function inside another ajax function? [duplicate]

Is it possible to make an ajax request inside another ajax request?
because I need some data from first ajax request to make the next ajax request.
First I'm using Google Maps API to get LAT & LNG, after that I use that LAT & LNG to request Instagram API (search based location).
Once again, is this possible, and if so how?
$('input#search').click(function(e) {
e.preventDefault();
var source = $('select[name=state] option:selected').text()+' '+$('select[name=city] option:selected').text()+' '+$('select[name=area] option:selected').text();
var source = source.replace(/ /g, '+');
if(working == false) {
working = true;
$(this).replaceWith('<span id="big_loading"></span>');
$.ajax({
type:'POST',
url:'/killtime_local/ajax/location/maps.json',
dataType:'json',
cache: false,
data:'via=ajax&address='+source,
success:function(results) {
// this is where i get the latlng
}
});
} else {
alert('please, be patient!');
}
});

Here is an example:
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page=' + btn_page,
success: function (data) {
var a = data; // This line shows error.
$.ajax({
type: "post",
url: "example.php",
data: 'page=' + a,
success: function (data) {
}
});
}
});

Call second ajax from 'complete'
Here is the example
var dt='';
$.ajax({
type: "post",
url: "ajax/example.php",
data: 'page='+btn_page,
success: function(data){
dt=data;
/*Do something*/
},
complete:function(){
$.ajax({
var a=dt; // This line shows error.
type: "post",
url: "example.php",
data: 'page='+a,
success: function(data){
/*do some thing in second function*/
},
});
}
});

This is just an example. You may like to customize it as per your requirement.
$.ajax({
url: 'ajax/test1.html',
success: function(data1) {
alert('Request 1 was performed.');
$.ajax({
type: 'POST',
url: url,
data: data1, //pass data1 to second request
success: successHandler, // handler if second request succeeds
dataType: dataType
});
}
});
For more details : see this

$.ajax({
url: "<?php echo site_url('upToWeb/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function (data) {
if (data.web == 0) {
if (confirm('Data product upToWeb ?')) {
$.ajax({
url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
type: "post",
dataType: "json",
data: {web: 1},
success: function (respons) {
location.href = location.pathname;
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
}
}
else {
if (confirm('Data product DownFromWeb ?')) {
$.ajax({
url: "<?php echo site_url('upToWeb/set_web/')?>/" + data.id_item,
type: "post",
dataType: "json",
data: {web: 0},
success: function (respons) {
location.href = location.pathname;
},
error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
alert(xhr.responseText); // munculkan alert
}
});
}
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error get data from ajax');
}
});

JSP AJAX return NULL

i using JQuery Ajax to call REST api in jsp but it return null no matter how i call but it can work in html. is there any way to solve this problem. Cant seem to find a solution in the net.
$(document).ready(function () {
alert('ready');
var accessKey = 'xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi';
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'application/json',
success: function (data) {
alert('data is:' + data.GetToken[0].NewToken);
}
});
alert(thisUrl);
});

dataType should be jsonp
$(document).ready(function () {
var thisUrl = 'http://www.onemap.sg/API/services.svc/getToken?accessKEY=' + accessKey;
$.ajax({
type: "GET",
url: thisUrl,
dataType: 'jsonp',
success: function (data) {
console.log(data)
alert('data is:' + data.GetToken[0].NewToken);
}
});
});

Refer to this article:
http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/
You only need "jquery.xdomainajax.js" that is there in the sample source-code to make it work.
$.ajax({
url: 'https://asdf/asdf',
dataType: "xml",
type: 'GET',
success: function(res) {
var myXML = res.responseText;
alert(myXML);
}
});