This chunk of code works fine on FireFox but in IE it gives runtime error when I try to dump the contents from response returned from AJAX response.I am using mootools to make Ajax call.
//on dom ready...
window.addEvent('domready', function() {
/* ajax alert */ <br/>
$('ajax-alert').addEvent('click', function(event) {
//prevent the page from changing
event.stop();
//make the ajax call
var req = new Request({
method: 'get',
url: $('ajax-alert').get('href'),
data: { 'do' : '1' },
onRequest: function() { alert('Request made. Please wait...'); },
onComplete: function(response) {
alert(response);// Getting response and able to see that in alert
/*line underneath fives runtime error in IE , works fine in FireFox */
document.getElementById('myDiv').innerHTML = response;
//this line gives run time error on IE
}
}).send();
});
This is likely to happen when the returned response is not a valid X/HTML. I suggest you validate the page with the response returned in it. As Dimitar Christoff has mentioned, watch out for inline elements containing block elements.
Related
I got strange situation. after when i delete by ajax some row from table, and got button wich reload ajax function (getlist) i got still this row in table, need to reload browser then this row is not any more on list. How to reload list proper to get result after delete row.
<script>
function getlist () {
$('#getlist').html("<center>Pobieram dostępną listę analiz...</center>");
// Do an ajax request
$.ajax({
url: "views/getjoblist.php",
}).done(function(data) { // data what is sent back by the php page
$('#getlist').html(data); // display data
});
}
$('#getlist-reload').on('click', getlist);
getlist();
</script>
in other page I make delete with ajax POST:
<script>
$('.table').on('click', '.delete', function () {
$(this).closest('tr').remove();
job = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'views/delete.php',
data: { jobname : job },
})
});
</script>
This is likely due to the cache. I suggest you set the HTTP header "Last-Modified" in the HTTP response header and the browser will automatically refresh the cache if it older.
I'm using ajax to submit pages and return content blocks based on user action for an onboarding sequence.
If have a page which loads and get 1 content element, the user then clicks Yes or No, which loads the next content element into the same space (via ajax).
For some reason my selectors don't seem to be working on that ajax loaded html.
Here is my ajax function which gets the form:
$.ajax({
beforeSend: function() {
$("#loader").toggleClass('progress');
},
type: 'POST',
dataType: 'json',
data: data,
url: baseUrl+'welcome/user_confirmation_form',
complete: function( response ) {
$("#loader").toggleClass('progress');
},
success: function( response ) {
console.log(response);
$("div.welcome-page > .col").html(response.response);
},
error: function( response ) {
$("#next-steps").html(response.response);
}
});
I'm then trying to access the submit button (have tried doing it as a ahref and button type=submit but nothing seems to be selecting the event.
$('div.welcome-page').on('submit', "user_complete", function(e) {
e.preventDefault();
console.log('FOund form');
var user = $(this).serializeArray();
console.log(user);
});
If I view source, the ajax returned HTML is not even in the dom, but it is when viewing the UI normally.
I'm guessing this has something to do with it?
How can I select all the form data?
Any time I click on the button or ahref it just fires the same page again.
If user_complete is a class you are assigning on your submit button in your loaded html, then you are missing a .
$('div.welcome-page').on('submit', ".user_complete", function(e) {
But this will only work if you're using a submit action as this is listening for a submit event. Maybe you want to listen for a click event?
You need to bind the events to your handlers for your newly added HTML elements. Your original call to
$('div.welcome-page').on('submit' ...
Only bound the event handler for the elements that were on the page at that point in time.
You can put your handler into a function ...
var myHandler = function(e) {
e.preventDefault();
var user = $(this).serializeArray();
}
And then after you load the new HTML you need to bind the handler to the event. So, on success with the AJAX you would ...
success: function( response ) {
$("div.welcome-page > .col").html(response.response);
$('div.welcome-page').on('submit', "user_complete", myHandler);
},
I have a javascript function called when the page loads. It just gets some user data through an ajax call and checks some checkboxes based on the user id's returned.
window.onload=function(){
getBlockedUsers();
}
function getBlockedUsers(){
var deptID = $('deptID').value;
var request_data = 'DeptID='+deptID;
var req = new Request.JSON({
url:'/ajax/getuserData.cfm',
method: 'post',
noCahe: true,
data: request_data,
onSuccess: function(response)
{
var jLength = response.json.length;
for(i=0;i<jLength;i++){
var user_id = response.json[i].id;
if($('user_'+user_id)){
$('user_'+user_id).checked = true;
}
}
},
onFailure: function (xhr)
{
alert('There was an error while trying to fetch data');
},
onException: function (xhr)
{
alert('There was an exception while trying to fetch data');
}
}).send();
}
I keep getting the alert in the onFailure() function for some reason and when I inspect the ajax call, it appears to be aborted. This does not happen all the time. Happens in IE9.
I had the function call within domReady but moved to onload thinking it would help but it's still the same. Any ideas on why this might be happening would really help.
guys. I have a juerymobile multi-page, and I have a button in #page-index, when click it, will send a ajax request to server, and changepage to #page-column, It run will in PC, but when i deploy the multi-page in phonegap, the button click can just run only twice, code is below:
function test()
{
$.mobile.changePage('#page_column');
$.ajax({
url: "http://192.168.168.120:8090/fcmobile/getTest",
dataType: "json"
}).done(function(data) {
alert(data.content);
});
}
I found if I remove $.mobile.changePage('#page_column');, the ajax request can be run well any times. but when I add the changePage code, it only can be run twice, in third time, ajax request can't even be send. Dose anybody know reason?
AJAX is made to be asynchronous, so no need to set async to false to get it working. Use events instead.
For example:
function test () {
$.ajax({
'url': "http://192.168.168.120:8090/fcmobile/getTest",
'dataType': 'json',
'success': function (json_data) {
$(document).trigger('test_json_data_loaded');
console.log(data);
}
});
}
$(document).on('test_json_data_loaded', function () {
$.mobile.changePage('#page_column');
});
When you set async to false, you're basically making it so that every time this AJAX request is made, the user will have to wait until all the data is fully loaded before the application/website can do/execute anything else...not good.
I need to load an image if if hasn't been loaded yet.
For this i'm using the error function like this:
$.ajax({
type: "POST",
url: "inc/functions.php",
data: { productID: productIDVal, action: "addToCart"},
success: function(theResponse) {
busy=false;
$('#buyButton')
.error(function(){
var t = $("<img id='buyButton' src='images/checkout.png' />");
$.append(t);
});
}
});
But it is not working. Am i doing something wrong here?
Thanks in advance.
You need to specify where to append the image:
$('#buyButton').append(t); // NOT $.append(t);
// OR $(this).append(t);
More info here
Some general tips on debugging javascript.
Quick and dirty: Put an alert message on the first line of the error function like alert('inside error'). Then load the page and see if the alert message shows up. You can put variables inside the alert message to see what their values are. If you don't see an alert message it means that the code is not even being loaded for some reason, so you have to put an alert message at an earlier point. (This can get very tedious).
Better way: Start using Firebug or Safari's Web Inspector to debug the javascript. Just put debugger anywhere in your code and when the browser gets to that line of code, it will stop and give you a console with access to all variables and functions available at that point in the code.
The problem may be with the AJAX request. See what it is returning by trying this code:
$.ajax({
type: "POST",
url: "inc/functions.php",
data: { productID: productIDVal, action: "addToCart"},
success: function(data){ alert('success!'); },
error: function(XMLHttpRequest, textStatus, errorThrown){ alert(errorThrown) ;}
})
You can replace the alert messages with debugger to do further inspection of what is going on with Firebug.
you should move the code to error block
remove from the success block
error: function(request,error) {
var t = $("<img id='buyButton' src='images/checkout.png' />");
$(this).append(t);
}
the skeleton goes like this
$.ajax({
},
beforeSend: function() {
},
error: function(request,error) {
var t = $("<img id='buyButton' src='images/checkout.png' />");
$(this).append(t);
},
success: function(request) {
} // End success
}); // End ajax method