Anyway to display some li tags while hiding some using Javascript? I'm sorry if my question doesn't make sense.
Let me write my codes here.
XML:
<array>
<words>
<name>Milk</name>
<background>Background of Milk</background>
<recipes>Recipes using Milk</recipes>
</words>
<words>
<name>Tree</name>
<background>Background of Tree</background>
<recipes>NIL</recipes> or Not Applicable
</words>
</array>
Script/Javascript:
<script>
var wordsName, wordsBG, wordsRecipes, wordsCurrent;
var wordsArray = new Array();
$.ajax({
type:"GET",
url:"words.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('words').each(function() { //find <words> in words.xml
wordName = $(this).find('name').text();
wordBG = $(this).find('background').text();
wordRecipes = $(this).find('recipes').text();
$('<li>'+threatsName+'</li>').appendTo("#testingList");
threatsArray.push({threatsName:threatsName, threatsBG:threatsBG, threatsCases:threatsCases});
})
$('#threats li').click(function(){ //li
wordsCurrent = $(this).index()
$('#description h1').text(threatsArray[wordsCurrent].threatsName);
$('#name').text(threatsArray[wordsCurrent].threatsName);
var backgroundInformation = wordsArray[wordsCurrent].wordsBG;
backgroundInformation = backgroundInformation.split("\\n"); //to clear the line
$('#backgroundInfo').empty(); //empty the things inside
for (x in backgroundInformation) { //starts from zero and go to the last object
$('#backgroundInfo').append(backgroundInformation[x]+ '<br />');
} //for loop CLOSE
var recipesInformation = wordsArray[wordsCurrent].wordsRecipes;
recipesInformation = recipesInformation("\\n"); //to clear the line
$('#recipesInfo').empty(); //empty the things inside
for (x in recipesInformation) { //starts from zero and go to the last object
$('#recipesInfo').append(recipesInformation[x]+ '<br />');
} //for loop CLOSE
})
}
</script>
Lastly, my HTML
<div data-role="page" id="menu">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<h3>Words</h3>
</li>
<li>
<h3>Not Available</h3> <!--Not Available-->
</li>
</ul>
</div>
</ul>
</div>
<div data-role="content"> <!--Start of DESCRIPTION content-->
<ul data-role="listview" id="informationList">
<li>
<h3>Background</h3>
</li>
<li>
<h3>Recipes</h3>
</li>
</ul>
</div> <!--End of DESCRIPTION content-->
</div> <!--End of DESCRIPTION-->
<div data-role="page" id="background"> <!--Start of BACKGROUND-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of BACKGROUND content-->
<p id="backgroundInfo">Not Available</p>
</div> <!--End of BACKGROUND content-->
</div> <!--End of BACKGROUND-->
<div data-role="page" id="recipes"> <!--Start of RECIPES-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of RECIPES content-->
<p id="recipesInfo"> Recipes</p>
</div> <!--End of RECIPES content-->
</div> <!--End of RECIPES-->
As the information above, the second element in the Array, Tree, does not have any information for recipe tab, how can I prompt the page when user clicks into Tree, recipe li will hides itself?
Many thanks. It's the first time I am sending a question.
Welcome to StackOverflow! You seem to be parsing XML and generating HTML dynamically using JavaScript. In your case, maybe the easiest way is to detect the condition during parsing and add a "class" attribute to your <li> nodes. Then define the style class somewhere in your CSS, like this:
<li class="no-recipe">blah blah blah</li>
<style>
li.no-recipe {
display:none;
}
</style>
Not sure what you're aiming for exactly, but a declarative approach is almost always better than a dynamic approach (using JavaScript).
Related
I have a tabbed section that changes the content when selecting a new tab but I want it to always show the home tab when the pages loads. Right now, no tabs displays when the page loads. I want the home tab to show when you first visit the page, Thanks!
Here is the codepen https://codepen.io/emberwolves/pen/rorEmK
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section id="tabbed-wrapper">
<div id="navSection">
Home
Work
About
Contact
</div>
<div id="sections">
<div id="home" class="tabs">
<h4>Home Section</h4>
<p>Welcome. Rather see a CSS only version?</p>
<p>Check it out here</p>
</div>
<div id="work" class="tabs">
<h4>Work Section</h4>
<p>For a pure CSS version check out here</p>
</div>
<div id="about" class="tabs">
<h4>About Section</h4>
<p>This was a quick little pen for fun. Don't mind the ugly styling.</p>
</div>
<div id="contact" class="tabs">
<h4>Contact Section</h4>
<p>Some random contact details...</p>
</div>
</div>
</section>
//nav links
const links = document.querySelectorAll('.navLink');
//Tabbed sections
const tabs = document.querySelectorAll('.tabs');
links.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
//remove current class from inactive links
for(let j = 0; j < links.length; j++) {
links[j].classList.remove('current');
}
//add current class to active link
e.target.classList.add('current');
//used to store the target ID in string format
let target = e.target.textContent.toLowerCase();
for(let i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active')
}
//Show active tab
document.getElementById(target).classList.toggle('active');
}, false)
});
Just add initial classes in your html:
1) First place is nav menu:
Home
2) Second place is home tab:
<div id="home" class="tabs active">
<h4>Home Section</h4>
<p>Welcome. Rather see a CSS only version?</p>
<p>Check it out here</p>
</div>
Full example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section id="tabbed-wrapper">
<div id="navSection">
Home
Work
About
Contact
</div>
<div id="sections">
<div id="home" class="tabs active">
<h4>Home Section</h4>
<p>Welcome. Rather see a CSS only version?</p>
<p>Check it out here</p>
</div>
<div id="work" class="tabs">
<h4>Work Section</h4>
<p>For a pure CSS version check out here</p>
</div>
<div id="about" class="tabs">
<h4>About Section</h4>
<p>This was a quick little pen for fun. Don't mind the ugly styling.</p>
</div>
<div id="contact" class="tabs">
<h4>Contact Section</h4>
<p>Some random contact details...</p>
</div>
</div>
</section>
you need to add click method on it .
document.getElementById("test2").click();
For more info.
And also you need to add id or class to your html tag
Home
your codepen edited.
https://codepen.io/anon/pen/aPjebe
i've a problem to toggle only (this) 1 'card'
$('a[rel="toggle_comments"]').click(function(){
var div = $('.comments');
$(div, this).slideToggle('slow');
});
<!-- This is a example code -->
<section>
<div class="mainclass">
[...]
<div class="select">
Test
</div>
</div>
<ul class="comments">
<!-- Content -->
</ul>
</section>
<section>
<div class="mainclass">
[...]
<div class="select">
Test
</div>
</div>
<ul class="comments">
<!-- Content -->
</ul>
</section>
[...]
When I clicked at 'toggle_comments', toggle all '.comments' classes, not only that, I have clicked. Anyone have any ideas?
Sorry for my bad english.
I hope you understand what I mean - Thanks :-)
If you want to toggle only the .comments under the <section> tag your link is in, do this:
$('a[rel="toggle_comments"]').click(function(){
// find the closest section tag (parent) and find all child `.comments`
var $comments = $(this).closest('section').find('.comments');
$comments.slideToggle('slow');
});
If you want to toggle all .comments:
$('a[rel="toggle_comments"]').click(function(){
$('.comments').slideToggle('slow');
});
I have a dynamic list showing collapsible set. It will generate different sets with id="selection_product_info_xxxx" xxxx=dynamic product id.
<div data-role="navbar">
<ul>
<li><font class="tab_font02">Product 810 Info</font></li>
<li>Product 810 Info 2</font></li>
</ul>
</div>
<!-- Tab End -->
<div data-role="collapsible-set">
<!-- Tab01 Start -->
<div data-role="collapsible" id="selection_product_info_810" data-collapsed="false">
<h3 class="display-none">product 810 info</h3>
<div>Test</div>
</div>
<!-- Tab01 End -->
<!-- Tab02 Start -->
<div data-role="collapsible" id="selection_product_info2_810">
<h3 class="display-none">product 810 info 2</h3>
<div>text 2</div>
</div>
<!-- Tab02 End -->
</div>
<div data-role="navbar">
<ul>
<li><font class="tab_font02">Product 820 Info</font></li>
<li>Product 820 Info 2</font></li>
</ul>
</div>
<!-- Tab End -->
<div data-role="collapsible-set">
<!-- Tab01 Start -->
<div data-role="collapsible" id="selection_product_info_820" data-collapsed="false">
<h3 class="display-none">product 820 info</h3>
<div>Test</div>
</div>
<!-- Tab01 End -->
<!-- Tab02 Start -->
<div data-role="collapsible" id="selection_product_info2_820">
<h3 class="display-none">product 820 info 2</h3>
<div>text 2</div>
</div>
<!-- Tab02 End -->
</div>
In order to make the button work, right now I need to add the event as follow in javascript by hard coding all product IDs. Is anybody know how I can rewrite the following scripts which makes the product id dynamically work and expand the relevant div under the product instead of hard coding the product id?
Remark: we are using jquery.mobile-1.3.2 and jquery-1.9.1.min.js
$("#expand_product_info_810") .on("click", function() {$("#selection_product_info_810").trigger("expand");})
$("#expand_product_info_820") .on("click", function() {$("#selection_product_info_820").trigger("expand");})
$("#expand_product_info2_810") .on("click", function() {$("#selection_product_info2_810").trigger("expand");})
$("#expand_product_info2_820") .on("click", function() {$("#selection_product_info2_820").trigger("expand");})
Update
From your new information, this cant work, as you couldnt keep the pattern you gave:
id="selection_product_info_xxxx" xxxx=dynamic
should be:
id="selection_product_infox_xxxx" x_xxxx=dynamic
SO! You have to do it like this then!
$("a[id^='expand_product']").on("click", function(){
var tmp = $(this).attr("id").split("_");
var id = tmp[2] + "_" + tmp[3];
$("#selection_product_" + id).trigger("expand");
});
http://jsfiddle.net/rb9Rv/
if you have control over the generated HTML, this would be smarter:
<ul>
<li><a data-tab="info_810" class="clickButton ui-btn-active" href="#" id="expand_product_info_810" data-theme="c" ><font class="tab_font02">Product 810 Info</font></a></li>
<li><a data-tab="info2_810" class="clickButton" href="#" id="expand_product_info2_810" data-theme="c" ><font class="tab_font02">Product 810 Info 2</font></a></li>
</ul>
$("a.clickButton").on("click", function(){
$("#selection_product_" + $(this).attr("data-tab")).trigger("expand");
});
http://jsfiddle.net/ctMtA/
Assuming that button, is a <button>, you could do it like this:
$("button[id^='expand_product_info_']").on("click", function(){
var id = $(this).attr("id").split("_")[3];
$("#selection_product_info_" + id).trigger("expand");
});
If it still dont work, you have to do some debuging like so:
$("a[id^='expand_product_info_']").on("click", function(){
alert("click works!");
var id = $(this).attr("id").split("_")[3];
alert(id);
$("#selection_product_info_" + id).trigger("expand");
});
i made quick fiddle for you, but the trigger expand didnt work, also with fixed id's like you said. This seem to changed in version 1.4, if you have 1.4, try this:
$("a[id^='expand_product_info_']").on("click", function(){
var id = $(this).attr("id").split("_")[3];
$("#selection_product_info_" + id).collapsible("expand");
});
working fiddle:
http://jsfiddle.net/5pyvy/2/
Im following a example where they mentioned Ive to insert
$('[data-role="button"]').button();
to add the button dynamically in a proper way. But it shows
button.(..) is not a function, error.
HTML
<div data-role="page" id="page">
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role="content" style="padding: 15px">
<ul data-role="listview" id="listview" data-inset="true" data-filter="true">
<li data-role="list-divider" id="divider">Available Devices</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" id="footer">
<h3>Footer</h3>
</div>
</div>
Javascript function:
function displayFeeds(items){
var ul = $('#listview');
for (var i = 0; i < items.length; i++) {
var li = $('<li/>').html(items[i].DeviceNames);
li.append($('<li/>').html(items[i].DeviceQuantity));
li .append('<a data-role="button" data-theme="b" data-icon="plus" data-iconpos="right">Save</a>');
// Enhance new button element
li.append($('<hr>'));
ul.append(li);
}
$('[data-role="button"]').button();
}
What should I do here Or what am I doing wrong?
I had same problem.
Don't put $('[data-role="button"]').button();
Put ul.parent().trigger( 'create' ); at end of your for loop.
as the title says, is there a function that helps me find out if a listview contains a specific list item that has an id of say hello?
in my javascript i am currently pre loading items in a listview but there is a situation where the same code that adds the items in the listview, it will of coure add and duplicate the items.
i want to do something like this to find id of "hello"
if( (#listView).find("hello") ){
//do nothing
}else{
$(#listView).append('<li id="hello">hello</li>')
}
Html:
<body>
<div data-role="page" id="fields">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" >
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="listViewId" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">divider</h2>
</li>
</ul>
</div>
</div>
</div>
</body>
Is this possible? is there some kind of .Find("id") method for a listview?
what is wrong with find?
if(!$('#listViewId').find("#hello").length){
// append the element
}