I`m learning JQM and have a lot of questions. Not asking if not trying to do many things.
I have a listview element. When page is loaded it sets listview with autodivider alphabetically by name. When you click on the "category" navigation button it sets elements according to its category, grouping. All is fine there.
My problem is when trying to go back clicking on the "names" navigation button nothing changes. Please help.
Here is simplified sample: http://jsfiddle.net/smatisen/v382r874/
<div data-role="page" id="home">
<div data-role="header">
<h1>Test</h1>
<div data-role="navbar">
<ul>
<li>Name</li>
<li>Category</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" class="todo-listview">
<li data-category="cat 1"><h2>Test Name 1</h2></li>
<li data-category="cat 2"><h2>Test Name 2</h2></li>
<li data-category="cat 1"><h2>Test Name 3</h2></li>
</ul>
</div>
</div>
In your jsFiddle code, when you click on the "Name" navigator button, the function that you have written called "showRecordsByName" is called. The code of that looks as follows:
function showRecordsByName()
{
$('.todo-listview').listview({
autodividers: true
});
$('.todo-listview').listview("refresh");
}
And ... that's all it does. It refreshes the listview with class ".todo-listview" but since the content of the list has not changed in any way, it remains exactly as it was before this code was executed.
Thank you for using jsFiddle, it makes examination much easier.
I found solution by adding hide and show elements on button click events and clonin listview with different class name. Not sure if this is elegant, but it is working. http://jsfiddle.net/smatisen/v382r874/2/
$(document).on('click', '#setTableOrder', function(event) {
console.log("DEBUG - SetTableOrder clicked");
$('.byNamelistview').closest('.ui-listview').hide();
$('.todo-listview').closest('.ui-listview').show();
showRecordsByCat();
});
All you need to do is modify the autodividersSelector on the show records by name function to get the first letter of the text:
function showRecordsByName(){
$('.todo-listview').listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.text().charAt(0);
return out;
}
});
$('.todo-listview').listview("refresh");
}
Updated FIDDLE
Related
I have an index.html containing the following:
index.html
<html>
<head>...</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Page two
</li>
<li>Page three
</li>
</ul>
</div>
</div>
<div data-role="page" id="pagetwo">
</div>
<div data-role="page" id="pagethree">
<div id="headerPageThree" data-role="header">
<div data-role="main">
<div id="anyDiv"></div>
</div>
</div>
</div>
<body>
<html>
As you see, the navbar in index.html links between pagetwo and pagethree.
Furthermore I have an main.js
main.js
$(document).ready(function () {
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
Let's say I open index.html with Chrome. URL is
file:///C:/Users/index.html
Then I click on "Page three" in the navbar. URL is then
file:///C:/Users/index.html#pagethree
The problem is, that the styling of items like the selectmenu looks absolutely strange. It's transparent for example. I add more things than shown in the main.js example and some of them aren't even displayed. Meaning there is nothing where they should be.
But the most curious thing is, that if I press F5 on the page where URL is
file:///C:/Users/index.html#pagethree
, then everything is perfect. I don't get this.
What is the difference between pressing F5 on index.html and pressing F5 on index.html#pagethree?
Can anybody help?
Thanks a lot.
The theme must be set on the element, as it isn't being applied from the parent page. I am not completely sure why though...
This can be done by adding the data-theme attribute when you create the select element:
$(document).ready(function () {
$('<select>').attr(
{'name': 'fuu','id': 'load-fuu',
'data-native-menu':'false',
'data-theme': 'a'
}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('#load-fuu').selectmenu();
});
Lastly, if you would like, a codepen example.
Edit: the point made about the option needing a value for selection is valid (though it will still theme properly after we add data-theme)
Instead of the regular jQuery document.ready, use the jQuery Mobile events like pagecreate;
$(document).on("pagecreate","#pagethree", function(){
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
If you want your option to be selectable, give it a value attribute.
DEMO
Problem is following. So, I have this HTML
<div class="sitemap">
<div class="collapse-all">
[alles Ausklappen / Einklappen]
</div>
<div class="collapse-list"> <!-- 1. box -->
<div class="collapse-box">
<h2>
Logo
</h2>
<!-- This "in" class for some reason helps us to keep all boxes closed -->
<div class="collpase-container collapse in" id="first-select-box">
<ul>
<li >
And I need to add class, lets say "active" to an element collapse-box when user clicks on div "collapse-all". I hope I made it clear.
Here is small screenshot from DOM.
LINK TO screenshot:
http://i62.tinypic.com/r8e8zs.jpg
pls try to edit this fiddle:
http://jsfiddle.net/ufe8n/1/
You can do this:
$(".collapse-all a").click(function(e){
e.preventDefault();
$(this).closest(".collapse-all").next().find('.collapse-box').addClass('active');
});
Is this you want.
You can use this code in click handler of .collapse-all div:
$(".collapse-all").click(function(){
$(this).next().find('.collapse-box').addClass('active');
});
$(".collapse-all").click(function(){
$(".collapse-box").addClass("active");
});
$(".collapse-all").live("click",function(){
$(".collapse-box").addClass("active");
});
I have two buttons that are essentially "next" and "previous" buttons for my tabbed form with bootstrap. The code works when you go from the introduction tab to the applicant tab just fine the way it is. The only problem is there are 11 "tabs" in the element. I am needing essential parts in this <a> to change on each tab.
What I am needing to change is the href , .style.width , and the two classNames at the end of the `onclick' function each time the user progresses through the form.
Previous
Next
The sections that need to correspond with the buttons are identified with an id that is different for all 11 sections.
<div class="tab-pane" id="confirmation">
So for example when the users clicks the button "next" from the introduction tab I need the above to change to: (and vise versa for the previous button)
Previous
Next
and so on throughout the tab-panes.
I am figuring I could do something like, I just really don't know how to start it and how to change just the specific onclick elements like I am needing to.
if(this tab-pane is something?)
{
document.getelementById('previous').href="";
document.getelementById('previous').style.width="";
document.getelementById('previous').className="";
}
As Requested in the comments the tabs are laid out like so:
<div class="tab-content">
<div class="tab-pane" id="introduction">
//content here
</div>
<div class="tab-pane" id="applicant"> //and so on just like this for all 11 tabs.
//content here
</div>
</div>
Here you go...
This is using Twitter bootstrap and Jquery...
Hopefully its helpful to you...
The progress bar is a bit of a hack, but its a start and Im sure you can figure things out from there...
The only thing that sucks is that the tabs are clickable, and that isn't what you wanted, since you want them to progress through the form without being able to click on the tabs....But the nuts and bolts are here
DEMO HERE
$(document).ready(function(){
//Progress bar calculation
function setProgress(){
var length = $tabs.length;
var index = ($('li').index($(".active")))+1;
var width = (index/length)*100;
$('#progressBar').css('width', width+'%');
}
var $tabs = $('#tab_bar li');
setProgress();
$('#prevtab').on('click', function () {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
setProgress();
});
$('#nexttab').on('click', function () {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
setProgress();
});
$tabs.click(function () {
setTimeout(setProgress, 200)
});
});
Then your HTML, I dunno what you had for < ul > , cuz you didn't provide that part... so I just hacked something up...but this should be similar to your structure
<ul class="nav nav-tabs" id="tab_bar">
<li class="active">Intro</li>
<li>SecondTab</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="introduction">
asdasdasdas
</div>
<div class="tab-pane" id="secondtab">
asdasdsagreteryterythhgh
</div>
<div class="tab-pane" id="thirdtab">
rthrthrthrthrt
</div>
<div class="tab-pane" id="fourthtab">
yujghjuyjyujedgjhegj
</div>
</div>
<a class="btn" id="prevtab" type="button">Prev</button>
<a class="btn" id="nexttab" type="button">Next</button>
DEMO HERE
I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?
The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/
I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.
I came with a solution similar to this ONE
but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.
Therefore, how can I do that?
You can try this way
<div id="menu">
<ul>
<li id="a">item a
<div id="contentA" style="display:none">Description of item A</div>
</li>
<li id="b">item b
<div id="contentB" style="display:none">Description of item A</div>
</li>
</ul>
</div>
<div id="content"></div>
<script type="text/javascrip">
$(document).ready( function () {
$('#a').click(function() {
$('#content').html($('#contentA').html());
});
$('#b').click(function() {
$('#content').html($('#contentB').html());
});
});
<script>
I updated your example, it now uses hidden divs inside the clickable menu items, and on li click it finds the menu description and displays it.
This method does not depend on ids and degrades more gracefully (except if the client doesn't support JS but supports CSS display).
Your description is a bit unprecise, but if I get it right your could use IDs for the description text and fade them in/out with jQuery.
http://jsfiddle.net/PajFP/14/ (updated)