I would like to append some code to a page using jQuery/jQuery mobile, I would only like to append once not on each visit to the page.
** final edit **
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('#page1').live('pageshow', function ()
{
// alert("!");
var section1 = "<p>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
});
$('#page2').live('pageshow', function ()
{
// alert("!");
var section2 = "<p>some code for page 2...</p>";
myClone2 = $(section2);
myClone2.appendTo("#placeholder2").trigger('create');
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder1">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder2">Page 2</div>
</div>
</div>
</div>
</body>
</html>
You can check for the existence of the code you are appending before actually appending. That way on subsequent visits to the page the data will not be added:
$('#page1').live('pageshow', function ()
{
// alert("!");
if ($(this).find('p.appended_code').length === 0) {
var section1 = "<p class='appended_code'>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
}
});
Note that I added the 'appended_code' class to the paragraph tag that you are appending and that is the selector I used to check for the existence of appended code.
--Update--
You can also clean-up the code a bit if you are using naming conventions based on numbers:
var pageData = new Array();
pageData[1] = "<p class='appended_class'>some code for page 1...</p>";
pageData[2] = "<p class='appended_class'>some code for page 2...</p>";
$('div[id^="page"]').live('pagebeforeshow', function () {
if ($(this).find('p.appended_class').length === 0) {
var page_num = $(this).attr('id').replace('page', '');
$("#placeholder" + page_num).append(pageData[page_num]).trigger('create');
}
});
Note that the div[id^="page"] selector searches for divs with an id that starts with "page"
Here is a jsfiddle for ya: http://jsfiddle.net/S3wE6/1/
If you want the data to be appended on the initial load I would recommend making the line of code where the data is appended into a function and calling it on $(document).ready();
ok this was a little tricky but here is a live version:
- http://jsfiddle.net/phillpafford/QfjaE/27/
JS:
var elem_id;
var appendToStatus = {};
appendToStatus['page1'] = true;
appendToStatus['page2'] = true;
$('div').live('pageshow', function() {
elem_id = $(this).attr('id');
appendToStatus[elem_id] = fnCreateGroups(elem_id, appendToStatus[elem_id]);
});
function fnCreateGroups(elem_id, appendToStatus) {
if(appendToStatus == true) {
var section = "<p>some code for " + elem_id + "...</p>";
myClone = $(section);
myClone.appendTo("#" + elem_id + "_placeholder").trigger('create');
return false;
}
}
HTML:
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>
</ul>
</div>
<div id="page1_placeholder">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>
</ul>
</div>
<div id="page2_placeholder">Page 2</div>
</div>
</div>
This seem to work... with minimal changes. Only add on pagecreate event.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
$('#page1').live('pagecreate', function ()
{
var section1 = "<p>some code for page 1...</p>";
myClone1 = $(section1);
myClone1.appendTo("#placeholder1").trigger('create');
});
$('#page2').live('pagecreate', function ()
{
var section2 = "<p>some code for page 2...</p>";
myClone2 = $(section2);
myClone2.appendTo("#placeholder2").trigger('create');
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder1">Page 1</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="navbar">
<ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
<li><a data-icon="grid" data-transition="none" id="page2" href="#page2">page2</a></li>
</ul>
</div>
<div id="placeholder2">Page 2</div>
</div>
</div>
</div>
</body>
</html>
