When a certain image is clicked I want to add some content to a different page using jQuery. I have a generic page called product.php and on this page the content to be added depends on which image it is clicked on the home page (home.php). On product.php I am trying to add the content on a div with the id of #product.
But when the image is clicked it redirects to the unmodified page of product.php. Is there a way to redirect to the product.php page after the wanted content is loaded?
$('.product img').click(function () {
// it gives the right index
var index = $( ".product img" ).index( this );
// it works well
var myProduct = 'snippet-product'+ (index + 1)+'.php';
$( "#product" ).load( myProduct );
// it redirects to the 'product.php' without the new content
window.location.href = 'product.php';
return false;
});
I don't know if i understand your question but you need to redirect with a location like: window.location.href = 'product.php?product=' + index; as @lharby said, and then change your PHP code catching the $_REQUEST["product"] and make a switch or an if to show content based on $_REQUEST["product"] value.
Your "initial question" was:
If you reload the page (or change the location), all your content loaded with jQuery disappears. Do you know what i mean?
I really don't know what you want.
Do you want only to change the URL but don't reload the page? Please explain a bit more what you want to acomplish.
Sorry for my English...
You can send the specific product information to the 'product.php' page in the url as a query string:
window.location.href = 'product.php?index=' + index; // <-something like this
Then on you PHP use $_GET['index'] to return the index of the product:
if (isset($_GET['index']))
$productIndex = $_GET['index'];
Then use $productIndex in the PHP script to find and generate the appropriate content to display.