Develop Reference

Getting a partial response from a lQuery ajax request for progress bar?

I call a php page using an ajax request, then the php page calls a python script and the python script writes percentage of work done in a txt file and of course calculates what is needed.
From my code it is only possible to acess the txt file after the ajax request is done but this doesn't make sense as it is always 100%.
How would i read data if the txt with the progress is lets say: http://domain.com/progress.txt durring the request.
$.ajax({
xhr: function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', "http://domain.com/pr.txt", true);
xhr.send();
var pro_perc = xhr.responseText;;
alert(pro_perc);
move1(pro_perc);
return xhr;
},
type: "POST",
url: "http://domain.com/req.php",
data: reqdata,
cache: false,
success: function(html) {
var values = html.split('[mydata]');
var mydata = values[1];
});

Actually you can find your answer here
JQuery ajax progress via xhr
or you can use this
var interval;
$.ajax({
beforeSend: function(){
interval = setInterval(function(){
$.get("http://domain.com/pr.txt").done(function(progress){
console.log(progress)
})
},10);
},
type: "POST",
url: "http://domain.com/req.php",
data: reqdata,
cache: false,
success: function(html) {
clearInterval(interval);
var values = html.split('[mydata]');
var mydata = values[1];
}
});

Can't read JSON data correctly by $.each jquery

I am trying to use $.getJSON to get data from the NHTSA recall API and append the Component object from the Results array to a div with the id="data". Here is the URL I am trying to get JSON for:
http://www.nhtsa.gov/webapi/api/Recalls/vehicle/modelyear/2000/make/honda/model/accord?format=json
Here is the snippet that I am using:
`var url = 'http://www.nhtsa.gov/webapi/api/Recalls/vehicle/modelyear/2000/make/honda/model/accord?format=json';
$.getJSON( url, function(data) {
console.log(data.Results);
$.each(data.Results, function(i,Results){
var component = this.Component;
$('#data').append('<h4>' +component+ '</h4>');
}
}
I have used this similar format for a few other API's and it worked so I am not sure why the call isn't going through.

I ran into a cross origin request problem using $.getJSON (as I often do), so I tried jsonp and succeeded. Please give it a try and let me know if you have questions.
$(document).ready(function() {
var http = 'http://www.nhtsa.gov/webapi/api/Recalls/vehicle/modelyear/2000/make/honda/model/accord?format=json';
$.ajax({
url: http,
dataType: 'jsonp',
jsonpCallback: "callback",
type: "GET",
success: function (data) {
var div = $('#data');
for(var i = 0; i < data.Results.length; i++) {
$(div).append('<div>' + data.Results[i].Component + '</div>');
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data"></div>

Store current page data in a variable, in the same format/structure as an Ajax html response

I'm storing/saving my History Ajax call responses in an array (jQuery). So on ajax load success I store the response data in an array so I can use it and apply/clone later on (for js side cache).
page_cache = [];
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function (data) {
var $response = $(data);
page_cache[url] = $response;
}
});
So far so good, BUT now I need the equivalent of the ajax call response data, but on the current page so that I can stor/save it already on page load.
But struggled finding a way..
Been trying:
page_cache[url] = $('html').data();
... but no luck..
Any suggestions?

If you want the entire page in the variable, you can use it:
var $html = $('html').clone();
$html.find('body').html($response);
page_cache[url] = $html;
Regards.

you can try like this
var page_cache =[];
$.ajax({
type: 'get',
dataType: 'html',
success: function (data) {
page_cache[url] = data;
$('html').html(data);
}
});
for searching:
$('html').html(page_cache[url]);
for current page html:
url = window.location;
page_cache[url] = $('html').html()

Did you tried to get the body part with $('body').html(); ?
You can save the html with page_cache[url] = $('body').html();
and get it back with $('body').html(page_cache[url]);

Merging Javascript AJAX requests

I have a performance problem when loading a website over the network stored on an internal server. The performance issue is down to the multiple AJAX requests made in my Javascript file constantly trying to access an XML file and then getting an Image from a XML node or a Name from an XML node.
Is there a way I can merge the AJAX requests together to reduce the amount of requests from the client device to the XML file stored on the server.
My code is as below:
function getimage(getID,XMLImageID)
{
$("#" + getID).empty();
$.ajax({
type: "GET",
url: "XML/XML.xml",
dataType: "xml",
success: function(xml){
$(xml).find(XMLImageID).each(function(){
var image = $(this).find("image[href]").attr("href");
$('#'+ getID).append($("<img"+" class="+"Timages"+" src=\"" +image+"\"/>"));
});
},
error: function() {
alert("(getImage) An error occurred while processing XML file. Reasons could be: \n The XML cant be located. \n The XML is being used by another program. \n The XML is trying to parse incompatible characters. \n The XML syntax/tags are incorrect.");
}
});
}
function getdept(getid,XMLID)
{
var scriptTag = document.scripts[document.scripts.length - 1];
var parentTag = scriptTag.parentNode;
getid = parentTag.id;
$.ajax({
type: "GET",
url: "XML/XML.xml",
dataType: "xml",
success: function(xml){
$(xml).find(XMLID).each(function(){
var dept = $(this).find('Dept').text();
var id = $(this).attr("id");
var sName = $(this).find('Name').text();
$("#"+getid).append('<div class="Team_People" onmouseover="area_hover1(this);area_hover2(this)" href="#p'+id+'">'+dept+'<br />'+sName+'</div>');
});
},
error: function() {
alert("(getHierPeopleDept)An error occurred while processing XML file. Reasons could be: \n The XML cant be located. \n The XML is being used by another program. \n The XML is trying to parse incompatible characters. \n The XML syntax/tags are incorrect.");
}
});
}
The AJAX response uses a simplified code below, I just need to merge the code above to make it more neater rather than having multiple ajax requests. Not sure if this is possible (whether adding multiple parameters would work)?
$.ajax({
type: "GET",
url: "XML/XML.xml",
dataType: "xml",
success: function(xml){
$(xml).find(XMLID).each(function(){
//Get something from XML node
});
},
});
}
If anyone could guide me in the right direction that would be much appreciated!
Thanks
Regards
AJ

Create a global XML variable and query that with your function calls...
var XML = null;
function fetchXML(){
$.ajax({
type: "GET",
url: "XML/XML.xml",
dataType: "xml",
success: function(data){
XML = data;
},
error:function(){ alert('something went wrong');})
}
function getImage(id) {
$(XML).find(id).each(){ ... };
}
funcition getDept(id) {
$(XML).find(id).each(){ ... };
}

Getting JSON response from the server but can't display as HTML with Jquery

I'm building a mobile app and i build a PHP API that renders data from a mysql db and encode it as JSON
i call this api with Jquery ajax to get to display the records from the json output as JSONP and render it in my document in the success function.
so far i get the JSON correctly when i do the request via $.ajax and i can see the data in the Response in my firebug but in the other side the ajax function fires the ERROR not the Success.
i have a demo code in here :jsfidle
this is my $.ajax Call:
$(document).on("pageinit","#myPage", function() {
$("#autocomplete").on("listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
var dataString = 'keyword='+value;
if (value.length > 2 ) {
$.mobile.loading("show");
$.ajax({
type: "GET",
url: "http://example.com/search.php",
dataType: "jsonp",
jsonpCallback: 'jsonpCallback',
cache:true,
data: dataString,
success: function(data) {
$.mobile.loading("hide");
alert(data);
}
})
}
});
});
if you check the net panel you 'll find it successful and there is data coming.
Kindly Advise.
Thanks A lot

Your response is not including the callback jsonpCallback() in the response, the response I'm seeing is simply
({"name": ... })