I'm fetching images from SharePoint REST API and writing the calls along with HTML into an HTML doc.
Specifically a Bootstrap Modal Carousel.
I'm getting all the images and content writing to some tiles. The problem are the images in the Modal.
The user clicks on an icon, the Modal fires, the first image in the Carousel displays but it won't navigate next/previous, even though the HTML is being written for each one.
Here's the HTML:
<div class="container">
<!-- GLOBAL NAVIGATION -->
<div class="row">
<div class="col-md-12">
<script type="text/javascript" src="/js/nav.js"></script>
</div>
</div><!-- /end global nav -->
<!-- TILE WRAPPER -->
<div class="row bgTexture bgTexture2 ">
<div class="col-md-12">
<!-- TOP ROW OF TILES -->
<div class="row aoTilesTopWrapper">
<h2>TITLE GOES HERE</h2>
<!-- ///////// BOOTSTRAP ROTATOR -->
<div class=" col-md-12 allModals">
</div><!-- /end allModals -->
</div>
<!-- ///////// end bootstrap modal -->
</div><!-- /end row - top row -->
<!-- BOTTOM ROW OF TILES -->
<div class="row aoTilesBottomWrapper">
<!-- BOTTOM ROW TILES GO HERE -->
</div><!-- /end row - bottom row -->
</div><!-- /end col-md-12 -->
</div><!-- /end main row -->
</div><!-- /end container /content -->
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" charset="utf-8"></script>
<script src="/js/custom.js" charset="utf-8"></script>
<script src="/js/add-ons.js" charset="utf-8"></script>
<script>
// Select third list item
var liToSelect = 7;
$(".nav.nav-pills li:eq("+(liToSelect-1)+")").addClass("active");
$(document).ready(function(){
addOns();
});
$('.carousel').carousel({
pause: true,
interval: false
});
</script>
JS/Ajax:
function addOns(){
$.ajax({
async: false,
url: "/_api/lists/getByTitle('Products')/items",
type: "GET",
headers: { "Content-Type": "application/json;odata=verbose", "Accept": "application/json;odata=verbose" },
success: function (data) {
$.each(data.d.results, function () {
var itemID = this.Id;
// Image tiles
var aoTiles = "<div class='col-sm-4 tile' data-imageID='" + this.Id + "'><span class='openRotator' data-toggle='modal' data-target='.itemID" + this.Id + "'><a href='#'><img src='/media/new-window-icon.png' width='20'/></a></span><div class='tileImg'><img src='" + this.Tile_x0020_Thumbnail_.Url + "'/></div><div class='tileTitle'>" + this.Title + "</div><div class='tilePrice'>" + this.Content_x0020_Starting_x.toFixed(2) + "</div></div>";
$(".aoTilesTopWrapper").append(aoTiles);
// Modal
$(".allModals").append("<div class='modal fade bs-example-modal-lg itemID" + this.Id + "' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel' aria-hidden='true'><div class='modal-dialog modal-lg'><div class='modal-content'><div id='carouselId" + this.ID + "' class='carousel slide' data-ride='carousel'><!-- Wrapper for slides --><div id='carousel' class='carousel-inner'><!-- Gallery images go here --></div><!-- Controls --><a class='left carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='prev'></a> <a class='right carousel-control' href='#carouselId" + this.Id + "' role='button' data-slide='next'></a></div></div></div></div>");
// Carousel divs002
$.each(this.Carousel_x0020_Image_x002.split(";"), function () {
$(".modal.itemID"+ itemID +" .carousel-inner").append("<div class='item'><img src='" + this + "'/></div>");
});
});
},
error: function (data) {
alert(data.statusText);
}
});
return true;
}
Any idea why the carousel images aren't sliding?
You're going to laugh. The first <div class="item"> needed the .active class in order for it to work.
Duh!
Related
I have a UL on my page which is acting as navigation (it works fine). I copied some jQuery code to keep the classes as they are on page reload (through location.reload()) but can't set it up as I don't know much javascript.
and my HTML code :
<!-- TABS NAVIGATION -->
<div id="tabs-nav">
<div class="row">
<div class="col-lg-12 text-center">
<ul id="myTab" class="tabs-1 ico-55 red-tabs clearfix">
<!-- TAB-1 LINK -->
<li class="tab-link current" data-tab="tab-1">
<span class="flaticon-pizza"></span>
<h5 class="h5-sm">Pizze</h5>
</li>
<!-- TAB-2 LINK -->
<li class="tab-link " data-tab="tab-2">
<span class="flaticon-burger"></span>
<h5 class="h5-sm">Panini</h5>
</li>
</ul>
</div>
</div>
</div>
<!-- END TABS NAVIGATION -->
<!-- TABS CONTENT -->
<div id="tabs-content">
<?php include_once "inc/db_connect.php"; ?>
<!-- TAB-1 CONTENT -->
<div id="tab-1" class="tab-content current">
<table class="editableTable sortable">
<!-- sql query -->
</table>
</div>
<!-- END TAB-1 CONTENT -->
<!-- TAB-2 CONTENT -->
<div id="tab-2" class="tab-content">
<div class="row">
<!-- database query -->
</div>
</div>
<!-- END TAB-2 CONTENT -->
</div>
<!-- END TABS CONTENT -->
the way I intend to use location.reload
$(document).ready(function () {
$('.editableTable').SetEditable({
onAdd: function () {
$.ajax({
type: 'POST',
url: "action.php",
dataType: "json",
data: { action: 'add' },
success: function () {
location.reload();
},
});
}
});
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).class('current'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab li[href="' + activeTab + '"]').tab('show');
}
});
Saving $(e.target).class('current') won't work. There is no .class() method...
It seems you wish to use the href to open the tab... But there is no href!
So I think you should use the data-tab.
$(document).ready(function(){
console.log("Page just loaded")
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $("li.current").data('tab')); // Change is here -- Save the data-tab value
console.log("a data-tab value was saved to localStorage")
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
console.log("There is an activeTab value stored:" , activeTab)
// Loop all li to find the one having a data-tab == activeTab
$('#myTab li').each(function(){
if($(this).data("tab") === activeTab){
$(this).tab('show');
}
});
}
})
I´m trying to add a button which sends me to another HTML File inside the for each LOOP but my problem is once i add something new into the loop it doesn´t display any of the products anymore // "customize product"+ is the code that i´m trying to add but somehow it doesn´t work
This is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Produkte</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Honig GmbH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<h1 class="my-4">Produkte
<small>Übersicht</small>
</h1>
<a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
<br/>
<!-- Content -->
<div id="ArtikelContainer" class="row">
</div>
<!-- /.container -->
<br/>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Honig GmbH 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="javascript/jquery/jquery.min.js"></script>
<script src="css/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$( document ).ready(function() {});
console.log("Ready");
// var currentId = sessionStorage.getItem('customerId');
$.ajax({
type: "GET",
url: "http://localhost:8081/api/artikel/",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result){
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item){
console.log(result[i].beschreibung);
console.log(result[i].name);
$("#ArtikelContainer").append(
"<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>"+
"<div class='card h-100'>"+
"<a href='#'><img class='card-img-top' src='"+result[i].bildpfad+"' height='200' width='140'></a>"+
"<div class='card-body'>"+
" <h4 class='card-title'>"+
"<a href='#'>"+result[i].name+"</a>"+
"</h4>"+
"<p id=artikel"+ result[i].artikelId + " class='card-text'>Artikelnummer: "+result[i].artikelId+"</p>"+
"<p class='card-text'> Beschreibung: "+result[i].beschreibung+"</p>"+
"</div>"+
// I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+
" </div>"+
"</div>"
);
});
},complete: function(xhr, statusText){
//alert(xhr.status);
console.log(xhr.status + ": " + "Home - Completed!");
},error: function(xhr, errMsg) {
if(xhr.status==401){
alert(xhr.status + ": " + "Benutzername oder Passwort ist ungültig");
}
}
});
function btn_click() {
artikelId: $('#artikelId').val();
// var artikelnummer = sessionStorage.setItem("artikelId");
document.location = index.html;
alert(artikelnummer);
}
function url(){
document.location = 'http://somewhere.com/';
}
</script>
</body>
so everytime I add anything into the loop all my products disappear
I´m gladful for any help and any help is appreciated, I have been stuck a while on this now
As was mentioned, you can only use certain quotes inside of quotes. For example, if you define a String with double quotes ("), then inside, you must use single quotes (') and vice-versa.
Take a look:
$(function() {
console.log("Ready");
var result = [{
beschreibung: "Text 1",
name: "Name 1",
bildpfad: "Source 1",
artikelId: 1
}, {
beschreibung: "Text 2",
name: "Name 2",
bildpfad: "Source 2",
artikelId: 2
}, {
beschreibung: "Text 3",
name: "Name 3",
bildpfad: "Source 3",
artikelId: 3
}];
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item) {
var content = "";
content += "<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>";
content += "<div class='card h-100'>";
content += "<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>";
content += "<div class='card-body'>";
content += "<h4 class='card-title'><a href='#'>" + item.name + "</a></h4>";
content += "<p id='artikel" + item.artikelId + "' class='card-text'>Artikelnummer: " + item.artikelId + "</p>";
content += "<p class='card-text'> Beschreibung: " + item.beschreibung + "</p></div>";
content += "<a class='btn btn-primary' href='product_create.html'>customize product</a>";
content += "</div></div>";
$("#ArtikelContainer").append(content);
});
/*
var currentId = sessionStorage.getItem('customerId');
$.ajax({
type: "GET",
url: "http://localhost:8081/api/artikel/",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
console.log("Artikel wurde übertragen");
console.log(result);
$.each(result, function(i, item) {
console.log(result[i].beschreibung);
console.log(result[i].name);
$("#ArtikelContainer").append(
"<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>" +
"<div class='card h-100'>" +
"<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>" +
"<div class='card-body'>" +
" <h4 class='card-title'>" +
"<a href='#'>" + result[i].name + "</a>" +
"</h4>" +
"<p id=artikel" + result[i].artikelId + " class='card-text'>Artikelnummer: " + result[i].artikelId + "</p>" +
"<p class='card-text'> Beschreibung: " + result[i].beschreibung + "</p>" +
"</div>" +
// I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+
" </div>" +
"</div>"
);
});
},
complete: function(xhr, statusText) {
//alert(xhr.status);
console.log(xhr.status + ": " + "Home - Completed!");
},
error: function(xhr, errMsg) {
if (xhr.status == 401) {
alert(xhr.status + ": " + "Benutzername oder Passwort ist ungültig");
}
}
});
*/
function btn_click() {
artikelId: $('#artikelId').val();
// var artikelnummer = sessionStorage.setItem("artikelId");
document.location = index.html;
alert(artikelnummer);
}
function url() {
document.location = 'http://somewhere.com/';
}
});
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Honig GmbH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Heading -->
<h1 class="my-4">Produkte
<small>Übersicht</small>
</h1>
<a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
<br/>
<!-- Content -->
<div id="ArtikelContainer" class="row">
</div>
<!-- /.container -->
<br/>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Honig GmbH 2018</p>
</div>
<!-- /.container -->
</footer>
Hope that helps.
I have the following divs with special attributes that I am selecting with jQuery
<div data-tab-name="Description">
<!-- content -->
</div>
<div data-tab-name="Video">
<!-- content -->
</div>
<div data-tab-name="Reviews">
<!-- content -->
</div>
I am then taking those divs and turning them into individual Bootstrap tabs (& nav-tabs) and attempting to set the first tab-pane & nav-tab to active. This is the result:
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#description">Description</a>
</li>
<li>
<a data-toggle="tab" href="#video">Video</a>
</li>
<li>
<a data-toggle="tab" href="#reviews">Reviews</a>
</li>
</ul>
<div class="row tab-content">
<div class="tab-pane fade in active" id="description">
<!-- Content -->
</div>
<div class="tab-pane fade" id="video">
<!-- Content -->
</div>
<div class="tab-pane fade" id="reviews">
<!-- Content -->
</div>
</div>
Whenever I run the code it structures it as I intended, which is what w3school's boostrap tab example shows (Dynamic Tabs), but multiple tabs are staying active when I switch between them which prevents them from being clicked twice.
What would I need to do to make it behave as it normally does when entering the html for the tabs directly? https://codepen.io/BBell/pen/RBLmEr
I'm not sure why stacksnippet is showing a script error, but it continues to show even if I remove the JS (http://recordit.co/8mazS35U9r). Here is a backup codepen that worked better for me:
https://codepen.io/BBell/pen/VBzJXz
$(document).ready(function() {
function cssEncode(name) {
return name.replace(/ /g, "-").toLowerCase();
}
var dataAttr = "data-tab-name";
var tabDivs = $("div[" + dataAttr + "]");
var navTabs = $('<div class="nav nav-tabs">');
var tabContent = $('<div class="tab-content" id="tabs"></div>');
var tabs = [];
var tabPanes = [];
tabDivs.each(function(e) {
var name = $(this).attr(dataAttr);
var encodedName = cssEncode(name);
tabs.push(
'<li><a data-toggle="tab" href="#' +
encodedName +
'">' +
name +
"</a></li>"
);
var tabPane = $(
'<div class="tab-pane fade" id="' + encodedName + '"></div>'
).append($(this).html());
tabPanes.push(tabPane);
$(this).detach();
});
navTabs.append(tabs.join(""));
tabContent.append(tabPanes);
var tabsContainer = $('<div class="tabs"></div>');
tabsContainer.append(navTabs);
tabsContainer.append(tabContent);
$(".iseo-item-page .col-md-12").append(tabsContainer);
$(".nav-tabs a:first").tab("show");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row iseo-item-page">
<div class="col-md-12">
<div data-tab-name="Description">
Content 0
</div>
<div data-tab-name="Video">
Content 1
</div>
<div data-tab-name="Reviews">
Content 2
</div>
</div>
</div>
</div>
The main issue is that when you do it dynamically like you do the li elements all get class of active but it should be only one active. Look # the example your provided as a working one inspect element on the tabs ... you will see that once you select a an tab/li it would get the active class and the previous one would loose it. In your example that class gets set to all so you can't again click on them.
Here is a working version with basically going around bootstrap js:
$(document).ready(function() {
function cssEncode(name) {
return name.replace(/ /g, "-").toLowerCase();
}
var dataAttr = "data-tab-name";
var tabDivs = $("div[" + dataAttr + "]");
var navTabs = $('<div class="nav nav-tabs">');
var tabContent = $('<div class="tab-content" id="tabs"></div>');
var tabs = [];
var tabPanes = [];
tabDivs.each(function(e) {
var name = $(this).attr(dataAttr);
var encodedName = cssEncode(name);
tabs.push(
'<li><a data-toggle="tab" href="#' + encodedName + '">' + name + "</a></li>"
);
var tabPane = $(
'<div class="tab-pane fade" id="' + encodedName + '"></div>'
).append($(this).html());
tabPanes.push(tabPane);
$(this).detach();
});
navTabs.append(tabs.join(""));
tabContent.append(tabPanes);
var tabsContainer = $('<div class="tabs"></div>');
tabsContainer.append(navTabs);
tabsContainer.append(tabContent);
$(".iseo-item-page .col-md-12").append(tabsContainer);
$('a[data-toggle="tab"]').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass("active");
$('li').not(this.parentNode).removeClass('active')
$('.iseo-item-page div').removeClass('active in')
$(this.hash).addClass('active in')
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row iseo-item-page">
<div class="col-md-12">
<div data-tab-name="Description">
Content 0
</div>
<div data-tab-name="Video">
Content 1
</div>
<div data-tab-name="Reviews">
Content 2
</div>
</div>
</div>
</div>
I want to continuously fade 2 pieces of content in and out of the same position. Currently the fade in fade out works but the content is below the other content and they are both viewable when the document loads.
To put it simply the content will keep switching between #fade1 and #fade2.
HTML:
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="opactiy:0">test</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
JS:
$(document).ready(function () {
// runs fade code for homepage content
fadeThem();
}
// fades content in and out on homepage
function fadeThem() {
$("#fade1").fadeOut(3000, function() {
$("#fade2").fadeIn(2000, fadeThem());
$("#fade2").fadeOut(2000, fadeThem());
$("#fade1").fadeIn(2000, fadeThem());
});
}
Why don't you put your code in : $( window ).load(function() {} ;
Something like this :
$( window ).load(function() {
// -- Snipped -- //
$(".right-image-crm").addClass('right-image-up');
$(".left-image-crm").addClass("left-image-up");
$(".center-image-crm").addClass("center-image-up");
$(".loader").fadeOut(1000,function(){
}
});
Working Code (JS Fiddle): http://jsfiddle.net/nfdebmen/4/
You can have any Number of PlaceHolders in this code. I have made 4.
var _toggle = {
totalNodes: null,
lastNode: 0,
duration: 1000,
init: function () {
_toggle.totalNodes = $(".toggle").length;
_toggle.next();
},
next: function () {
var nextNode = _toggle.lastNode + 1;
if (nextNode >= _toggle.totalNodes) {
nextNode = 0;
}
//
$(".toggle:eq(" + _toggle.lastNode + ")").fadeOut(_toggle.duration, function () {
$(".toggle:eq(" + nextNode + ")").fadeIn(_toggle.duration);
_toggle.next();
});
_toggle.lastNode = nextNode;
}
}
$(document).ready(function () {
_toggle.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p class = "toggle active">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p class = "toggle" style = "display: none;">test</p>
<p class = "toggle" style = "display: none;">Ahsan</p>
<p class = "toggle" style = "display: none;">http://aboutahsan.com</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
Try using .fadeToggle()
$(document).ready(function() {
var p = $("p[id^=fade]");
function fadeThem() {
return p.fadeToggle(3000, function() {
fadeThem()
});
}
fadeThem();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="display:none">test</p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- text slider -->
When I click on RSS items in my mobile app, I would like to see same page footer as I have in my first page. I've created my app using Cordova 4.3.0, jQuery mobile and read RSS feeds using jQuery in my onDeviceReady() function in index.js file as follow:
onDeviceReady: function () {
$(function () {
$.get('http:myRssUrl.cshtml',function(data) {
var $XML = $(data);
var html = '';
$XML.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text(),
enclosure: $this.find("enclosure").attr('url'),
};
html +=
'<a class="result-link" title=" " style="text-decoration: none" href="' + item.link + '" style="font-size: 11px" >' +
'<div class="result-image">' +
' <figure>' +
'<img src="' + item.enclosure + '" style="display: block;"></img>' +
'</figure>' +
'</div>' +
'<div class="alltext" style="padding-right: 5px;">' +
'<h3 class="result-title">' + item.title +'</h3>' +
'<div class="result-description">' + item.description +'</div>' +
'</div></a>'
});
jQuery('#result').html(html);
});
});
app.receivedEvent('deviceready');
}
I also have my footer navigation bar in footer.html file which will be loaded in index.html file as follows:
<script>
$(document).on('pageinit', "#index", function (event, ui){
$("#" + event.target.id).find("[data-role=footer]").load("pages/footer.html", function(){
$("#" + event.target.id).find("[data-role=navbar]").navbar();
});
});
</script>
<body>
<div data-role="page" class="app" id="index">
<div data-role="header" data-position="fixed" data-id="main-header" id="header">
<div data-role="navbar" class="ui-btn-active ui-state-persist">
<ul>
<li>
</li>
<li></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content" data-theme="d" id="deviceready">
<div id="result" data-role="listview">
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="main-footer" id="footer">
</div><!-- /footer -->
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
My problem is that I can't load my page footer navbar in my RSS pages, I saw some relevant examples about it and applied different approaches, but still have the same problem.