Something strange is going on with an Ajax call I'm making and I can't figure out why its happening, maybe someone can shed some light.
This is the call
$.ajax({type:'POST', url: apiURL+"misc/"+cola, headers: {'apikey':localStorage.apiKey}, dataType: 'html', success:function(data) {
$("#pagina").html(data);
postCarga("pagina");
}, error: function() {
sinConexion();
}});
Now, this should take the "data" received from Ajax and fill div#pagina with it, but the div stays empty.
Here's the strange part, I called console.log(data) to see if the data is getting through and then it not only logs to the console but properly fills in the div#pagina with the returned data.
If I just try to fill it in directly, the div stays empty, but if I do anything beforehand (even something like var xxx = data;), it gets filled in correctly.
I worked around it by moving the filler function into postCarga so my final code looks like this:
$.ajax({type:'POST', url: apiURL+"misc/"+cola, headers: {'apikey':localStorage.apiKey}, dataType: 'html', success:function(data) {
postCarga(data,"pagina");
}, error: function() {
sinConexion();
}});
,but that feels strange.
// EDIT //
Here's the whole function
function postCarga(datos,que) {
$("#"+que).html(datos).animate({top:'0%'},350,'ease-in',function() { $("#cargando").css("display","none"); });
}
,originally, all it did was animate and then hide the loader, the html(datos) is part of my fix.
Ok, I just found the reason. I was testing out different things by side-stepping the received data and just trying $("#pagina").html("Hello") and other things, after all of those worked I went trough the html returned by the Ajax call and that's where I found the answer.
I changed the return from the API to send just
<h1>Hello</h1>
and it worked fine, afterwards I manually built up the whole HTML string until I had a carbon copy of what the script generated, sometimes it would load and sometimes not, which was stranger still.
I passed the returned HTML through various lints and checkers and only one of them returned an error, one of the images in the block returned a 404, so I removed that image (and only that image) from the returned HTML and it loaded fine.
In essence, it seems that when Ajax is set to html (dataType: 'html'), each and every thing - direct or remote - in the entire block must be valid html and return a success when called, or it will be silently ignored.
Changing dataType to "text" makes it skip that check and just inject everything into the div as intended.
Related
I have several different ajax calls on the same php page, but I get undefined index for only one function (createAlbum).
I send exactly the same parameters in each of my ajax calls. It worked fine for a few tests, but now it only works for the other ones, but not for this specific call.
I suspected that the .js file was still in the browser cache, so I cleared it and tried with other browsers, which worked for a few more attempts.
Now, I can't get it working on any browser, and definitely don't understand why.
Here is my ajax call :
$.ajax({
type: "POST",
url: BASE_URL,
data: {
action: "createAlbum",
data: JSONAlbum
},
cache: false,
success: callback
});
My php file handling the request ($_POST['action'] is always undefined with the above request) :
if (isset($_POST['action'])) {
switch ($_POST['action']) {
// Handle the action
// ...
}
} else {
echo 'ACTION : '.$_POST['action'];
}
The header containing the ajax parameters ("data" is a json containing one or more blob images, this might be the problem, but I didn't find anything saying so) :
And finally, the response containing the error :
I really hope this is not a dumb error of mine, but I asked a friend before posting, and he can't find the solution either.
Thanks for your help !
You said that the error not happens all the time (in some call yes, in other no).
The body post is sent, you see it in console. So we can exclude javascript problem.
So the problem is something that happens before or during the process.
PHP has some limitations on input vars, you can see it in php.ini.
I see that you send images in base64, so it's probable that something of these limitations are triggered.
See for example:
max_input_time
max_input_vars
post_max_size
When attempting to use the following code:
<script src="lib/jquery-2.0.3.js"></script>
<script>
function readXML()
{
$(document).ready(function(){
$.ajax({
url: "myXML.xml",
type: "GET",
dataType: "xml",
success: function(xml){
alert(xml);
}
});
});
}
</script>
for some reason the code is ignored entirely. When I used the alert() before $.ajax it worked, but for some reason the entire AJAX code within is ignored. Other types of jQuery codes don't work, either. The rest of the code works perfectly fine - everything that has nothing to do with AJAX or jQuery. What am I doing wrong?
Also, when I try adding "complete" or "error" the entire page wouldn't load. When I replace success with done/error I get the exact same result - the code is ignored entirely. I know I'm doing something wrong, but having tried an awful lot of codes from here, I have no idea what else to do. Help?
UPDATE:
error finally did work and got me this result:
"NetworkError: failed to execute send on XMLHttpRequest: failed to load file myXML.xml"
However, I read that's the only way to import xml without loading everything to a server here: Using XML in HTML page without using a server
What am I missing?
I have an app that at some point issues an $http POST to a WEB API project as follows
$http({
method: update ? "PUT" : "POST",
url: framewidth + "inspections",
data: data,
}).then(
function (object) {
toastr.success(Messages.success.dflt);
console.log(object.data);
rtrn.resolve(object);
},
function (error) {
toastr.error(Messages.Error(error.statusText));
rtrn.reject(error);
}
);
It saves fine but after it returns object.data is missing some fields. I have traced the missing fields all the way from the depths of the database to the Fiddler layer and the missing fields are there up until the success function of $http
So I can actually see my missing fields being returned in fiddler but they seem to disappear somewhere between that and console.log(object.data); line above.
I am totally stumped. It seems it's disappearing in the layer that's outside my control.
Put a breakpoint in your success function and look at object there. One thing I've noticed about Chrome's dev tools is that if you console.log an object and then the object changes before you expand it, you might get the changed version rather than what it was at the time of getting logged.
I'm working on a scraper of my bank statements with CasperJS, so far I've managed to login and get to the statements page. I accomplished to get the table with the first page of the statement, but I need to get it complete.
The bank's web have the option to export to a .txt file (sort of a CSV actually), but in order to download it I have to be able to download the file that comes as an attachment in the response header of a POST request when I submit a form by clicking a button.
So I figured that I could do the POST via AJAX, get the response and output it. I tried running the code on the firebug console and it works, but for some reason it just doesn't work in CasperJS.
Btw, I have tried using --web-security=no , still doesn't work
This is how I'm trying to do it:
this.then(function() {
eurl = "http://bankurl.com";
response = this.evaluate(function() {
params = $("#lForm").serialize();
$.ajax({
type: "POST",
url: eurl,
data: params,
success: function (data) {
return data.responseText;
},
error: function (xhr,status,error){
return error;
}
});
});
this.echo(response);
});
I wasn't able to test this with the code you provided, but it looks as though you just aren't returning anything back from the evaluate().
return __utils__.sendAJAX(url, 'POST', params);
You would probably also need to call CasperJS with the following:
casperjs --ignore-ssl-errors=true /path/to/script.js
Well, after struggling finding a way to solve this I finally did, I just put the ajax call inside a try catch and found that the error was that it wasn't reading the eurl variable (I declared it outside the evaluate). I put it inside and it worked. Thanks for your help
Before everyone finds it, this has more or less been asked before: Load remote URL with Greasemonkey and jQuery
However, it was 3 years ago. I tried the various methods presented in the answers and none of them work.
Basically, my problem is this: I'm writing a greasemonkey script that, for right now, is supposed to A) grab a link on a page, B) request the page the link is linking to (it's on the same host), and C) find a certain value on that page. I'm using jQuery 1.7.2 and the latest version of Greasemonkey to try to accomplish this.
The problem is that though I can successfully request the page, I can't do anything with the response. I've tried assigning the response to a variable outside of the callback, but it ends up empty. I've tried appending the response html to a div I inserted on the page, but using console.log on the div shows that it's empty (even though firebug actually shows the html). It's like as soon as the callback ends, the html that was retrieved not only doesn't exist, but didn't ever exist.
So basically, I want to ask how to retrieve the html so that I can actually use it after the request is finished. Here's what I've got right now (I've deleted aforementioned attempts to append the response to a div on the page):
function getLink(url){
var resp;
GM_xmlhttpRequest({
method: 'GET',
url: url,
onload: function(response){
resp = response.responseText;
}
});
console.log(resp) //nothing here...
//failed code :(
/*$.ajax(url, {success: function(data){resp = data})
console.log(data)*/
}
What magic code do I need to write to get the above to work as intended?
GM_xmlhttpRequest() operates asynchronously by default. That means that the onload fires long after the console.log(resp) //nothing here... line.
Although GM_xmlhttpRequest() now takes a synchronous: true parameter, it is very buggy and I do not recommend trying to use it, for now.
The correct way to do things (and better programing and UI practice) is put everything in the onload handler:
function getLink (url) {
GM_xmlhttpRequest ( {
method: 'GET',
url: url,
onload: function (response) {
var resp = response.responseText;
console.log (resp);
// DO EVERYTHING THAT REQUIRES resp HERE.
}
} );
}
This may require changing how you think about certain operations, but it is well worth it.