Strange behavior in jQuery Mobile nested list views - javascript

I'm experimenting with nesting listviews in jQuery Mobile. In the code below I have three list elements all of which contain a '.sub-list' element with 'display:none'. The prescence of the '.sub-list' elemnt cause two odd behaviors.
The precence of the 'sub-list' elements causes '#main-list' to be css formatted, i.e. the list elements have a gradient on the color and when you mouse over it changes color as well.
The precence of the '.sub-list' elements cause the '.main-list-element' list elements to link to a new page with the '.main-list-element' text at the top of the page. Can anyone tell me why this is happening and how to prevent it?
Please note I have experimented with jQuery Mobile collapsable content and have ruled out using it.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
</head>
<body>
<div data-role="page" id="date-page" class="type-interior" style="width:100%">
<ul id='mainlist' data-role="listview" class='list-element'>
<li class='main-list-element'>test 1<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
<li class='main-list-element'>test 2<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
<li class='main-list-element'>test 3<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
<script>
$('.list-element').click(function(){
alert("hi");
});
</script>
</body>
</html>

Update:
Here is an official demo of creating a Nested Listview in jQuery Mobile 1.4.
This is called Nested Listview which is deprecated as of latest stable version (1.3) and will be removed in version (1.4).

Related

Twitter Bootstrap navbar not working in PLAY framework

I have a main.scala.html which has header,navbar and footbar as follows-
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<ul class="nav nav-justified" id="myTab">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout" data-toggle="tab">#Messages("views.main.logout")</li>
</ul>
<div id="showData">
#content
</div>
</div>
</head>
<body>
</body>
</html>
The page content should be displayed as in the tags.
However on clicking the tabs the page contents are not getting displayed.
Note the page contents were getting displayed earlier on clicking on the tabs but after adding data-toggle="tab" to the list elements it stopped displaying.
Check your html code:
...
<head>
<ul class="nav nav-justified" id="myTab">
There is a end head and start div tag missing.
Preview source code generated by Play in the browser and use built-in browser inspector for HTML error (also you can just try to validate it with W3C Validator
If your view looks exactly as you showed as - it can not produce valid HTML document

Cannot get a popup to work in jQuery Mobile

I am sure I am just missing something basic, but can anyone see anything wrong with the following code? When I click the first button, it does not open a popup. The second button opens the popup as a dialog.
<!DOCTYPE html>
<html>
<head>
<!-- JQUERY MOBILE CSS -->
<link rel="stylesheet" href="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!-- JQUERY -->
<script src="//codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<!-- JQUERY MOBILE -->
<script src="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<p>Open Popup</p>
<p>Open Popup(dialog)</p>
</div>
</div>
<div id="menu-items" data-role="popup">
<ul data-role="listview">
<li>google.com</li>
<li>google.com</li>
</ul>
</div>
</body>
</html>
Indeed it's a small thing you're missing! =)
jQuery 1.3 Mobile Pop-up Docs:
...then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. This is a similar markup pattern to the dialog widget. A popup div has to be nested inside the same page as the link.
Move the <div id="menu-items"></div> to within the <div id="home" data-role="page"><div> node, then that should be it!
Working jsFiddle included. Dialogs are deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.
i think there are two things:
I). for opening a popup you have to place popup content inside the data-role='page'
II). for opening a dialog you have to place dialog content outside the data-role='page'
working fiddle : http://jsfiddle.net/REthD/10/

Twitter Bootstrap tabs not working in IE8

I'm trying to get tabs working in IE8, using code directly off the examples page for Twitter Bootstrap, but they just aren't behaving the same way as they do on the example page.
Specifically, the inactive tabs always remain visible.
Code below:
<head>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
</head>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1...</div>
<div class="tab-pane" id="profile">2...</div>
<div class="tab-pane" id="messages">3...</div>
<div class="tab-pane" id="settings">4...</div>
</div>
<script>
$(function () {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
I've tried initiating the tabs both through using data-toggle tags and also using the suggested .tab() method but no difference... the inactive tabs are always visible!
JSfiddle link here (but jsfiddle doesn't work in IE8 anyway): http://jsfiddle.net/4gNpt/
SOLVED! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.
Solved! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.

jQuery Mobile create a panel

I'm trying to start with jQuery Mobile but I'm stuck when I'm trying to create a left panel with an overlay slide. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>- test-</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="panel" id="testPanel" data-theme="e" data-position="left" data-display="overlay">
<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
</div>
<div data-role="header">
<h1>test</h1>
Contact
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<h4>Copyright 2013 - All Rights Reserved -</h4>
</div>
</div>
</body>
</html>
It doesn't work, when I'm clicking on my link button I have this message "Error loading page" and the content of my panel is already shown in the page. Thanks for your help!
Seems like you're using outdated versions of both jQuery and jQuery Mobile frameworks. I would suggest updating to the latest release versions.
Here's a working demo with your same markup using jQuery 1.9.1 and jQuery Mobile 1.3.1
Sliding panels were introduced in JQM 1.3 version. So it won't work for other versions. USe jQuery 1.7.2- 1.9.1 for JQM 1.3
See the blog post for more details : http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/
If this is not your index page then you are most probably navigate to it through an <a href="yourpage.html>Page</a> in this case jquery uses Ajax request to navigate from one page to another the ajax request does not load the whole content of your page , it only loads the content of the <body> tag i.e any scripts that you are writing inside the <head> tag will not be loaded thus the page will not work properly and you will face error
to solve this you need to use data-ajax="false" inside the <a> attribute to prevent jquery mobile to use Ajax call to load your page.
if it is your index page then please past the js code so we can check it
in all cases check these link
for loading jqm pages and this link problem of ajax call in jqm

Extra space added after list on jQuery reload of div in IE

I am writing a web page which updates a list using jQuery when something is selected. Below the list is a button. The update works fine in Firefox and Chrome, but in IE, a bit of space is added between the list and the button every time it updates. Following is a stripped-down example that does the same thing:
<html>
<head>
<style type="text/css">
#list {
padding: 10;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="test">
<ul>
<!-- List -->
<li>
<div id="list">
<ul>
<li>before 1</li>
<li>before 2</li>
</ul>
</div>
</li>
<!-- Button -->
<li>
<div>
<button id="button" onClick="reload();">button</button>
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
function reload() {
var html =
"<ul>" +
"<li>after 1</li>" +
"<li>after 2</li>" +
"</ul>";
$("div#list").html(html);
}
</script>
</html>
Click the button. In Firefox and Chrome, it stays put. In IE (9), it shifts down a bit (a bit meaning about 10 or 20 pixels. Easily noticeable to the human eye, that is) every time I click it. Can anyone tell me what is causing this?
Thanks.
Update
Seems like the problem is related to IE padding calculating rather than your code, since the same happens using js .innerHtml() directly.
I would then suggest removing the padding and adding margins to the ul, since it affect the element you are removing maybe also the margins will be removed this time.
#list {
padding: 0;
}
#list ul {
margin:10;
}
http://jsfiddle.net/qEphF/6/
According to jQuery docs
This method uses the browser's
innerHTML property. Some browsers may
not generate a DOM that exactly
replicates the HTML source provided.
Maybe you should try a different approach. For example
$("div#list").empty().append($(html));
<style type="text/css">
#list {
padding: 10;
}
</style>
Each time you call the reload function, IE adds 10 padding which is the cause of your problem.

Categories

Resources