We Keep Coding

Horizontal Page trasition with different webpage is not working in Chrome

I want to do Horizontal page transition with different webpage changing the url.
below code is not working in chrome but working fine in mozilla
(function(a){
a.fn.preload=function(){
this.each(function(){`enter code here`
var b=new Image();b.src=this})};
a.fn.SliderFunc=function(f){
var y={homeButton:".home-button",prevButton:".prev-button",nextButton:".next-button",transition:"horizontal-slide",transitionSpeed:600,autoplay:false,loop:true,slideDuration:2,easing:"swing",preloadSlides:true,enableKeyboardNavigation:true};
if(f)
{a.extend(y,f)}
if(this.length>1)
{this.each(function(){a(this).SliderFunc(f)});return this}
var m=this;var s=a(m);var o=s.children("div.slides");var r=o.children("div.slide");
var w=s.children(".resources");
var k=w.find("li");
var l=k.size()>0?k.size():r.size();
var e=false;var q=0;
var v=function(){x();height=a(window).height();width=a(window).width();s.css({height:height,width:width,position:"relative",overflow:"hidden"});c();o.css("position","absolute");r.css({position:"relative",width:width,height:height,overflow:"auto"});if(y.transition=="horizontal-slide"){o.css("width",l*width);r.css("float","left")}A();d();g(s);C(s);B();if(y.preloadSlides){u()}};
var d=function(){
a.address.init(function(D){a.address.autoUpdate(false)}).change(function(D){var E=D.value;if(p()){if(E.indexOf("#")!=-1){E=E.split("#")[1]}else{if(E.indexOf("/")!=-1){E=E.split("/")[1]}}}else{E=D.value.substring(1)}if(E!=""&&typeof(E)!="undefined"){if(r.filter("#"+E).size()>0){m.selectById(E)}else{m.gotoHome()}}else{m.gotoHome()}})};
var x=function(){a("html, body").css({margin:0,padding:0,overflow:"hidden"});if(p()){a("html, body").css({overflow:"auto"})}a(window).resize(function(){height=a(window).height();width=a(window).width();s.css({width:width,height:height});r.css({width:width,height:height});
var D=t().index();
if(D!=-1)
{if(y.transition=="horizontal-slide"){o.css({width:l*width});s.stop().scrollLeft(D*width)}else{if(y.transition=="vertical-slide"){s.stop().scrollTop(D*height)}}}})};function p(){if(parseFloat(navigator.appVersion.split("MSIE")[1])==7){return true}return false}var g=function(D){D.find(".special-anchor").not(".prev-button, .next-button, .home-button").click(function(E){var F=a(this).attr("href");if(p()){F=F.split("#")[1]}F=F.replace(/^#/,"");a.address.value(F);a.address.update();return false})};
var C=function(D){D.find(y.homeButton+".special-anchor").bind("click",function(E){E.preventDefault();m.gotoHome()});D.find(y.prevButton+".special-anchor").bind("click",function(E){E.preventDefault();m.selectPrevious()});D.find(y.nextButton+".special-anchor").bind("click",function(E){E.preventDefault();m.selectNext()})};var A=function(){if(y.enableKeyboardNavigation){a(document).keydown(function(D){if(D.target.type!=="textarea"&&D.target.type!=="text"){var E=D.keyCode||D.which;switch(E){case 37:case 38:m.selectPrevious();break;case 39:case 40:m.selectNext();break;default:break}}})}};var B=function(){if(y.autoplay){if(!t().hasClass("loading")){clearInterval(q);if(!y.loop){if(t().index()==l-1){return false}}q=setInterval(m.selectNext,y.slideDuration*1000)}}return true};this.selectById=function(F,E){var D=r.filter("#"+F).index();b(D,E)};this.gotoHome=function(D){a.address.value(r.eq(0).attr("id"));a.address.update();if(D){D()}};this.selectNext=function(E){var D=t().index();if(++D==l){D=0}a.address.value(r.eq(D).attr("id"));a.address.update();if(E){E()}};this.selectPrevious=function(E){var D=t().index();if(--D<0){D=l-1}a.address.value(r.eq(D).attr("id"));a.address.update();if(E){E()}};var b=function(D,G){var E=t();if(D!=E.index()&&D!=-1){clearInterval(q);i().removeClass("prev");E.removeClass("current").addClass("prev");r.eq(D).addClass("current");if(z(D)){n(D)}if(!e){var F=y.transitionSpeed;y.transitionSpeed=0;e=true}switch(y.transition){case"vertical-slide":h(G);break;default:case"none":case"horizontal-slide":j(G);break}y.transitionSpeed=F}else{if(G){G()}}};var j=function(D){s.stop().animate({scrollLeft:t().index()*width},y.transitionSpeed,y.easing,function(){B();if(D){D()}})};var h=function(D){s.stop().animate({scrollTop:t().index()*height},y.transitionSpeed,y.easing,function(){B();if(D){D()}})};var u=function(){for(var D=0;D<k.length;D++){if(z(D)){n(D,u);return false}}return false};var n=function(F,H){var E=k.eq(F).children("a").attr("href");var D=r.eq(F);var G=function(){D.removeClass("loading").addClass("loaded");g(D);C(D);if(D.index()==t().index()){B()}if(H){H()}};if(z(F)){D.addClass("loading").load(E,G)}};var c=function(){var F="";for(var D=0;D<l;D++){var E=k.eq(D).children("a").attr("id");F+="<div id='"+E+"' class='slide'></div>"}o.append(F);r=o.children("div.slide")};var t=function(){return r.filter("div.current")};var i=function(){return r.filter("div.prev")};var z=function(F){var E=k.eq(F).children("a").attr("href");var D=r.eq(F);if(typeof(E)!="undefined"&&E!="#"&&E!=" "&&E!=""){if(!D.hasClass("loaded")&&!D.hasClass("loading")){return true}}return false};v();return this}})(jQuery);

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="css/styles-min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-address.js"></script>
<script type="text/javascript" src="js/jquery.fss-1.0.js"></script>
<title>FSS - Full Screen Sliding Website Plugin</title>
<script type="text/javascript">
$(function() {
$(['images/home-button-on.png', 'images/prev-button-on.png', 'images/next-button-on.png']).preload();
$(".slider").SliderFunc();
});
</script>
</head>
<body>
<!-- Slider starts -->
<div class="slider">
<div class="slides">
<!-- Nothing here, the content will be loaded dynamically. -->
</div> <!-- end slides -->
<div class="resources" style="display: none; visibility: hidden;">
<ul>
<li><a id="introduction" href="sample-content/page1.html">1</a></li>
<li><a id="deep-linking" href="sample-content/page2.html">2</a></li>
<li><a id="ajax" href="sample-content/page3.html">3</a></li>
<li><a id="options" href="sample-content/page4.html">4</a></li>
<li><a id="advanced-usage" href="sample-content/page5.html">5</a></li>
</ul>
</div>
</div>
<!-- Slider ends -->
</body>
</html>

JQM works on desktop browser not mobile

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

How to refresh div with updated php code in jQuery Mobile?

Within a jQuery Mobile page, I have a div which needs to be refreshed after a php mysql JSON call is made. This call updates the number of entries in a database. This update needs to be displayed within the div. I searched stackoverflow and found .listview("refresh"), .trigger("create") and other potential solutions but could not get to work. I think .listview("refresh") is not applicable since I am not using a list.
The main page has two mobile pages within it #outerwrap0 and #outerwrap1:
<html lang="en">
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="models/site-templates/themes/whiteBackNavy.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/shuffleMainJplayerJQM1.1.js"></script>
</head>
<body>
<!--*** PAGE 0 ***-->
<div data-role="page" id='outerwrap0' class="outerwrap" data-url="/account_m.php">
<div class="mineBox">
... php ...
</div
</div
<!--*** PAGE 1 ***-->
<div data-role="page" id='outerwrap1' class="outerwrap" data-url="/account_m.php">
<div class="mineBox">
... php ...
</div
</div
the applicable portion of the shuffleMainJplayerJQM1.1.js javascript, wherein the php is updated and code should be called to refresh the div is:
$(".adder").click(function() {
$.ajax({
url: 'AddToMine1.2.php?id=' + currentId,
type: 'POST',
dataType:'json',
success : function (result) {
var errorCode = (result['errorCode']);
switch (errorCode) {
case 0: alert(result['errorMess']);
break;
case 1: alert(result['errorMess']);
break;
case 2: break;
}
},
error : function () {
alert("error");
}
});
// not working - would like to refresh mineBox div here
$(".mineBox").trigger("create");
});
Here is the contents of .mineBox after rendering:
<div class="mineBox">
<p align=center>
<img src="../images/mine_block_full.jpg" width="14%" align="absmiddle" />
</p>
<p align=center><img src="../images/mine_block_full.jpg" width="14%" align="absmiddle" />
</p>
<div data-role="popup" id="popupMenuPM1" data-theme="a" data-overlay-theme="a">
<ul data-role="listview" data-inset="true" >
<li data-role="divider" data-theme="a">Be</li>
<li>Play</li>
</ul>
</div>
<div data-role="popup" id="popupMenuPM2" data-theme="a" data-overlay-theme="a">
<ul data-role="listview" data-inset="true" >
<li data-role="divider" data-theme="a">Want Girl</li>
<li>Play</li>
</ul>
</div>
</div>
Your assistance is greatly appreciated. Thank You!

Navigation Menu Links

I've recently started restructuring a website, which currently uses frames and framesets.
I have now adopted a typical structure.html:
<body>
<div>
<div id="headerNavigation"></div>
<div id="PageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
With the following jQuery scripts to populate the DIVs:
<head>
<script>
$.get('PageHeader.html', processHeader, "html").fail(function() { alert("There is a problem loading the header. Please re-try"); });
function processHeader(file_data)
{
$("#headerNavigation").html(file_data);
}
$.get('TermsConditions.html', processContent, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
$.get('Footer.html', processFooter, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processFooter(file_data)
{
$("#Footer").html(file_data);
}
</script>
</head>
This works great when i specify the Content page, however, i need some kind of jQuery function that forwards/populates the DIV with the correct content when clicking on an item in my Navigation menu - index.html:
<html>
<head>
<!-- jQuery code for drop down nav menus -->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
</head>
<body>
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<li class="data-sources">Date Sources <span class="icon-caret-down"></span>
<li>
Information
<ul class="fallback">
<li>Ovens</li>
<li>Fridges</li>
<li>Tables</li>
<li>Costing</li>
<li>Installation</li>
</ul>
</li>
<li>
Legal Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>Data Protection</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Comments</li>
<li>Additional Info</li>
</ul>
</li>
<li>
Need Help?
<ul class="fallback">
<li>Need Help</li>
<li>FAQs</li>
<li>Ask our Experts</li>
</ul>
</li>
<li>
Cookies
</li>
</li>
</ul>
</nav>
</body>
</html>
Any ideas how how i can create a function to do this would be greatly appreciated.
Thanks
Update 21-06-2013 Basic Site Skeleton:
Index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<title>Welcome</title>
<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<script type="text/javascript">
function gofor(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
</head>
<body>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
<li class="menu--home"><span class="icon-home"></span></li>
<li>
Information
<ul class="fallback">
<li><a onclick="gofor('information.html')">Information (go for)</a></li>
<li><a onclick="gofor('openaccount.html')"> New Customer (Go For)</a>
<li><a onClick="gofor('information.html')">Information Go For onClick</a></li>
<li>Information Go For HREF</li>
<li>Ovens</li>
<li>Fridges</li>
<li>Tables</li>
<li>Costing</li>
<li>Installation</li>
</ul>
</li>
<li>
Legal Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>Data Protection</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Comments</li>
<li>Adding Directors Searches</li>
</ul>
</li>
</li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->
<section>
<div class="page-heading">
<h1 class="wrap">Welcome to Tables, Ladders and Chairs </h1>
</div>
<div>
Other welcome content
</div>
</section>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
<small>2013 TL&C’s. </small>
</div>
</footer>
Frameset.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="en">
<head>
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script>
$.get('PageHeader.html', processHeader, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
function processHeader (file_data)
{
$("#header").html(file_data);
}
</script>
</head>
<body>
<div>
<div id="header"></div>
<div id="PageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
</body>
</html>
PageHeader.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<title>Page Header</title>
<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript">
$(document).ready(function() {
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<script type="text/javascript">
function gofor(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
<li class="menu--home"><span class="icon-home"></span></li>
<li>
Information
<ul class="fallback">
<li><a onclick="gofor('information.html')">Information (go for)</a></li>
<li><a onclick="gofor('openaccount.html')"> New Customer (Go For)</a>
<li>Ovens</li>
<li>Fridges</li>
<li>Tables</li>
<li>Costing</li>
<li>Installation</li>
</ul>
</li>
<li>
Legal Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>Data Protection</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Comments</li>
<li>Adding Directors Searches</li>
</ul>
</li>
</li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->
Information.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>Information</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</head>
<body>
<form>
Information about Tables Ladders and Chairs etc.
</form>
<br>
</body>
</html>
Thanks

You can, for each link in the menu, add a call to a function like this:
<a onclick="$.get('Information.html', processContent, 'html')" >Information</a>
As you see, you will reuse the same function used to load the content the first time:
$.get('Information.html', processContent, 'html')
In this way,you have just called the same 'processContent' but for a different page to load. You can simplify the onclick event more by adding a third function which will be called by the onclick(or href) and then, will call the function to load the content, like this:
<a onclick="gofor('Information.html')">Information</a>
or this one:
Information
and then add this simple function:
function gofor(page){
$.get(page, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}
Obviously you can't use this function to load external content, because it's forbidden by the browsers
Your index page should be something like this, please pay attention to the div with id "pageContent" in it the pages will be loaded and to the function you need to have to load contents in your page.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://modernizr.com/i/js/modernizr.com-custom-2.6.1-01.js"></script>
<title>Welcome</title>
<link id="productStyle" type="text/css" href="css/style.css" rel="stylesheet">
<!-- JavaScript functions to enable dropdown navigation-->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<script type="text/javascript">
function gofor(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
</head>
<body>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav ">
<li class="menu--home"><span class="icon-home"></span></li>
<li>
Information
<ul class="fallback">
<li>Information (go for)</li>
<li> New Customer (Go For)
<li>Ovens</li>
<li>Fridges</li>
<li>Tables</li>
<li>Costing</li>
<li>Installation</li>
</ul>
</li>
<li>
Legal Info
<ul class="fallback">
<li>Terms & Conditions</li>
<li>Data Protection</li>
</ul>
</li>
<li>
Contact Us
<ul class="fallback">
<li>Contact Details</li>
<li>Your Comments</li>
<li>Adding Directors Searches</li>
</ul>
</li>
</li>
</ul> <!-- END menu-nav -->
</nav> <!-- END nav.site-nav -->
<!-- MENU END -->
<section>
<div class="page-heading">
<h1 class="wrap">Welcome to Tables, Ladders and Chairs </h1>
</div>
<div>
Other welcome content
</div>
<div id="PageContent">
</div>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
<small>2013 TL&C’s. </small>
</div>
</footer>

There is no need for you to load all those elements via javascript. In fact I would argue that it's bad practice. You're making unnecessary calls that will lead to longer loading times for your visitors. The standard practice is to load your initial content and then use javascript as needed to respond to user commands.
I understand what you're trying to do with splitting up the content into separate partials (Header, footer, etc..) but this isn't usually how it's done. There are some template engines that would do exactly what you're trying to achieve without requiring extra ajax calls to pull in regular html content. Here are some basic examples of separating out reusable content:
PHP (Server side):
<?php include 'pageheader.html'; ?>
<div>My main content</div>
<?php include 'footer.html'; ?>
Handlebars.js (Client side)
{{>pageheader}}
<div>My main content</div>
{{>footer}}
Having said that, if you absolutely must stick with the current set up, then you would just need to parse out the url from the a tag and send that to your processContent function. Here is an example of how you can do that using jquery:
$('li').on('click', function (e) {
var url = $(this).find(">:first-child").attr('href');
$.get(url, processContent, "html").fail(function() { alert("There is a problem loading a resource. Please re-try"); });
});
The above code basically just binds to the click event of every li and grabs the a tag's href value before passing that value to your processContent function

jQuery Mobile - listview data-inset on refresh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.

$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace