$ .ajax does not give the specified error and does not run PHP script
I am using $ .ajax in my PHP code. I can log the submitted data and display it with console.log
, but when it reaches $ .ajax. It stops showing the specified error or url status. This is how I call the javascript function.
<div class="tagfav price" onclick="addfavourite(<?php echo $row_all_ad['skopeo_annonce_immo_id']; ?>,<?php echo $_SESSION['user']['id'];?>)"></div>
this is my javascript function.
function addfavourite(id_annonce,id_user){
var formData = "skopeo_user_id="+id_user+"&skopeo_annonce_immo_id="+id_annonce;
console.log(formData);
$.ajax({
url: "assets/test.php",
data: formData,
type: "POST",
success: function(data, html) {
console.log('added to favourite');
return false;
}
});
}
php file used in url ajax property launched in nav. It only has this line of code used to test the issue right now.
<?php die('test'); ?>
The specified error is not displayed. although it does display the POST url issue, Firebug also does not show the url status issue. My function stops when it reaches ajax.
It also doesn't display the second one console.log
.
EDIT
this is what i showed in firebug as you can see i am getting my data with no problem
source to share
Instead of using inline JS, you can actually store the data you want to pass to your function in HTML5 attributes data-
:
<div class="tagfav price" data-annonce-immo-id="<?php echo $row_all_ad['skopeo_annonce_immo_id']; ?>" data-user-id="<?php echo $_SESSION['user']['id'];?>"></div>
After that listen for the click event on .tagfav.price
. If the item is dynamically added, you may want to listen for the event event bubbles instead document
. The values stored in the HTML5 data attribute can be accessed via .attr()
or .data()
, but I personally prefer the former as the latter doesn't work well for dynamically changing attributes data-
- it might not be the case in your application, but it's great. .data()
retrieves an HTML5 data attribute at runtime and does not update the object if the DOM changes.
For the AJAX call, we can eliminate it by using deferred objects and promises, for example .fail()
, .done()
etc. to see what's really going on. Function .fail()
, which receives 3 arguments: jqXHR
, textStatus
and errorThrown
. In the code below, your AJAX call will log an error message to the console if something went wrong.
$('.tagfav.price').click(function() {
// Construct data object
var formData = {
'skopeo_user_id': $(this).attr('data-user-id'),
'skopeo_annonce_immo_id': $(this).attr('data-annonce-immo-id')
};
// Make AJAX call
var $fav = $.ajax({
url: 'assets/test.php',
data: formData,
dataType: 'JSON', // Optional, jQuery intelligently guesses but good to have
type: 'POST'
});
// Check AJAX status using deferred objects and promises
$fav.done(function(data, html) {
console.log('added to favourite');
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus + ': ' + errorThrown);
});
});
Also, some helpful pointers to check:
- Is your PHP script
assets/test.php
set to receive data using$_POST
? You can check it out. - Is the same script repeating a JSON encoded string to be sent back to your script after the AJAX call? If so, use
dataType: 'JSON'
in your function$.ajax()
.
source to share
You have to add single quotes around the parameters in the javascript function callback.
Othrewise, javascript will treat your arguments as javascript keywords like: this
So change:
<div class="tagfav price" onclick="addfavourite(<?php echo $row_all_ad['skopeo_annonce_immo_id']; ?>,<?php echo $_SESSION['user']['id'];?>)"></div>
For
<div class="tagfav price" onclick="addfavourite('<?php echo $row_all_ad['skopeo_annonce_immo_id']; ?>','<?php echo $_SESSION['user']['id'];?>')"></div>
source to share
try it
function addfavourite(id_annonce,id_user){
var formData = "skopeo_user_id="+id_user+"&skopeo_annonce_immo_id="+id_annonce;
console.log(formData);
$.ajax({
url: "./assets/test.php",
data: {formData:formData},
type: "POST",
success: function(data) {
console.log(data);
return false;
}
});
}
and in php
<?php echo($_POST['formData']); ?>
the output should be your formData p>
source to share