I am trying to get values and text from elements in a jQuery accordion. Their are two lists separate lists on the home page wrapped in accordion. You can see the html/javascript below.
<!--Homepage Accordion-->
<div data-role="collapsible-set" data-inset="false" id="homepageAccordian" >
<!-- Crew List -->
<div data-role="collapsible" id="collapsibleCrewList">
<h3>Current Crew</h3>
<ul data-role="listview" data-inset="false" id="crewList">
<li>Crew #1</li>
<li>Crew #2</li>
<li>Crew #3</li>
<li>Crew #4</li>
</ul>
</div>
<script>
$(document).on('pageshow', '#TCHomepage', function(){
//alert('page show event fired');
checkSessionStorage();
});
</script>
<script>
$(document).on('click', '#crewList li a', function () {
clickOnCrewOnHomepage();
});
</script>
<!-- Open Calls -->
<div data-role="collapsible"id="collapsibleOpenCallsList">
<h3>Open Calls</h3>
<ul data-role="listview" data-inset="false" id="openCallsList">
<li>Call #1</li>
<li>Call #2</li>
<li>Call #3</li>
<li>Call #4</li>
</ul>
</div>
<script>
$(document).on('click', '#openCallsList li a', function () {
clickOnTroubleCallOnHomepage();
});
</script>
</div>
My issue is that when you click on one of the links in the accordion I cannot get the value of the link or the text of the link clicked respectively. In my javascript file I am using these functions to try and grab the values or text.
$(this).closest('li').attr('value'); and $(this).text();
My event handler for both accordions is $(document).on('click', '#crewList li a', function () { }); with the ids being different.
The problem is that these functions are not returning anything when the link is clicked.
Related
I have several collapsed listviews. These can be filtered by an input field. At the moment, they're all collapsed and need to be opened individually after filtering. I'd like filtering to open them automatically. My question is very similar to this one here, but specifically I'm filtering a collapsible listview widget, not a collapsible widget. Any help would be much appreciated!
html:
<form class="ui-filterable">
<input id="filterBasic-input" data-type="search">
</form>
<div class="filterMe" data-role="collapsible" data-inset="true" data-iconpos="right" data-collapsed-icon="carat-d" and data-expanded-icon="carat-u">
<h2>Foods</h2>
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input">
<li data-role="list-divider">Fruits</li>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Grapes</li>
<li data-role="list-divider">Vegies</li>
<li>Carrot</li>
<li>Lettuce</li>
<li>Pumpkin</li>
<li>Celery</li>
</ul>
</div>
<div class="filterMe" data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" and data-expanded-icon="carat-u">
<h2>Things</h2>
<ul data-role="listview" data-filter="true" data-input="#filterBasic-input">
<li data-role="list-divider">Kitchen things</li>
<li>Plates</li>
<li>Bowls</li>
<li>Cutlery</li>
<li data-role="list-divider">Office things</li>
<li>Pens</li>
<li>Paper</li>
<li>Computer</li>
</ul>
</div>
javascript:
$(document).on("pageshow", "#usagePicker", function () {
$(".filterMe").on("filterablefilter", function (event, ui) {
$(".ui-collapsible:not(.ui-screen-hidden)").collapsible("option", "collapsed", false);
});
});
I would check if any listview items are visible after the filter and then expand/collapse based on that:
$(".filterMe").on("filterablefilter", function (event, ui) {
var anyVisible = false;
ui.items.each(function( index ) {
if (!$(this).hasClass("ui-screen-hidden")){
anyVisible = true;
}
});
$(this).collapsible("option", "collapsed", !anyVisible);
});
DEMO
I have problems with creating a dropdown menu with jQuery.
This code shows the sub menus on hover but I couldn't get the sub sub menu to work too
$(document).ready(function() {
$("li").has(".sub").hover(function() {
$(this).find(".sub").toggle();
});
});
Here's the JS code
http://codepen.io/anon/pen/rVmabP
Lose the sub-sub class and use the immediate descendant selector to help you:
HTML
<ul id="nav">
<li>11111
<ul class="sub">
<li>2</li>
</ul>
</li>
<li>11111
<ul class="sub">
<li>2</li>
<li>22222
<ul class="sub">
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
JavaScript
$(document).ready(function() {
$("li").has("> .sub").hover(function() {
$(this).find("> .sub").stop().slideToggle();
});
});
JSFiddle
Note that this would work for unlimited nested .subs.
I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.
JS
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
HTML
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unfortunately after click nothing happens. No errors in console as well.
Probably the mistake is in a JS code, do you have an idea what is an issue?
https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On
use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});
Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.
Try wrapping with a DOM ready listener (http://api.jquery.com/ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})
$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li
<script type="text/javascript">
$("#mainmenu li").click(function(e) {
alert($(this).attr('id'));
return false;
});
</script>
Demo: http://jsfiddle.net/ptx2hwy3/
I have a web page with tabbed content. The information for each tab is pulled from a database. The tab only displays if content exists. The JS requires class="active" to be set on the first tab to allow it to load and also to change the colour of the tab to show it is the active tab.
The problem I have is that I don't know which tab will be first, as there may not be any information for the first tab, so it will not display and it will be tab 2 or 3 that will show first.
How can I say 'make this tab have class="active" if it is first'?
HTML:
<nav class="filters">
<ul class="tabs">
<li class="active">Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
</nav>
<article class="tab-content has-aside wysiwyg active" id="uniquename-tab-1">
<h1>Content 1</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-2">
<h1>Content 2</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-3">
<h1>Content 3</h1>
</article>
JavaScript:
function tabs($container) {
$container.each(function() {
$('.tabs > li > a', $container).on('click', function(e) {
e.preventDefault();
var tab_id = $(this).attr('data-tab');
$('.tabs > li', $container).removeClass('active');
$('.tab-content', $container).removeClass('active');
$(this).parent().addClass('active');
$("#"+tab_id, $container).addClass('active');
});
});
}
$("ul.tabs li:eq(0)").addClass('active');
I suppose you are using Bootstrap. If so, I had a similar problem and added a call to the tab function, as stated in the usage section of their doc:
$(document).ready(function () {
$(".tabs a:first").tab('show');
}
I'm looking for a solution, it must work in IE also, that I can have the content hidden and then when you click one of the menu items it shows the content. However, the content doesn't hide until a user clicks on the next link...
Please check this link
http://jsfiddle.net/varada/YLX9x/
you can use jquery hide() and show() functions for that.
Let the id of div that is to be hidden be hidden_div, let menu item be menu_item, next button be next,
Import the jquery.js
and write the ready function as below..
$(document).ready(function() {
$('#menu_item').click(function() {
$('#hidden_div').show();
});
$('#next').click(function() {
$('#hidden_div').hide();
});
});
or if you mean the content be visible till he click the next link on the menu item, add a class name say, menu_class to the menu items and write the code
$('.menu_class').click(function() {
$('#hidden_div').hide();
});
instead of $('#next').click(function()
if you have a menu like
<ul>
<li class='menu_class'>item 1</li>
<li id='menu_item' >item 2</li>
<li class='menu_class'>item 3</li>
</ul>
and the div
<div id='hidde_div' style='display:none'>
content
</div>
then if you click item 2 the div will get displayed. and if you click item 1 or item 3 it will get hidden. make sure you are using the code $('.menu_class').click(function() {
html:
<li class="main">Web
<ul>
<li>Designing</li>
<li>Development</li>
</ul>
</li>
<li class="main">IT
<ul>
<li>Sales & Service</li>
<li>CCTV</li>
<li>DVR</li>
</ul>
</li>
<li class="main">ITES
<ul>
<li>BPO</li>
<li>Online Portal</li>
<li>Online Marketing</li>
</ul>
</li>
js:
$(document).ready(function(){
$('li ul:not(:first)').hide();
$('ul li').click(function(){
$(this).closest('.main').next().find('ul').show();
$(this).closest('ul').hide();
});
});
http://jsfiddle.net/7QheB/