Kalai Prakash Kalai Prakash - 3 months ago 10
jQuery Question

how to create dynamically nav bar and when i click nav bar it will create listview in jquery mobile?

I am trying to creating a nav bar dynamically and create a listview when i click the first tab in nav bar. it will created fine. but when click second tab ,the first tab content not hiding automatically it shows each tab same....how to hide it automatically?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h1>Call List</h1>
</div>
<div data-role="content">
</div>
</div>
<script>
$(document).on('pagecreate', '#index', function(){
$('[data-role="header"]').append('<div data-role="navbar"><ul><li id="pageone"><a>Page One</a></li><li id="pagetwo"><a>Page Two</a></li><li id="pagethree"><a>Page three</a></li><li id="pagefour"><a>Page four</a></li></ul></div>');
$('[data-role="navbar"]').navbar();
$('#pageone').click(function(){
$('[data-role="content"]').html('<ul id="List" data-role="listview"></ul>');
$('#List').html('<li><a>Item1</a></li>');
$('#List').listview();
$("#list").listview("refresh");
});
$('#pagetwo').click(function(){
$('[data-role="content"]').html('<ul id="List1" data-role="listview"></ul>');
$('#List1').html('<li><a>Item2</a></li>');
$('#List1').listview();
$("#list1").listview("refresh");
});
$('#pagethree').click(function(){
$('[data-role="content"]').html('<ul id="List2" data-role="listview"></ul>');
$('#List2').html('<li><a>Item3</a></li>');
$('#List2').listview();
$("#list2").listview("refresh");
});
/* $('#pagefour').click(function(){
$('[data-role="content"]').html('<ul id="List3" data-role="listview"></ul>');
$('#List3').html('<li><a>Item4</a></li>');
$('#List3').listview();
$("#list3").listview("refresh");
});*/
});
</script>
</body>



Answer

Simply add these lines with your javaScript code:

   $('#pagefour').click(function(){
    $('[data-role="content"]').empty();
  });
Comments