AJAX jQuery and NyroModal

On my quest to build a GAP style play Best Buy Remix site, I came across the challenge of mimicking the "Quick Look". So yes, the first thought of mine was jQuery and how can I make this happen since I'm slowly loosing my desire to learn/program with PHP. A plain HTML page is great. No framework needed to serve it up (yes I understand jQuery is a framework, but no special server is require to make it happen).

Since we use jQuery and NyroModal at work, that was my first direction. Of course I stumbled a bit (well no need to elaborate) and I looked around for some other modal options. I came across jQuery Tools, which had a cool modal feature, tabs, and some other useful things.

After still suffering from a brain freeze, I visited my favorite jQuery for Designers Web site and struck out. So now I was forced to think. So I hunkered down and figured it out. Had to figure out how to code w/o using Google for once. LOL. Building off the AJAX call I did in the previous Remix post, i just added an onclick function to the image.

<a href="#"><img onclick="buildJerry(\''+this.sku+'\');" src="+this.image+" /></a>

In my build jerry function, i start an empty array and build a URL with the passed in SKU value from the function. Nothing fancy here. Add another AJAX call and using the .push() you can build the modal contents. Once you get the array built, make a manual call with NyroModal and set the content equal to the array and use the .join().

Here is the code.

function buildJerry(str) {

var struc = [];

var URL = "http://api.remix.bestbuy.com/v1/products(sku="+str+")?apiKey={YourAPIKey}&format=json&callback=?";
 $.ajax({
 type: "GET",
 url: URL,
 cache: true,
 success: function(obj) {
  $.each(obj.products, function(i,products) {
   struc.push("<ul id="CssProductUL">");
    struc.push("<li class="CssProductImage"><img src="http://www.blogger.com/+this.image+" /></li>");
    struc.push("<li class="CssProductName">Name: "+this.name+"</li>");
    struc.push("<li class="CssProductSKU">sku: "+this.sku+"</li>");
    struc.push("<li class="CssProductRegularPrice">regularPrice: "+this.regularPrice+"</li>");
   struc.push("</ul>");
    
  }); // end find/each loop
   
 $.nyroModalManual({      
    content: struc.join(''); 
   }); 

 },
 error: function(data) {
  alert("error");
 },
 dataType: 'json'
}); // end of ajax call

 

} // end BuildJerry Function