Question

I’m using this slide show in my asp.net mvc project.

When I put the mock up data in my page it worked well, but when I change it to dynamic JSON data that I take from my controller, It didn’t work.

This is the simple html that I put as simple :

 <ul class="ei-slider-large">
     <li>
        <img src="../../Product/760557822400.jpg" alt="image05" style="margin-top: 2.467px;"/>
        <div class="ei-title">
           <h2>
              <span class="productName">Dell Lat E6320 Core W7P 13.3"HD BT WC</span>
              <span class="productPrice">$110.00</span>
           </h2>
           <h3>
              <span class="productSpec">

              <br />
              Dell Latitude E6320<br />
              Processor (2.8GHz, 4M Cache)<br />

              ....
              </span>
              <span style="position:relative; left:-20px; top: -21px;"><a href="#" id="readmore">Read more</a></span>
           </h3>
      </div>
    </li>
    //there are 5 <li> in this <ul>
   </ul>

This is the thumbnail of the slide :

   <ul class="ei-slider-thumbs" style="position:relative; left:-12px;">
         <li class="ei-slider-element">Current</li>
         <li><a href="#"><span style="font-weight:bold;">DELL</span> <br /> Lat E6320 </a></li>
         <li><a href="#"><span style="font-weight:bold;">SONY</span> <br /> Lat E6320 </a></li>
         <li><a href="#"><span style="font-weight:bold;">LENOVO</span> <br /> Lat E6320 </a></li>
         <li><a href="#"><span style="font-weight:bold;">ACER</span> <br /> Lat E6320 </a></li>
         <li><a href="#"><span style="font-weight:bold;">APPLE</span><br /> Lat E6320 </a></li>
   </ul>

Now I changed the simple data to use the my dynamic data :

 function itemSlideShow(_pictureName10,_name,_price,_notes,_id,_depID,_catID) {
    var dotString = "";
    if (_notes.length < 120) {
       dotString = "";
    } else {
       dotString = " <br/> ....";
    }
    var listSlide = '<li>' +
                '<img src="../../Product/' + _pictureName10 + '" alt="Product" width="135px"/>' +
                '<div class="ei-title"><h2>' +
                '<span class="productName">' + TrimString(_name, 80) + '<br /></span>' +
                '<span class="productPrice"> $' + formatCurrency(_price) + '</span></h2>' +
                '<h3><span class="productSpec"><br />' + TrimString(_notes, 120) + dotString + '<br /></span>' +
                '<span style="position:relative; left:-20px; top: -21px;">' +
                '<a href="Products/ProductSpec/' + _id + '?dep=' + _depID + '&cat=' + _catID + '&tab=2" style="text-decoration:none;" id="readmore">Read more</a></span></h3></div>' +
                '</li>';

   return listSlide;
 }

 var smallLi = "";
 var url = '<%: Url.Content("~/") %>' + "Home/GetNewProduct";
 $.getJSON(url, function (newProduct) {
        var contentNewProduct = $("ul.ei-slider-large");
        var smallNewProduct = $("ul.ei-slider-thumbs");
        $.each(newProduct.ja, function (index, data) {
            var smallLi = $('<li><a href="#"><span style="font-weight:bold;">' +
                                            TrimStringAddNewLine((TrimString(data.Name, 12)).toUpperCase()) +
                                            '</span><br />' +
                                            '</a></li>');
            contentNewProduct.append(itemSlideShow(data.PictureName10,data.Name,data.Price,data.Notes,data.ID,data.DepartmentID,data.CategoryID));
            smallNewProduct.append(smallLi); 
      });
  });

When I used this jquery to append data instead of loading data static, the slide getting stuck by the loading panel of the slide show.

Could anyone tell me, how was I wrong in here?

Thanks in advanced.

Answer 1

Try initializing the slideshow after all the content has been loaded.

I would expect to see a $(selector).eislideshow({...}); statement inside the $.getJASON() block, immediately after the end of the $.each(...); block.