Load page using ajax in list view using JQuery Mobile
<!DOCTYPE html>
<html>
<head>
<meta name="Jquerymobile" content="ListView">
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<ol id=list1 data-role=listview>
</ol>
<ol id=list2 data-role=listview>
</ol>
<ol id=list3 data-role=listview>
</ol>
<br />
<a data-role=button data-icon="arrow-r" data-iconpos="right" data-theme="a" id=add>Get Laptop Image</a>
<a data-role=button data-icon="arrow-r" data-iconpos="right" data-theme="b" id=mobile>Get Mobile Image</a>
</div>
</div>
</body>
</html>
<script>
$("#add").bind ("click", function (event)
{
if( $('#list2').is(':visible') )
{
// it's visible, do something
$("#list2").slideUp();
}
else
{
}
$("#list1").load("test.html");
$("#list1").show();
});
$("#mobile").bind ("click", function (event)
{
if( $('#list1').is(':visible') )
{
// it's visible, do something
$("#list1").slideUp();
//document.write("Mobile");
}
else
{
// it's not visible so do something else
}
$("#list2").load("laptop.html");
$("#list2").show();
// $("#list1").slideUp();
});
</script>
<html>
<head>
<meta name="Jquerymobile" content="ListView">
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<ol id=list1 data-role=listview>
</ol>
<ol id=list2 data-role=listview>
</ol>
<ol id=list3 data-role=listview>
</ol>
<br />
<a data-role=button data-icon="arrow-r" data-iconpos="right" data-theme="a" id=add>Get Laptop Image</a>
<a data-role=button data-icon="arrow-r" data-iconpos="right" data-theme="b" id=mobile>Get Mobile Image</a>
</div>
</div>
</body>
</html>
<script>
$("#add").bind ("click", function (event)
{
if( $('#list2').is(':visible') )
{
// it's visible, do something
$("#list2").slideUp();
}
else
{
}
$("#list1").load("test.html");
$("#list1").show();
});
$("#mobile").bind ("click", function (event)
{
if( $('#list1').is(':visible') )
{
// it's visible, do something
$("#list1").slideUp();
//document.write("Mobile");
}
else
{
// it's not visible so do something else
}
$("#list2").load("laptop.html");
$("#list2").show();
// $("#list1").slideUp();
});
</script>
Comments
Post a Comment