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.
Related
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'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!
I have problem with jquerymobile. When i load the same page again, the scripts loads again too and do not work. I would like to load the scripts only once. I use jquerymobile 1.3.2 and jquery 1.9.1. Here is my code.
#using Entry.Net.Web.Model
<div data-role="page" class="jqm-demos ui-responsive-panel" id="table_page" "data-theme="a">
<div data-role="header" data-position="fixed">
<a id="buttonObdobi" data-rel="popup" data-role="button" data-icon="grid" data-theme="a" data-position-to="window" data-transition="pop" data-inline="true">Období</a>
</div>
<div data-role="content">
#*my content*#
</div>
<script type="text/javascript">
$(document).on('pageinit', '#table_page', function () {
Log.Info('$(document).on(pagecreate, #table_page)');
$("#buttonObdobi").off("click").on("click", function () {
Log.Info('buttonObdobi click');
var model = $.parseJSON('#Html.Raw(Json.Encode(Model))');
var popup = '<div data-role="popup" id="popupMenuObdobi" data-theme="c">' +
'<a id="closePopup" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>' +
'<ul id="ulObdobiTable" data-role="listview" data-inset="true" style="min-width: 210px;" data-theme="a">';
$.each(model.ListObdobi, function (i, val) {
popup += '<li><a id="' + val + '">' + val + '</a></li>';
})
popup += '</ul></div>';
var popupafterclose = popupafterclose ? popupafterclose : function () { };
$.mobile.activePage.append(popup).trigger("create");
$.mobile.activePage.find("#closePopup").bind("tap", function (e) {
$.mobile.activePage.find("#popupMenuObdobi").popup("close");
});
$.mobile.activePage.find("#popupMenuObdobi").popup().popup("open").bind({
popupafterclose: function () {
Log.Info('bind popupafterclose');
$(this).unbind("popupafterclose").remove();
popupafterclose();
}
});
$('#ulObdobiTable a').off('click').on('click', function () {
$.mobile.changePage("#table_page", {
transition: "slide",
allowSamePageTransition: true,
data: { obdobi: $(this).attr('id'), ucet: '#Model.Account', type: '#Model.AccountType' }
});
});
});
});
</script>
Can you tell me what I'm doing wrong? Thank you very much!
I was hoping not to ask this question yet since I decided to read more and do more research but at the moment I am not getting much far with it.
This is my code:
function listPosts(data) {
var $count = data.count;
var limitposts = 5;
var $output = $('<ul class="posts" data-role="listview" data-filter="true">')
$.each(data.posts,function(i, val) {
console.log(i);
if (i<limitposts && i>=0) {
var $post = $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('');
$output.append($post).appendTo('#postlist');
i++;
// return (i !== 4);
}});
}
HTML
<!-- Page: home -->
<div id="home" data-role="page" data-theme="d" data-title="My first App">
<div data-role="listview">
Display Messages
</div><!-- links -->
</div><!-- page -->
<div id="devotion" data-role="page" data-title="My first App">
<div data-role="header" data-theme="a" data-position="fixed"> <h2>Devotional Messages</h2></div><!-- header -->
<div data-theme="d" data-role="listview" id="postlist"> </div><!-- content -->
<div class="addMorePosts">Load More Posts...</div>
</div><!-- page -->
<script src="http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=listPosts" type="text/javascript"></script>
I initially limited the number of Posts displayed by using the Return statement. I now changed it to For statement to see if I can increment the number of Posts displayed by the click of a button.
At this stage I am trying to figure out the best logic to use. I have tried to add another Function to achieve this but no luck. Still reading and researching but was hoping for guidance or good example
function addMorePosts ( data, offset, amount ) {
var $postsList = $('#postlist'),
posts = data.slice(offset, amount);
$.each(posts, function ( index, post ) {
$postsList.append(
'<li>' +
'<h3>' + post.title + '</h3>' +
'<p>' +
post.excerpt +
'' +
'</p>' +
'</li>'
);
});
}
JSFiddle: http://jsfiddle.net/V4Ucv/2/
each time I click on a Post link I want the Title of the Post to appear on the Header page. See screen shot
As seen, I would like the 'Devotional Message' replaced by the Post Title...
HTML Code:
<div id="devotionpost" data-role="page">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Devotional Message</h1>
Devotion
</div><!-- header-->
<div data-role="content">
<div id="mypost"> </div>
</div><!-- content -->
</div><!-- page -->
JS Code:
function showPost(id) {
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
});
function showPost(id) {
$("#devotionpost h1").html("");// to empty previous title
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
$("#devotionpost h1").html(data.post.title);// by this 'Devotional Message' replaced by the Post Title..
});