How to get listview selected id and a href text? - javascript

I have a dynamic listview which the id and text are dynamic from server.
For simplicity, let's say something like this:
<ul id="productslist" data-role="listview" data-inset="true">
<li data-role="list-divider">Products</li>
<li id="123">#copper 1</li>
<li id="124">#copper 2</li>
</ul>
I need the get the list id and product name. (I don't know the id value since it'll be dynamic)
Any suggestions?
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.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>
$(document).on("pageinit","#test1",function(){
});
$(document).on("pagebeforeshow","#test1",function(){
//dynamic list with
});
function check(){
var href = $(this).attr('href');
var id = $(this).parent().attr('id');
alert('href :'+id+' ,value:'+id);
};
</script>
</head>
<body>
<div data-role="page" id="test1">
<div data-role="header">
<h1 style="white-space: normal;margin-left:60px;" id="headertitle"></h1>
<a href='menu.html' class='ui-btn-right' data-icon='home' data-theme="a" >Home</a>
</div><!-- /header -->
<div data-role="content">
<h4>List #</h4>
<ul id="productslist" data-role="listview" data-inset="true">
<li data-role="list-divider">Products</li>
<li id="123">#copper 1</li>
<li id="124">#copper 2</li>
<li id="125"><input type="button" value="#copper 3" onclick="check();"></li>
</ul>
<input type="button" onclick="openProduct('data');" value="Click"/>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>


Use .on()
$('#productslist').on('click','a',function(e){
e.preventDefault();//stop default behavior of anchor tag
var href = $(this).text();
var id = $(this).parent().attr('id'); //get parent li id
});
Fiddle Demo
onclick="check(this);"
Put this code in head or at the end of the page
function check(el) {
var txt = $(el).text();
var id = $(el).closest('li').attr('id');
alert('id : ' + id + ' , value: ' + txt);
};

Related

Saving data from a page in the local storage

This is my first time asking or doing this type of question
So I created this page http://lamp.cse.fau.edu/~mcuervo5/p4/
and it does your basic to do app list thing for adding and deleting stuff.
Apparently the only thing missing is to save the data on the current page. I heard that there a code that can save the current page to a local storage that has everything already in it, so when I re-open the link, instead of having nothing in the "complete and incomplete" list, it should look like this
thanks, it the only part I have left to do & I dont know if it implemented in HTMl or Jquery. I do not know how to do it.
and if you want to see the code here instead of "inspect" from the page with the link above, here it is. for html and Jquery
$(document).ready(function() {
// $('#list').innerhtml = localStorage.getItem("List");
//$('#incomplete-tasks').html("<P>I just replaced your stuff.</P>");
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
$('#incomplete-tasks').append('<li><span class="text" contenteditable="false">' + textbox_Value + "</span>" +
'<input/ style="display: none" class="new-value">' +
"<button type='button' class='delete'>Delete</button>" +
"<button type='button' class='edit'>Edit</button></li>");
});
$('#incomplete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#incomplete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#complete-tasks').append(li);
});
$('#complete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#complete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#incomplete-tasks').append(li);
});
// var save()
//{
// localStorage.setItem("List", $("#list").innerhtml());
// }
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Reminder list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link href="css/heroic-features.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">To Do List</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1> The Reminder Friend App </h1>
<p>this is my to do list app. type in the list you want to add & store in the list
</p>
<form>
<!-- textbox -->
<input type="text" id="textbox">
<!--add button -->
<input type="button" id="Sumbit_Button" value="Add">
</form>
</header>
<hr>
<div id='lists'>
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Incomplete</h3>
<ul id="incomplete-tasks">
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Complete</h3>
<ul id="complete-tasks">
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Mauricio Cuervo 2017</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
<script src="p4.js"></script>
</html>

Hello you can do something like this:
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
var list = [];
list.push(textbox_Value);
localStorage.setItem("listdata", list);
// do not manage using `append` whole html. Manage through list and display as you want
});
on page load call:
var stored = localStorage.getItem("listdata");
Now here you can manage array of items and iterate on complete & incomplete list.
So whenever any action of edit, delete, add occurs you have to just manage the localstorage instance on each call. and based on that just iterate list whereever you want.

Javascript only running on first view (first page) - jQuery Mobile

Possible related error from firebug: ... Cannot call methods on listview prior to initialization; attempted to call method 'option'
I am making this app that requires you to type the answer of a certain ´level´ to go to the next one. The answer is in a list and should only display on exact match for the search. Below is my html for the first two pages and my javascript for hiding the answer untill exact match is provided.
However it ONLY works on the first view (page) and doesn´t work on the second, third, fourth and so on! I really spent a loooong time trying to fix this and I am lost. The only thing that worked for me so far was a prefetch-data="true", but it only works to some extent and stops working after page 3. Other then that I´ve tried to implement many solutions I found here and there but none do what I want. I hope there is some simple thing I am doing wrong.
Why does the script only run on the first view and how do I fix it?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>PARestaurant</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="style" href="images">
<style type="text/css"></style>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- Page Index
Home Page
Level Two
Level Three
Level Four
-->
<!-- -----------------------------------------------------------Home Page----------------------------------------------------------- -->
<div data-role="page" id="232114125125124124" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2>Ready when you are!</h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true"
data-filter-reveal="true" data-inset="true"
data-filter-placeholder="">
<li data-filtertext="Green">You are a genius!</li>
</ul>
</div>
</div>
<div id="blue"></div> <h2>+</h2> <div id="yellow"></div>
</div>
<div data-role="footer" align="center">
<h1>Level 1</h1>
</div>
</div>
<!-- -----------------------------------------------------------Level Two----------------------------------------------------------- -->
<div data-role="page" id="32432532462362345325235235" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2> You know what to do! </h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-filter-placeholder="">
<li data-filtertext="Level 1">Click me to go back!</li>
<li data-filtertext="Level 3">Up you go!</li>
<li data-filtertext="Level 4">You have to struggle a bit</li>
<li data-filtertext="Level 5">Not so fast</li>
<li data-filtertext="Level 6">No No NO!</li>
<li data-filtertext="Level 7">Stop it...</li>
</ul>
</div>`enter code here`
<div><p>Where do you wanna go?<p></div>
</div>
</div>
<div data-role="footer" align="center">
<h1>Level 2</h1>
</div>
</div>
JAVASCRIPT BELOW
exactMatch = function( text, searchString ) {
return !( text.toLowerCase() == searchString );
};
$(function () {
$(".whatever").listview('option', 'filterCallback', exactMatch);
});
}

Instead of
$(function () {...
Try something like this:
$(document).on( "pageinit", function( e ) {
$(e.target).find(".whatever").listview('option', 'filterCallback', exactMatch);
});
pageinit runs once as each page you visit is initialized for the first time.

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

Sliderjs with dynamic content or images

I'm heaving a problem and can't seem to find the/an answer. I use sliderjs from sliderjs.com to, obviously, create a slider panel. The script works great with hard coded html ( elements are rendered in a niceslideing panel).
Now I want to insert those ul, li elements dynamically with javascript. The problem is dat the sliderjs isn't formating the newly inserted code right. What am I doing wrong and what should I do to correct this. Any help is appreciated. The sliding panel only works on phone device.....
If I hardcode this than it works
<div id='slider' class='swipe' style='width:150px'>
<ul>
<li style='display:block'><div>1</div></li>
<li style='display:none'><div>2</div></li>
<li style='display:none'><div>3</div></li>
<li style='display:none'><div>4</div></li>
<li style='display:none'><div>5</div></li>
</ul>
</div>
This is my full code with the javascript that isn't working
<html>
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport" />
<style type="text/css">
html{background-color:transparent;height:100%;width:100%;}
body{background-color:transparent;font-size:11pt;font-family:helvetica;}
img{border:0px;} </style>
<link rel="stylesheet" href="BTA_Blog_Leather_colors/brown/BTA_Blog_Leather_brown.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(".date").text() === "--")
$(".datecontainer").hide();
if($('.thevideo iframe').attr('src') === ""){
console.log('11');
$(".videocontainer").hide();
}
var names = "http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg,http://www.deerns.nl/gfx/image.phtml?image=/images/_images_2012_website/employees/Nederland/Martijn%20Timmer_DIE2082.jpg&width=50&height=50&type=crop,http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg";
var namesArray = names.split(",");
var item, items = [];
for (var i = 0; i < namesArray.length; i++) {
item = {};
item.name = namesArray[i];
items.push(item);
}
var main = $("<ul>");
var str = "<li style='display:block;'><div><img src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg' /></div></li>";
for (var i = 0; i < items.length; i++) {
str += "<li style='display:none;'><div><img src='" + items[i].name + "' /></div></li></ul>";
}
main.html(str);
$('#slider').append(main);
});
</script>
</head>
<body>
<div id="container">
<div class="navbar">
<div class="titlebox">
<div class="title">Gaat Europa het redden met de Euro? en met weet ik wat nog allemaal</div>
</div><!-- end titlebox -->
</div><!-- end navbar -->
<div id="body">
<div class="header">
<div class="theimage">
<div class="imagecontainer">
<div class="image"><!-- <img src="http://www.celfoon.nl/bt-addons/testimage130x130.png" /> -->
<div class="datecontainer">
<div class="monthcontainer">
<div class="dmonth">[[DATEMONTH]]
</div> <!-- en monthcontainer -->
<div class="daycontainer">
<div class="dday">[[DATEDAY]]
</div><!-- end daycontainer -->
<div class="yearcontainer">
<div class="dyear">[[DATEYEAR]]
</div> <!-- end yearcontainer -->
</div>
</div>
</div>
</div><!-- end datecontainer -->
</div>
</div>
</div><!--end theimage -->
</div><!-- end header -->
<div class="content">
<div class="introtextcontainer">
<div class="introtext">
<div id='slider' class='swipe'>
</div>
<a href='#' onclick='slider.prev();return false;'>prev</a>
<a href='#' onclick='slider.next();return false;'>next</a>
<br><br>
</div>
</div>
<div class="fulltextcontainer">
<div class="fulltext">
[[FULLTEXT]]
</div><!--end fulltext-->
</div><!--end fulltextcontainer-->
<div class="videocontainer">
<div class="thevideo">
<iframe allowfullscreen="" frameborder="0" height="174" src="[[YOUTUBE]]" width="280"></iframe>
</div><!-- end videocontainer -->
</div><!-- end thevideo -->
</div><!-- end content -->
</div><!-- end body -->
<div id="footer">
<div class="footertextcontainer">
<div class="footertext">[[FOOTERTEXT]]
</div>
</div>
</div>
</div><!-- end container -->
<script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider = new Swipe(document.getElementById('slider'));
var slider3 = new Swipe(document.getElementById('slider3'));
var slider4 = new Swipe(document.getElementById('slider4'));
</script>
</body>
</html>

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

Categories