I am trying to learn Jquery mobile and it seems to have some issues. Based on this I am trying to expand the example and do more things. So I have two lists and each list has some items. By clicking on an item I want to inject another html file (exercise.html) to show it but the injection doesn't work. Below is my code.
exercises.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<script src="categoryData.js"></script>
</head>
<body>
<div data-role="page" id="exercises-page" class="type-interior">
<script src="categoryData.js"></script>
<div data-role="header" data-position="fixed" data-id="appHeader">
<h1>Lists</h1>
</div><!-- /header -->
<div data-role="content" >
<h4>Choose an item</h4>
<ul id="item_category" data-role="listview" data-inset="true"></ul>
</div>
</div><!-- /page -->
</body>
categoryData.js
(function($) {
var categoryData = {
list1 : {
name : "List1",
items : [{
name : "l1_item1",
level : "level1"
}, {
name : "l1_item2",
level : "level1"
}, {
name : "l1_item3",
level : "level2"
}, {
name : "l1_item4",
level : "level2"
}]
},
list2 : {
name : "List2",
items : [{
name : "l2_item1",
level : "level1"
}, {
name : "l2_item2",
level : "level1"
}, {
name : "l2_item3",
level : "level2"
}]
}
};
$(document).ready(function() {
var exercise_category = $('#item_category');
var iHtml = '';
for (var x in categoryData) {
category = categoryData[x];
iHtml += '<li>' + category.name + '<ul data-inset="true">';
iHtml += '<h4 data-role="content" >Choose an item</h4>';
// The array of items for this category.
cItems = category.items;
// The number of items in the category.
numItems = cItems.length;
for (var i = 0; i < numItems; i++) {
iHtml += '<li><a href=exercise.html#item-page?title=' + cItems[i].name + '>' + cItems[i].name + '</a></li>';
}
iHtml += '</ul>';
};
iHtml += '</ul></li>';
exercise_category.html(iHtml).listview('refresh');
});
// Listen for any attempts to call changePage().
$(document).bind("pagebeforechange", function(e, data) {
console.log('BEFORECHANGE');
// We only want to handle changePage() calls where the caller is asking us to load a page by URL.
if ( typeof data.toPage === "string" ) {
var u = $.mobile.path.parseUrl( data.toPage );
var re = /^#item-page/;
if (u.hash.search(re) !== -1) {
showExercise(u, data.options);
e.preventDefault();
}
}
});
function showExercise(urlObj, options) {
var categoryName = urlObj.hash.replace( /.*title=/, "" );
var catna = $.trim(categoryName.replace('_', ' '));
var category = categoryData[ categoryName ],
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
if (catna) {
var $page = $( pageSelector ),
// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),
// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" );
$header.find( "h1" ).html( "pass something to change the Title" );
$page.page();
options.dataUrl = urlObj.href;
$.mobile.changePage( $page, options );
}
}
})(jQuery);
exercise.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<script src="categoryData.js"></script>
</head>
<body>
<div data-role="page" class="type-interior" id="item-page" style="text-align: center;">
<script src="categoryData.js"></script>
<div data-role="header" data-position="fixed" data-id="exerciseHeader">
<h1>Title</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Image</h2>
<div class="article">
<p><img src="" alt="...">
</p>
</div>
</div>
</div><!-- /page -->
</body>
I want to pass content to the of the header of the exercise.html and in the . Any idea why it doesn't work? It always shows the title that I have defined in the html.
Related
I have a csv file which contains items scraped from a supermarket website. I have now displayed them on html and added a "Add to cart" button. I want the item name and price to be saved on to local storage when the button is pressed.
The idea is to then show these saved data in the basket.
Showing my existing code below.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--<link href ="styles.css" type = "text/css" rel="stylesheet">-->
<title>CSV File to HTML Table Using AJAX jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Header-->
<div id="header">
<button type="button" class="button">Basket</button>
</div>
<!-- CSV FILE DATA WILL APPEAR HERE-->
<div class="container">
<div class="table-responsive">
<div id="order_list" onload="appendRow()"><p id="tableintro"> Choose your desired supermarket</p>
</div>
</div>
</div>
<!--THIS BUTTON WILL LOAD DATA FROM CSV FILE-->
<div id="sidebar">
<div align="center">
<button type="button" name="load_data" id="load_sainsburys" class="btn btn-info">Sainsburys Colindale</button>
</div>
</div>
//Save item to local storage - DOESNT SEEM TO WORK
<script>
function SaveItem() {
var usrObject = {};
usrObject.product = document.getElementsById("12at").value;
usrObject.price = document.getElementById("34at").value;
//Store User
localStorage[usrObject.product] = JSON.stringify(usrObject);
}
</script>
Below is the code i am using to retrieve data from my CSV file:
<script>
$(document).ready(function(){
$('#load_sainsburys').click(function(){
$.ajax({
url:"sainsburys.csv",
dataType:"text",
success:function(data)
{
var tesco_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for (var count = 0; count < tesco_data.length; count++)
{
var cell_data = tesco_data[count].split(",");
var name = cell_data[0];
var price = cell_data[1];
if (count === 0)
{
table_data += '<tr><th>' + name + '</th><th>' + price + '</th><th>action</th></tr>';
continue;
}
table_data += '<tr><td id="12at">' + name + '</td><td id="34at">' + price + '</td><td><button type="button onclick="SaveItem()">Add to cart</button></td></tr>';
}
table_data += '</table>';
$('#order_list').html(table_data);
}
});
});
});
</script>
Problem
I have a small navigation containing seven pets names, a scroll listener is checking to see how far a person scrolls down the page. It then and adds a class of active to <p class="nameNav> when the person scrolls to that pet and points to expanded adoption information.
However, this active class is only being added to the first seven items in the navigation, not all forty and I'm wondering if it's because of problems with the scroll listener or how var index= has been declared.
JSFiddle: http://jsfiddle.net/jja9vecc/
scripts.js
$(function(){
// Deals with loading the pets
var public_spreadsheet_url = "https://docs.google.com/spreadsheets/d/1TOIGfwdi1GhV7BMhc5fH481icHi7zEEyXZZx3Y5J61I/pubhtml";
$(document).ready( function() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
parseNumbers: true } );
});
function showInfo(data, tabletop) {
var source = $("#pets").html();
var template = Handlebars.compile(source);
// The actual name of the sheet, not entire .csv
$.each(tabletop.sheets("Pets").all(), function(i, fact) {
var html = template(fact);
// You need an element with this id or class in your HTML
$("#pets-list").append(html);
$('.container').eq(i).addClass(data.Pets.elements[i]);
// console.log(data.Pets.elements[i].name);
// Deals with the left menu
$(".nameNav").click(function(){
$(".nameNav").removeClass("active");
$(this).toggleClass("active");
});
$(window).scroll(function(){
var $pets = $('.pet').map(function(_, i){
return $(i).offset().top;
});
var scroll = $(window).scrollTop();
var index = $pets.filter(function(i, v){ if(v < scroll) return i; }).length;
$(".nameNav").removeClass("active");
$(".nameNav").eq(index).addClass("active");
// console.log(index);
if (index >= 7 && index <= 13) {
$(".first").html(data.Pets.elements[7].name);
$(".second").html(data.Pets.elements[8].name);
$(".third").html(data.Pets.elements[9].name);
$(".fourth").html(data.Pets.elements[10].name);
$(".fifth").html(data.Pets.elements[11].name);
$(".sixth").html(data.Pets.elements[12].name);
$(".seventh").html(data.Pets.elements[13].name);
} else if (index >= 14 && index <= 20) {
$(".first").html(data.Pets.elements[14].name);
$(".second").html(data.Pets.elements[15].name);
$(".third").html(data.Pets.elements[16].name);
$(".fourth").html(data.Pets.elements[17].name);
$(".fifth").html(data.Pets.elements[18].name);
$(".sixth").html(data.Pets.elements[19].name);
$(".seventh").html(data.Pets.elements[20].name);
} else if (index >= 21 && index <= 27) {
$(".first").html(data.Pets.elements[21].name);
$(".second").html(data.Pets.elements[22].name);
$(".third").html(data.Pets.elements[23].name);
$(".fourth").html(data.Pets.elements[24].name);
$(".fifth").html(data.Pets.elements[25].name);
$(".sixth").html(data.Pets.elements[26].name);
$(".seventh").html(data.Pets.elements[27].name);
} else if (index >= 28 && index <= 34) {
$(".first").html(data.Pets.elements[28].name);
$(".second").html(data.Pets.elements[29].name);
$(".third").html(data.Pets.elements[30].name);
$(".fourth").html(data.Pets.elements[31].name);
$(".fifth").html(data.Pets.elements[32].name);
$(".sixth").html(data.Pets.elements[33].name);
$(".seventh").html(data.Pets.elements[34].name);
} else if (index >= 35 && index <= 38) {
$(".first").html(data.Pets.elements[35].name);
$(".second").html(data.Pets.elements[36].name);
$(".third").html(data.Pets.elements[37].name);
$(".fourth").html(data.Pets.elements[38].name);
} else {
$(".first").html(data.Pets.elements[0].name);
$(".second").html(data.Pets.elements[1].name);
$(".third").html(data.Pets.elements[2].name);
$(".fourth").html(data.Pets.elements[3].name);
$(".fifth").html(data.Pets.elements[4].name);
$(".sixth").html(data.Pets.elements[5].name);
$(".seventh").html(data.Pets.elements[6].name);
}
if (index >= 35 && index <= 38) {
$(".fifth").addClass("hide");
$(".sixth").addClass("hide");
$(".seventh").addClass("hide");
} else {
$(".fifth").removeClass("hide");
$(".sixth").removeClass("hide");
$(".seventh").removeClass("hide");
}
});
});
};
});
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Name of Website</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<!-- <link rel="icon" type="image/png" href="assets/img/favicon.ico"> -->
</head>
<body>
<nav class="vertical">
<div class="rectangle">
<p class="nameNav first active">Adonis</p>
<p class="nameNav second">Billy</p>
<p class="nameNav third">Comet</p>
<p class="nameNav fourth">Dexter</p>
<p class="nameNav fifth">Evan</p>
<p class="nameNav sixth">Fritz</p>
<p class="nameNav seventh">Grommit</p>
</div><!-- /.rectangle -->
</nav>
<main>
<div id="pets-list"></div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<!-- This is where the template for facts goes -->
<script id="pets" type="text/x-handlebars-template">
<div class="container">
<div class="pet">
<p class="nameTitle" id="{{name}}">{{name}}</p>
<img src="{{image}}" alt="">
<p class="breed">{{breed}}</p>
<p class="description">{{description}}</p>
<p class="cost">{{cost}}</p>
<hr>
</div><!-- /.pet -->
</div><!-- /.container -->
</script>
</body>
</html>
The following code works as expected on the various desktop browsers, however its target goal is oveasly a smartphone. when accessed from iPhone - content is blank under <ul>?
json is pulled from php page and works as expected.
EDITED: changed getJSON to static json var info for testing - still not rendered on mobile phone? - also tried various version of JQuery and JQuery-Mobile still no change.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="http://jqmdesigner.appspot.com/gk/lib/jquery.mobile/1.4.2/flatui/jquery.mobile.flatui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<title>parse JSON</title>
<script>
var info = [
{
"UID":5665,
"StudentID":"BA1400",
"LastName":"BARNES",
"FirstName":"JOHN",
"Affiliation":"DFRS"},
{"UID":10430,
"StudentID":"BA3700",
"LastName":"Barnyard",
"FirstName":"Ashley",
"Affiliation":"OTHER"},
{"UID":5781,
"StudentID":"BJ9188",
"LastName":"BARCLAY",
"FirstName":"GEOFFREY",
"Affiliation":"DFRS"},
{"UID":14815,
"StudentID":"BT0021",
"LastName":"Barhydt",
"FirstName":"Jimmy",
"Affiliation":"TAKOMA PARK"
}
];
$(document).on("pageinit", "#info-page", function () {
var server_url = "http://myDomain/tt_json.php";
$.getJSON(server_url, function(notUsing){
var li = "";
$.each(info, function (i, name) {
li += '<li>' + name.LastName + ', ' + name.FirstName + '</li>';
});
$("#prof-list").append(li).promise().done(function () {
$(this).on("click", ".info-go", function (e) {
e.preventDefault();
$("#details-page").data("info", info[this.id]);
$.mobile.changePage("#details-page");
});
$(this).listview("refresh");
});
});
});
$(document).on("pagebeforeshow", "#details-page", function () {
var info = $(this).data("info");
var info_view = "";t
for (var key in info) {
info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
}
$(this).find("[data-role=content]").html(info_view);
});
</script>
</head>
<body>
<!--first page -->
<div data-role="page" id="info-page">
<div data-role="header" data-theme="b">
<h1>GET JSON data</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="prof-list" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" data-theme="b" role="heading">Names</li>
</ul>
</div>
</div>
<!--second page -->
<div data-role="page" id="details-page">
<div data-role="header" data-theme="b">Go back
<h1>User Details</h1>
</div>
<div data-role="content"></div>
</div>
</body>
</html>
Not sure why this resolves the issue since i'm doing a standard json request from same domain but it did fix the issue:
added header:
header("Access-Control-Allow-Origin: *");
I am new into web devlopment. I am trying to use select2-bootstrap. It working fine. Just need a css help.
Initial display of widget :
There is an indent between the bars(between Search for a movie and No matches found)
After clicking on the widget it looks fine as shown here and thereafter the dent disappears even on subsequent use.
Can someone suggest how to remove the dent between two bars in the first pic above.
NOTE :
CSS Added : select2.css, select2-bootstrap.css and bootstrap.css
JS Added : bootstrap.js, jquery-1.9.1.js, select2.js
Also please suggest how to avoid the No matches found display immediately after page loads.
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Bootstrap</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2-bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<script type="text/javascript">
var contextPath = "<%=request.getContextPath()%>";
$(document)
.ready(
function() {
MultiAjaxAutoComplete('#e6',contextPath + "/getData");
$('#save').click(function() {
alert($('#e6').val());
});
});
</script>
<script type="text/javascript">
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
placeholder : "Search for a movie",
//minimumInputLength : 1,
multiple : true,
ajax : {
url : url,
dataType : 'json',
data : function(term, page) {
return {
q : term,
page_limit : 10,
};
},
results : function(data, page) {
console.log("page = " + page);
return {
results : data.results
};
}
},
formatResult : formatResult,
formatSelection : formatSelection,
initSelection : function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id : item[0],
country : item[1]
});
});
callback(data);
}
});
};
function formatResult(movie) {
return '<div>' + movie.country + '</div>';
};
function formatSelection(data) {
return data.country;
};
</script>
</head>
<body style="background-color: #F9F9F6">
<h1>Serach Movies</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<input type='hidden' id="e6" class="span8" />
</div>
<div class="span3">
<button id="save">Save</button>
</div>
</div>
</div>
</body>
</html>
I am currently working on a project that deals with feed from a website.
I have successufully gotten the feed, but my challenge is getting the content and title of the feed when a user click on the feed link rather than taken the user to the feed site.
I have tried using different method to get the solution, but none works.
Below is my latest code (Jquery Mobile)
(function($){
$.fn.FeedEk=function(opt){
var def={FeedUrl:'', MaxCount:5, ShowDesc:true, ShowPubDate:true, ShowFullContent:true};
if(opt){
$.extend(def,opt)
}
var idd = $(this).attr('id');
if(def.FeedUrl==null || def.FeedUrl==''){
$('#'+idd).empty();
return;
}
var pubdate;
$('#'+idd).empty().append('<div style="text-align:center; margin: auto;"><img src="loader.gif" class="loader" /></div>');
$.ajax({
url:'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+def.MaxCount+'&output=json&q='+encodeURIComponent(def.FeedUrl)+'&callback=?',
dataType:'json',
success:function(data){
$('#'+idd).empty();
$('#post').empty();
var output = '<ul data-role="listview" data-filter="true">';
$.each(data.responseData.feed.entries,function(i,entry){
var i =new Array(i);
for(j=0;j<=i;j++)
{
var id = j;
}
var title =new Array(entry.title);
var content =new Array(entry.content);
for(t=0;t<title.length;t++){
for(c=0;c<content.length;c++){$('#post').append(title[t]+'<br/>'+content[c])}
}
//while(id ==
//if(i == id
//var post = '<div><h3>'+entry.title+'</h3></div>';
//post += '<div>Post content'+entry.content+'</div>';
output += '<li>';
output += ''+entry.title+'';
/*if(def.ShowPubDate){
pubdate=new Date(feed[0].entry.publishedDate);
output += '<br/><span class="ItemDate">'+pubdate.toLocaleDateString()+'</span';
}
if(def.ShowDesc){
output += '<br/><span class="ItemDesc">'+feed[0].entry.contentSnippet+'</span>';
}*/
output += '</li>';});
console.log(data.responseData.feed.entries);
output += '</ul>';
$('#'+idd).html(output);
if($('.'+id).click() == true){
$('#post').empty();
var postTitle = title[id];
var postContent = content[id];
$('#post').append('<div><h3>'+postTitle+'</h3></div><div>'+postContent+'</div>');
}
}
})
}
})
(jQuery);
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>News on the GO!</title>
<link href="theme/news.min.css" rel="stylesheet" />
<link href="theme/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet" />
<link href="theme/FeedEk.css" rel="stylesheet" type="text/css" />
<script type="application/javascript" src="js/jquery1.7.2-min.js" ></script>
<script type="application/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="application/javascript" src="js/FeedEk.js"></script>
<link href="theme/custom.css" rel="stylesheet" type="text/css" />
<script type="application/javascript" src='js/main.js'></script>
<script type="application/javascript">
$(document).ready(function() {
//latest
$("#ipaid").FeedEk({
FeedUrl : 'http://ipaidabribenaija.com/news?format=feed',
MaxCount : 7,
ShowDesc : true,
ShowPubDate:true,
ShowFullContent:true
});});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-theme="a">
<h2>Recent News</h2>
About
</div><!-- /header -->
<div class="imghome">
<img src="images/news.png" alt="news" width="300" height="200" />
</div>
<nav data-role="navbar">
<ul>
<li><a href="#latest" data-theme="a" data-transition="flip" >Local News</a></li></ul>
</nav>
<!--<div data-role="content" >
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="a"></div><!-- /footer -->
</div><!-- /Page home -->
<div data-role="page" id="latest" data-title="Local News">
<div data-role="header" data-position="fixed" data-id="ipaid_header" data-theme="a">
<h2>Local News</h2>
Back
</div><!-- /header -->
<div data-role="content" >
<div id="ipaid">
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ipaid_footer" data-theme="a">
<div data-role="navbar" data-theme="a">
<ul>
<li>Home</li>
<li>Politics</li>
<li>Sports</li>
<li>Business</li>
</ul>
</div><!-- /Footernavbar --></div><!-- /footer -->
</div><!-- /Page Latest --></body>
</html>
As far as I understood. You want to show each news feed on a separate page on your webpage, and prevent the link from opening a new window (leaving your webpage).
You could do the following, of course it needs some tuning and CSS styling, which can be done easily. The below code, prevents opening the link a new window, - using preventDefault() - it copies feed details (title, image, full article..etc) and appending them to a new page dynamically.
Each page has an auto-generated ID, in case you want to navigate between them using Swipe events or any other methods.
Working example
Code:
var pageid = 0;
$('#ipaid').on('click', 'a', function (e) {
pageid++;
e.preventDefault();
var clicked = $(this);
var root = clicked.closest('li');
var linkto = clicked.attr('href');
var title = clicked.text();
var date = clicked.parent('div').next('div').text();
var linkdiv = root.find('div.itemTitle');
var datediv = root.find('div.itemDate');
var contentdiv = root.find('div.itemContent');
var image = contentdiv.first('div').find('img').attr('src');
var article = '';
contentdiv.find('p').each(function () {
article += $(this).text();
});
var newPage = $("<div data-role=page id='page" + pageid + "'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>" + title + "</h1></div><div data-role=content><p>Date:" + date + "</p><img src='" + image + "'></div><div class='article'><p>" + article + "</p></div></div></div");
newPage.appendTo($.mobile.pageContainer);
$.mobile.changePage('#page' + pageid);
});
I think you simple need jFeed. Sample code from the jFeed site:
jQuery.getFeed(options);
options:
* url: the feed URL (required).
* data: data to be sent to the server. See jQuery.ajax data property.
* success: a function to be called if the request succeeds.
The function gets passed one argument: the JFeed object.
Example:
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});