JQM works on desktop browser not mobile - javascript

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: *");

Related

Dynamic load Panel with PageContainer

I know this question has been asked several times, but i want to load a panel dynamic for all pages and it doesn't work.
Sometimes the css style is not loading or the panel does not open..
Any suggestions? ;(
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var panelHtml = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
});
$(this).append(panelHtml);
$("#panel_" + this.id).panel();
$("#panel_" + this.id).panel().enhanceWithin();
$("#panel_" + this.id).enhanceWithin();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
</body>
</html>
My panel.html
<ul data-role="listview" data-theme="g" data-divider-theme="g">
<li data-role="list-divider">Panel</li>
<li>Page1</li>
<li>Page2</li>
<li>Pag3</li>
</ul>
Thank you for your tips... .one('pagebeforecreate',
It is not easy to load the same header and / or footer in all pages.
Finding the right event is really difficult.
I modified your solution a bit, it's more concise and can be faster.
$(document).one('pagebeforecreate', function () {
$.get('header.html').success(function(htmlHeader){
$.get('footer.html').success(function(htmlFooter){
$(htmlHeader).prependTo($('[data-role="page"]'));
$(htmlFooter).appendTo($('[data-role="page"]'));
$('body').enhanceWithin(); // All pages in once
});
});
});
#thanks to ezanker
- i didnt know that a external panel exist, thanks
- i tested it on jsfiddle and it worked but i didnt worked local, i dont know why
thats my solution
its a bit silly when you know external panels exist, but here it is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="header">').load("templates/header/header.html", function () {
$("#" + id).prepend(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">').load("templates/footer/footerUp.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="popup" id="popup_' + this.id + '" data-theme="a" class="ui-corner-all">').load("templates/popup/type_1/popup.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page1").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page2").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page3").popup("open")'>Open PopUp</a>
</div>
</div>
</body>
</html>

JQueryMobile 1.4 popup not opening after transition to the same page

I have a page with a data-role="listview" data-split-icon="gear"
The page is called sorting.php
The main link in each list item is for example sorting.php?parent=1
The gear icon (split icon) opens #popup which is a data-role="popup" id="popup"
My problem is that the popup opens correctly the first time I open sorting.php, but after clicking a list item an transitioning to sorting.php?parent=1, the popup does not open.
The URL bar in the browser just shows "sorting.php?parent=1#&ui-state=dialog" when I click on the gear icon, but nothing happens. Any ideas on how to fix this?
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>P1</title>
<link rel="stylesheet" href="res/lib/jquery.mobile-1.4.0.min.css">
<link rel="stylesheet" href="custom.css">
<script src="res/lib/jquery-1.10.2.min.js"></script>
<script> $(document).on("mobileinit", function () { $.mobile.changePage.defaults.changeHash = false; }); </script>
<script src="res/lib/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
<div data-role="popup" id="popup">
<ul data-role="listview" data-count-theme="c" data-inset="true">
<li class="custom-li">
<div data-role="collapsible" class="custom-collapsible" data-iconpos="right">
<h3>Editar</h3>
<p>Formulario</p>
</div>
</li>
<li class="custom-bottom-li">Eliminar</li>
<li>Crear Hijo</li>
</ul>
</div>
<div data-role="header" data-theme="b"><h1>P1</h1></div>
<div data-role="content" data-theme="a">
<ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="true">
<?php
require_once("res/mysql/mysql-connect.php");
if(isset($_GET["parent"]))
$where = " WHERE sorting_parent_id =". $_GET["parent"];
else
$where = " WHERE sorting_parent_id =0";
if ($res_sorting_padres = $mysqli->query("SELECT * FROM sorting".$where))
{
while ($fila = $res_sorting_padres->fetch_assoc())
{
$r1 = $mysqli->query("SELECT count(sorting_id) from sorting where sorting_parent_id =".$fila['sorting_id']);
$cuenta = $r1->fetch_row();
$enlace = '';
if ($cuenta[0] > 0) $enlace = "sorting.php?parent=".$fila['sorting_id'];
echo '<li><p>'.$fila['sorting_description'].'</p><span class="ui-li-count">'.$cuenta[0].'</span>';
echo 'Opciones</li>';
}
$res_sorting_padres->close();
}
else
{
printf("Errormessage: %s\n", $mysqli->error);
}
?>
</ul>
</div>
<div data-role="footer" data-theme="c"><h1>Footer Text</h1></div>
</div>
</body>
</html>

window.location.hash always shows empty

In my phonegap application i updated my datas for that i have the following code in that i got the window.location.hash(* indicate error line) value will be empty.
function init() {
$("#homePage").live("pageshow", function() {
getDatas();
});
$("#editPage").live("pageshow", function() {
***var loc = window.location.hash;***
alert("loc" + loc);
if(loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?")+1, loc.length);
var detailId = qs.split("=")[1];
$("#editFormSubmitButton").attr("disabled", "disabled");
dbShell.transaction(function(tx) {
tx.executeSql("select id,name,age,city,occupation from nameDetail where id=?", [detailId], function(tx, results) {
$("#mId").val(results.rows.item(0).id);
$("#mName").val(results.rows.item(0).name);
$("#mAge").val(results.rows.item(0).age);
$("#mCity").val(results.rows.item(0).city);
$("#mOccupation").val(results.rows.item(0).occupation);
$("#editFormSubmitButton").removeAttr("disabled");
});
}, dbErrHandler);
} else {
alert("empty");
$("#editFormSubmitButton").removeAttr("disabled");
}
});
}
function getDatas() {
dbShell.transaction(function(tx) {
tx.executeSql("select id,name,age,city,occupation,date from nameDetail order by date desc", [], renderEntries, dbErrHandler);
}, dbErrHandler);
}
function renderEntries(tx, results) {
if (results.rows.length == 0) {
$("#mainContent").html("<p>Don't have any Details</p>");
} else {
var s = "";
for (var i = 0; i < results.rows.length; i++) {
s += "<li><a href='addEdit.html?id="+results.rows.item(i).id + "'>" +results.rows.item(i).name + "</a></li>";
alert("" + s);
}
//alert(S);
$("#noteTitleList").html(s);
$("#noteTitleList").listview("refresh");
}
}
Index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Names</title>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/jquery-1.6.4.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="js/index.js"></script>
</head>
<body onload="init();">
<div data-role="page" id="homePage">
<div data-role="header">
<h1>Names</h1>
</div>
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList"></ul>
</div>
<div data-role="footer" class="ui-bar">
Add Note
</div>
</div>
</body>
</html>
and addEdit.html:
<div data-role="page" id="editPage">
<div data-role="header">
<h1>Details</h1>
</div>
<div data-role="content">
<form id="addEditForm" method="post">
<input type="hidden" name="mId" id="mId" value="">
<div data-role="fieldcontain">
<label for="mName">Name</label>
<input type="text" name="mName" id="mName"/>
</div>
<div data-role="fieldcontain">
<label for="mAge">Age</label>
<input name="mAge" id="mAge"/>
</div>
<div data-role="fieldcontain">
<label for="mCity">City</label>
<input name="mCity" id="mCity"/>
</div>
<div data-role="fieldcontain">
<label for="mOccupation">Occupation</label>
<input name="mOccupation" id="mOccupation"/>
</div>
<div data-role="fieldcontain">
<input type="submit" id="editFormSubmitButton" value="Save Note">
</div>
</form>
</div>
<div data-role="footer" class="ui-bar">
Return Home
<input type="button" data-role="button" id="sync" name="sync" value="Sync" data-icon="arrow-d"/>
</div>
</div>
how to solve this some body help to solve this...
EDIT :
issue solved using this one.
solution link
I got the solution using following method
var loc = $(location).attr('href');
if (loc.indexOf("?") >= 0) {
var url = loc.substr(loc.indexOf("?") + 1, loc.length);
listId = url.split("=")[1];
it will be helpful for someone like me.
I solved my issue using this link Refer
I'm assuming this javascript works the same way as javascript on a traditional browser here ..
Judging by the comments in the code, it looks like you're expecting the hash to hold the query string, perhaps ?
The hash only holds what's after the hash in a url
eg
www.this.com/apage.html?firstval=value&anothervalue=45#locationinpage
in this url,
window.locationhash will equal "#locationinpage"
but
window.locaton.search will equal "?firstval=value&anothervalue=45"
That is : the query string excluding the part after the hash
perhaps you need window.locaton.search instead, or as well ?

JQuery Mobile - Dynamic page injection not working

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.

How to Get a class with Jquery and perform a function

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

Categories