I am trying to add a list to a <li> after a user clicks on the li. The list is being added but the list is not opening on a new page. See the nested list example on jQuery mobile site. When you click on a list node, the sub list is opening in a new page (kind of). I want the same functionality while dynamically adding list.
Here is my code http://jsfiddle.net/f869z/. When you click on a <li> its adding the new list but not in the same fashion as shown in the jQuery mobile site.
How can I achieve this functionality? Otherwise what is the preferred way to add nested list dynamically.
EDIT: This problem has been solved by refreshing the list view. Now I am adding a listview inside collapsible dynamically. But inside that list, when I am clicking a <li>, pageinit event is getting fired instead of click event. The click event is getting fired when we click the same li second time.
Updated code: http://jsfiddle.net/5zJC5/
I have updated your jsfiddle example so that it works. Check the jsFiddle example here
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Nested List</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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>
<script>
$(document).on('click', '#list li', function() {
$(this).append("<ul><li>Subcategory 1 <ul> <li data-role=\"list-divider\">Sub category</li> <li data-icon=\"false\">Test 1</li> <li data-icon=\"false\">Test 2</li> </ul> </li> <li>Subcategory 2 <ul> <li data-role=\"list-divider\">Sub category</li> <li data-icon=\"false\">Test 1</li> <li data-icon=\"false\">Test 2</li> </ul> </li></ul>").parent().listview('refresh');
});
</script>
</head>
<body>
<div id="list-page" data-role="page">
<div data-role="header">
<h1>Nested List Page</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div data-role="collapsible">
<h3 data-position="inline">Filtered list<h3>
<ul data-role="listview" data-divider-theme="d" id="list">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I hope this helps
Related
This question already has answers here:
jQuery.find() ignores root node
(3 answers)
Closed 4 years ago.
I have the following code:
//load nav menu and footer from index.html
$.get('index.html', function(data) {
$('#menuItems').replaceWith($(data).find("#menuItems")); //this works
$('#footer').replaceWith($(data).find("#footer")); //this does not work
});
The code that loads the menu works but the code that loads the footer does not. The only difference I can see is that the #footer is directly under the body element.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- normal head stuff, script references, meta tags, etc. -->
</head>
<body>
<nav>
<ul id='menuItems'>
<li>item</li>
</ul>
</nav>
<div>some content here</div>
<footer id='footer'>stuff</footer>
</body>
</html>
The basic layout above is the same for index.html and the files that pull from it.
In the console if I do some tests, it shows that root elements are not "found":
11:54:12.267 $(data).find('#menuItems').length
11:54:12.270 1
11:54:15.633 $(data).find('#logo-container').length
11:54:15.635 1
11:54:23.001 $(data).find('#footer').length
11:54:23.004 0
11:54:37.008 $(data).find('nav').length
11:54:37.012 0
I really can't think of any other differences. I'll be glad to provide more info if needed.
$(data) doesn't return the entire HTML, only the contents of the <body> element. As a result, <nav> and <footer> become top-level elements in $(data), but find() only searches descendants.
You should wrap it in another element so you can search it:
let data = `<body>
<nav>
<ul id="menuItems">
<li>item</li>
</ul>
</nav>
<footer id="footer">stuff</footer>
</body>`;
$("#button").click(function() {
var contents = $("<div>", {
html: data
});
$('#menuItems').replaceWith(contents.find("#menuItems"));
$('#footer').replaceWith(contents.find("#footer"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul id="menuItems">
<li>old item</li>
</ul>
</nav>
<footer id="footer">old stuff</footer>
<button id="button">Click</button>
Use filter for root level nodes (see jQuery.find() ignores root node)
let response = `<body>
<nav>
<ul id="menuItems">
<li>item</li>
</ul>
</nav>
<footer id="footer">stuff</footer>
</body>`;
console.log('footer : ', $(response).filter('#footer').length);
console.log('menuItems : ', $(response).find('#menuItems').length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
For a workaround, you can create a custom function like described in this post.
Bootstrap's site tell us,
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.
In the following code, which is considered to be "via JavaScript" there is the following script:
<script type="text/javascript">
$(document).ready(function(){
$('.myDropdownHandle').dropdown('toggle');
});
I was under the impression that this block of code will be necessary for the dropdown to work if we wanted to toggle "via Javascript" but I can erase that block and the dropdown will still work via the data attributes, but if I erase the data attributes the dropdown won't work at all.
<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.myDropdownHandle').dropdown('toggle');
});
</script>
</head>
<body style='margin:30px'>
<div class="dropdown" id="myDropdown">
<a class="myDropdownHandle" data-toggle="dropdown" data-target="#" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</body>
</html>
This jQuery code will make it so that upon the loading of the page, your dropdown list would be showing, as in, the contents of the drop down list will be visible.
$(document).ready(function(){
$('.myDropdownHandle').dropdown('toggle');
});
Therefore, if you don't want the dropdown toggled on page load, then remove this piece of code. However if you remove the data attribute, your dropdown will not behave as one.
Reference this W3School Link will further clarify for you. Here is an example which shows the dropdown toggle in action.
If you read the bottom of the section here
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.
All this line does, it decide whether you want to automatically open the menu.
$(document).ready(function () {
$('.dropdown-menu').dropdown('toggle');
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu" aria-labelledby="dLabel">
<ul>
I made a webpage, where I can change background color, font style and size by 9 different buttons.
Problem #1 here is I'm using one css file for every single button,
and problem #2 is that when for example changing background color to blue, and I want to change the font style to cursive, I cant have 2 active at the same time, the other one goes back to default.
Any advice on how to do this?
Here are my CSS and HTML markup:
<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<link href="style.css" rel="stylesheet">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
CSS 1 <span class="arrow">▼</span>
<ul class="sub-menu">
<li onclick="swapStyleSheet('')">Bytt skrift</li>
<li onclick="swapStyleSheet('skrift1.css')">Bytt farge</li>
<li onclick="swapStyleSheet('background1.css')">Bytt bakgrunnsfarget</li>
</ul>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
CSS 2 <span class="arrow">▼</span>
<ul class="sub-menu">
<li onclick="swapStyleSheet('')">Bytt skrift</li>
<li onclick="swapStyleSheet('skrift2.css')">Bytt farge</li>
<li onclick="swapStyleSheet('background2.css')">Bytt bakgrunnsfarget</li>
</ul>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
CSS 3 <span class="arrow">▼</span>
<ul class="sub-menu">
<li onclick="swapStyleSheet('')">Bytt skrift</li>
<li onclick="swapStyleSheet('skrift3.css')">Bytt farge</li>
<li onclick="swapStyleSheet('background3.css')">Bytt bakgrunnsfarget</li>
</ul>
</div>
<p class="skrift">skrifttypen skal endre seg.</p>
<p class="skrift">skrifttypen skal endre seg.</p>
<p class="skrift">skrifttypen skal endre seg.</p>
</body>
</html>
Well, do not swap stylesheet files for starters. You can either:
have different classes for different situations, and set these classes on your element withs JavaScript. This is quite easy even in vanilla JS, for example:
document.getElementById('myButton').classList.add("btn-red");
load override stylesheets dynamically, which will override existing styles. So instead of having full-blown, complete stylesheet, just put the modifications in the CSS files, and load it after the default stylesheet.
I would definitely recommend the first approach, it is much more maintanable and sane. Most CSS frameworks work the same way, just take a look at Bootstrap (twitter-bootstrap) for example.
I am trying to develop my site with foundation dropdown. when i see reponsive size from pc browser it's working
(not 1st time:
click first time url will be ..../index.html#
again reload with this then it works. 2nd time it's working). when i load url in mobile and try to test it's not working.
Here is my code in header.html:
<div class="menuSet" style="background-image: url('img/image67.JPG');">
<nav class="top-bar row changedWmiddle" data-topbar style="background-image: url('img/image67.JPG');height:44px;">
<ul class="title-area setMenu">
<li class="name">
<h1> </h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon setMenu2">
<span>Menu</span>
</li>
</ul>
<div class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left row" style="width:98%;">
<li class="setMenu3" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image68.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image69.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image70.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image71.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image72.JPG"></li>
<li class="setMenu4" style="min-width:16.43%;background-image:url('img/image67.JPG');"><img src="img/image73.JPG"></li>
</ul>
</div>
</nav>
I included header.html in my index.html and linked script like.
at starting of the page:
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/modernizr.js"></script>
at bottom:(before tag)
<script src="js/foundation/foundation.js"></script>
<script src="js//foundation/foundation.topbar.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Here is the link of my url
http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website%28without_comment%29/index.html
Please help. Thanks in advance.
foundation.min.js includes all the foundation js.
You need to use either "foundation.min.js" or "foundation.js, foundation.topbar.js, etc".
Reference: http://foundation.zurb.com/docs/javascript.html
<script src="/js/foundation.min.js"></script>
<!-- or individually -->
<script src="/js/foundation.js"></script>
<script src="/js/foundation.alert.js"></script>
<!-- ... -->
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>
The trouble you're experiencing could be coming from having both js files loaded.
Try just having one set loaded.
I found the problem is with modernizr.js, to test it you can remove foundation will work as expected.
I am trying to achieve the stackable effect as shown here:
http://twitter.github.com/bootstrap/components.html#navs
but somehow it is not working for me. Here is the link to a plunk that I have created:
http://plnkr.co/edit/LSR3ijKGiOIyrYAbHm7g
It just shows three list items one below another without the navbar effect of bootstrap.
<!doctype html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="offset4 span4">
<ul class="nav nav-tabs nav-stacked">
<li> Item1</li>
<li> Item2</li>
<li> Item3</li>
</ul>
</div>
</div>
</body>
</html>
I must be doing some blunder that something as simple as nav-stacked is not working. Would be glad and grateful if someone could point out my mistake.
Put the content in anchors, like so:
<ul class="nav nav-tabs nav-stacked">
<li class="active">Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
Demo: http://jsfiddle.net/jpKAF/