I am currently working on a project, in which I am getting some data using ajax jQuery. I am using the following code:
$.ajax({
dataType : 'html',
type: 'POST',
url : url,
//cache: false,
data : data,
complete : function() { },
success: function(data)
{
$('#servicelist').hide();
$('#stafflist').show();
data=$(data).find('div#stafflistcontent');
$('#stafflist').html(data);
}
});
When I am trying to alert the data at the very first line of ajax success,it is returning the complete HTML of the page, now I am going to find the <div id="stafflistcontent">. In Firefox and Chrome it is returning the correct HTML but in IE its returning only OBJECT OBJECT, How can I resolve this issue?
Edit
IE version : IE8
jQuery Version : 1.9.1
$(data).find('div#stafflistcontent') returns a jQuery object, not "data" (what ever you mean with that). .html() takes a string as it's parameter, so that shouldn't work like way.
Instead of
$('#stafflist').html(data);
use
$('#stafflist').empty().append(data);
If that doesn't work you'll need to show your HTML and exactly what your AJAX call returns.
replace:
$('#stafflist').html(data);
with:
$(data).html().appendTo('#stafflist');
or:
$("<p></p>").append($(data).html()).appendTo('#stafflist');
Related
I am using the following code:
$.ajax( {
url: "http://www.earthquakescanada.nrcan.gc.ca/api/earthquakes/latest/7d.json",
dataType: 'json',
success: successHandler
} );
var successHandler = function ( data ) {
console.log( data );
}
For some reason and only in Safari, the "location" property for the objects returned are stripped out. Can anyone explain why and suggest a solution?
It's not a jQuery or $.ajax problem, but the json resource you are trying to get, has a kind of user agent controller.
Try to open the url in Chrome and then in Safari, you will see two different json files from the same url http://www.earthquakescanada.nrcan.gc.ca/api/earthquakes/latest/7d.json
You could also try using $.getJSON(...) instead of $.ajax(...), since that will get you the parsed json object in your data variable
I am calling the JS function cancelAppointment on button click, I can confirm that the function is running okay as the first alert is shown.
I have followed many guides to try and get this to work but they are yielding no results.
At the moment the success message is not being showed and the row is not being deleted. I can confirm the PHP script works fine.
the function is as below:
<head>
<script>
//Making the call to ajax this is encased in a function so it is not called pre-maturely
function deleteAppointment()
{
jQuery(document).ready(function(){
alert("Trying to run!");
$.ajax({
type : "POST",
url : "http://www.website.com/delete_appointment.php",
//data : "",
success : function(response) {
//Success
alert("Deleted");
}
});
});
}
</script>
For the moment, until I get the ajax to work the PHP contains PDO, that will delete from both the Appointments & AppointmentLines table with an ID of 1000. I will parse this in once this first part works.
In Wordpress the jQuery library included in the noConflict() mode, so the global $ shortcut for jQuery is not available, see more details here.
To make it work change $ to jQuery:
function deleteAppointment()
{
jQuery.ajax({
type : "POST",
url : "http://www.website.com/delete_appointment.php",
success : function(response) {
alert("Deleted");
}
});
}
You need to define what response the Ajax method is expecting to receive.
Make the response either 'text' (as shown in the example bellow) or make the response 'json'. You just add 'dataType: "text"' as a setting to the ajax call.
$.ajax({
type : "POST",
url : "http://www.website.com/delete_appointment.php",
dataType : "text",
success : function(response) {
//Success
alert("Deleted");
}
});
Currently you're your success method is waiting for the value of "response" to be returned however you are not defining what it is.
EDIT: I was corrected that it should be dataType not data for the setting I was originally talking about.
I found the answer,
Because I was using wordpress you must use jQuery in place of $ I needed to wrap this in a DOM function with $ defined so that jQuery would understand $
I kept the data argument commented in the end.
This issue was caused due to wordpress requiring slightly different syntax when calling a jQuery function. Thanks for your help everyone.
I can’t just use .load() because I’m building a custom loading bar that’s actually truthful about the percentage that has currently been loaded (yes that’s actually possible): http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
I’ve got the loading bar working now but I need to replicate the following jQuery functionality inside the .ajax() function so I can append the #ajaxContent stuff to the .ajaxContainer div once it’s finished loading:
$('.ajaxContainer').load('/path/to/file.php #ajaxContent')
The equivalent would be:
$.ajax('/path/to/file.php'/*,{extra: settings}*/).done(function (response) {
$('.ajaxContainer').html($("<div>").append( $.parseHTML( response ) ).find( '#ajaxContent' ));
});
I think is quite simple to provide a simple answer, I prefer to illustrate you the procedure for retrieve yourself.
If you read the docs of .load() on jQuery site you read:
This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success)
If you read the docs about .get() you read:
This is a shorthand Ajax function, which is equivalent to:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
Where dataType
dataType Type: String The type of data expected from the server.
Default: Intelligent Guess (xml, json, script, or html).
So in your case you must fill the html element with data from success callback like this:
$('.ajaxContainer').html(response);
my question is very simple. I have drafted the code as follow for showing the loading image when the form is being posted. The loading image can be shown properly. However, it cannot hide automatically after the result is returned. May i know what is the error?
HTML
<div id="loading"></div>
Ajax
function email_subscribe(){
$('#loading').html('<img src="loading.gif"> loading...');
$.ajax({
type: 'post',
url: 'index.php?subscribe',
dataType: 'html',
data:$("#subscribe").serialize(),
success: function (html) {
$('#loading').html();
eval(html);
}});
}
You're just calling the .html() method without any parameters (which serves as a getter). To achieve what you're looking for here, you need to at least pass in like an empty string to set and overwrite existing content.
$('#loading').html('');
I also think you should not use eval....
...and yes call .html() with an argument like:
$('#loading').html(" ");
or
$('#loading').html(" ");
I have a Javascript application and I need to retrieve an HTML file to template it. The way I am doing this now is:
var _$e = null;
$.ajax({
type: "GET",
url: "/static/jobs_overview.html",
async: false,
dataType: "xml",
success: function (xml) {
_$e = $(xml.documentElement);
}
});
This does seem to work, but for some reason, I am not getting a proper jQuery object in _$e. I know that because the styling is done by jQuery is getting lost at some point, but also, when I set a breakpoint in success, here is what I see:
> _$e
[<div class="hello" style="background-color:#FFD700;height:200px;width:100px;"><p> Hi </p></div>]
> _$e.width()
TypeError: Cannot read property 'position' of null
However, when I copy the HTML string manually and convert it to a jQuery object as in success, the output is:
> $('<div class="hello" style="background-color:#FFD700;height:200px;width:100px;"><p> Hi </p></div>').width()
100
Seems like the xml object returned isn't getting converted properly into jQuery (or not all attributes of the object are being read properly by jQuery -- given that the HTML is rendering but styling isn't).
The xml object is:
> xml
#document
<div class="hello" style="background-color:#FFD700;height:200px;width:100px;">…</div>
Any ideas how to get the xml (or the HTML file) rendered as a jQuery object properly?
Could it be because you're grabbing the datatype XML? Have you tried setting your datatype to HTML (or nothing) and just do this (ignoring the .documentElement and just assuming the whole glomp is your HTML):
$.ajax({
type: "GET",
url: "/static/jobs_overview.html",
async: false,
dataType: "html",
success: function (data) {
_$e = $(data); // we are getting back HTML,
console.log(_$e.width()); // jQuery is fine with html globs
}
});
This is likely because you are pulling it in as XML. Try setting the dataType to html and see if that makes any difference.
It also sounds like .load() might better fit your needs: http://api.jquery.com/load/