Populating webpage from clicking a product link

Question

I have a template webpage that i need to populate with data from a database. That is easy enough. However the problem comes from the means of getting there. I have a list of stock items on a site. I would like to be able to generate a webpage with more detailed information when a customer clicks on the product image. That's the problem I have no idea where to start. I have hundreds of products so i only want one file which i can link to and generate the content on that page

another added difficulty is that i can only use the following languages: HTML, PHP, Javascript, and possibly AJAX (however i have no experience with using AJAX). I realise these are the most used, however i am more skilled at others :(

Any help is very much appreciated

Bull

@Bull it has to be easy. Create an handler for the click event wherein you are using javascript to create a view showing the details you want to show. It should not be tough to be materialised — Rupam Datta, Dec 06 '13 at 10:55
well i would prefer to use jquery but im not allowed (that is the one i am most skilled in)... Matt Ellen - i would but I have hundreds of products so i only want one file which i can link to and generate the content on that page — Adam, Dec 06 '13 at 10:55
first took details form database and convert it into an array. Pass the id to array and match the id value using json — CJ Ramki, Dec 06 '13 at 10:55
refer this http://stackoverflow.com/questions/19905702/how-to-pass-php-value-from-one-file-to-another-through-java-script — CJ Ramki, Dec 06 '13 at 10:57
Works by passing the id as a form post using the image a submit button. The product id is set as a default value and is then hidden by style tags — Adam, Dec 06 '13 at 11:37

score 0 · Answer 1 · answered Dec 06 '13 at 11:12

I've did a quick sample code for you. I expect it will help kick start your problem fixing.

Fiddle

$(document).delegate('.see-details','click',function(){
    //Create a view and populate the view with the returned data
    var view=$('<div/>', {'class':'detail-view'});
    view.text(getDetails($(this).attr('data-id')));
    //Atach the view to the dom. Here, I used body tag as the parent.
    $('.detail-view').remove();
    $('body').append(view);
});


var getDetails=function(id){
    var data=id;
    //make ajax call and return the data
    return data;
};

Populating webpage from clicking a product link

1 Answers1