I have a php file that searches for a keyword in a MySQL database table. This script builds a page with a lot of products organized by brands… When you click a product it shows a bootstrap modal with more info (calling another php file that looks for the particular id of the product). The modal has two buttons and needs to be able to go to the previous and the next product of that brand and this buttons should be disable when reaching the first or last product.
This is what I’ve been doing: While inserting the data from the products in the page I generate an XML file with all the brands and inside each brand, all the ids of the DIVs corresponding to the product. Then I have to build arrays in Javascript to handle this data. The code is getting really messy so I’ve been wondering: What’s the best way to link all the products so I can go back and forward in my modal?
I ended up building something like this:
<div id='231' data-brand='somebrand' data-brand-index='3'>
then i can get the id with jquery:
var x = $("div[data-brand='somebrand'][data-brand-index='2']");
alert(x.attr("id")); //shows 231