href on some buttons when redirects to the page does not detect css

[emmapabale]

Why are some pages when redirected when button clicked does not detect the kendo css and all other scripts as well? What Am I doing wrong?

here is my code.


JumpTo.html


<script>
    
    getCategories();
    
</script>

<div class="CouponMainDiv" data-role="page">
    <div data-role="header" id="searchdiv" role="banner">
          <h1 role="heading" id="couponheader">Coupons: Jump To...</h1> 
          <a id="backbutton" href="Coupons.html" data-role="button">Back</a>
       </div>
   </div>

<div class = "jumptocontent" data-role="content">
    
    <ul id="category-list" data-role="listview" data-style="inset">
    </ul>
    
</div>


<div data-role="footer">
                <div data-role="tabstrip">
                   <a href="index.html" data-role="button" class="footerbutton">Coupons</a>
                   <a href="index.html" data-role="button" class="footerbutton">My Wallet</a>
                   <a href="index.html" data-role="button" class="footerbutton">My Rewards</a>
                   <a href="index.html" data-role="button" class="footerbutton">Checkout</a>
                </div>
</div>

couponevents.js

function getCoupons()
{    
    console.log("SOAFDGHISELAGHLASHGLSAHNGLSIHGIOGHDSFLBHNASLDGKNASL;GHSLVNASDLGHSWGLSDG");
    
    var results = "";
    //var page = 1;
    var colorctr = 0;
    
    $.post("http://kupongi-beta.azurewebsites.net/Ajax/AvailableCoupons",{page:1},function(data){
      
      //  alert(data.item[0].ID);
        
       if ($(".coupondiv").size() > 0) {
        var colorCnt = $(".coupondiv").last().attr("class");
        colorctr = parseInt(colorCnt.split("couponcolor")[1]) + 1;
    }
    
        
        
      for (x = 0; x < data.item.length ; x++)
      {
          
          
          if (colorctr > 5) colorctr = 0;
          
        results +=  "<div id= '" + data.item[x].ID + "' class='coupondiv couponcolor"+colorctr+"'>" +
                    "<div class='indcoupon'>" +
                        "<img class='couponimg' onError='this.onerror=null;this.src=\"styles/Imgs/logo.png\"; ' src= '" + data.item[x].Img + "' />" +
                        "<span class='couponexp'>Exp. 12/31/13</span>" +
                    "</div>" +
                    "<div class='coupondescription'>" +
                        "<h3>" + data.item[x].Name + "</h3>" +
                        "<p>" + data.item[x].Description + "</p>"+
                    "</div>"+
                    "<div class='shares'>" +
                        "<img class='shareicon' src='styles/Imgs/icon_share.png'/>" +
                        "<img class='shareicon' src='styles/Imgs/icon_wallet.png'/>" +
                    "</div>" +
                "</div>";
         
          
          colorctr = colorctr + 1;
      }  
        $(".couponsdiv").append(results);
       
        
    });
    
}

function getCategories()
{     
       var categories = "";
       var currentcategory = "";
    
    $.post("http://kupongi-beta.azurewebsites.net/Ajax/GetCouponCategories",{opt:"all"}, function(data){
        
        $("#category-list li").remove();
        
        for (x = 0; x < data.length ; x++)
        {
            currentcategory = data[x].Name;
            categories += " <li><a class='categorylist-a' data-action='"+data[x].Name+"' id='"+data[x].CategoryID+"' href = 'Coupons.html'>"+ currentcategory.split(" (")[0]; +"</a></li>";
        }
        $("#category-list").append(categories);
        
    });
}

Coupons.html


<script>
     
     $(document).ready(function(){
         
        getCoupons();
         
         
     });
 </script>   
<!--HEADER DIV-->

<div class="CouponMainDiv" data-role="page">
    <div data-role="header" id="searchdiv" role="banner">
          <h1 role="heading" id="couponheader">Coupons</h1>
          <input type="text" id="txtSearch" value="Search" />
          <a id="jumptobutton" href="JumpTo.html" data-role="button">Jump To...</a>
          
       </div>
   </div>



<!--CONTENT DIV-->       
<div data-role="content" class="couponsdiv">
   
</div>
        
   
<!--FOOTER DIV-->  

    <div data-role="footer">
                <div data-role="tabstrip">
                   <a href="index.html" data-role="button" class="footerbutton">Coupons</a>
                   <a href="index.html" data-role="button" class="footerbutton">My Wallet</a>
                   <a href="index.html" data-role="button" class="footerbutton">My Rewards</a>
                   <a href="index.html" data-role="button" class="footerbutton">Checkout</a>
                </div>
            </div>

[Ivan K. Ivanov]

Hello Emma,

I already suggested you a solution a day ago on the following link:

http://www.icenium.com/resources/forums/icenium-graphite-/mobile-css-not-detected-on-some-html-pages

Please find at the very end of the post an updated version of my first answer to you. Doesn't that resolve the problem?

 

Regards,
Ivan K. Ivanov
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.

[emmapabale]

Yes it did. Thank you very much!