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
- php > index.php
- css > index.css
- js > index.js
- img > images here
- ajax> products-ajax.js / products-ajax.php
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>
