I am building a webpage that contains a div which holds some data retrieved from a MySql database through PHP. This div shows some products and on its left there is a simple nav bar with different categories. What I am attempting to do is that when the user clicks a category of this nav bar, the content of the div will change, showing the products of that category all of which are stored in the db. So I tried using Ajax (my first time btw), and I can't seem to make it work. My project structure is something like this:
Parent directory
The index.php file is linked to both index.js AND products-ajax.js However, I have already tried including the Ajax line of code in both index.js and index.php but I can't make it recieve data back from products-ajax.php Any help is appreciated.
And here's what my test code looks like:
/* THIS IS THE products-ajax.js */
$(document).ready(function(){
$('.products-list li').click(function(){
$.post("products-ajax.php",
{p: "Product name"},
success: function(data){alert(data)}
);
});
});<?php
/* THIS IS THE products-ajax.php */
$p = $_POST['p'];
echo $p;
?>I realized my broswer's debugger says there's a missing parentheses:
$('.products-list li').click(function(){
//The debugger says HERE v should go a parentheses
$.post("products-ajax.php", {p: "Product name"}, success: function(data{alert(data)});
});
</div>
Using $.ajax() instead of $.post(), you could add an error handler which would give you precious information (maybe you can with $.post(), but I'm not familiar with this function, which afaik is just a shortcut to $.ajax()). It could be something like :
var request = $.ajax({
url: "products-ajax.php",
method: "POST",
data: { p: "Product name" }
});
request.done(function( data ) {
alert( data );
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
Edit: and prefer console.log() rather than alert() for debugging. Especially with asynchronous interactions, alert() sometimes leads to surprises...