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>
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);
});
}
<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>