Develop Reference

Toggle only this item

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');
});

Populate jQuery Mobile page content when a dynamic link is clicked

I'm kind of new to jQuery Mobile and AJAX requests. I'll try to be as clear as I can.
I'm developing a project for mobile and I'm using the jQuery Mobile auto-complete list, and populating it with an XML file (because it's too complicated for me to do it with a MySQL database right now).
I've succeeded in pulling the auto-complete list, filled with data from my external XML file (lista.xml), with this code:
<script>
$(function(){
$.ajax({
type: "GET",
url: "lista.xml",
dataType: "xml",
success: function(xml) {
$(xml).find("anuro").each(function(){
Cientifico = $(this).find("n_cientifico").text();
Comun = $(this).find("n_comun").text();
Foto = $(this).find("foto").text();
Familia = $(this).find("familia").text();
SubFamilia = $(this).find("subfamilia").text();
$("#lista").append('<li><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></li>');
});
$("#lista").listview("refresh");
}
});
});
</script>
This is the code in the content part of my page:
<ul id="lista" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Buscar..." data-inset="true">
</ul>
This works fine right now. It loads all the data from my XML file, displays the correct picture of the anuro (frog) and the family, and all. My question is:
How can I find out which option of the list is clicked, and populate another page <div> with the correct data from the same XML file?
The idea of the web app is, as a user you search for an anuro (frog) by the scientific name, or by the family of the species, and when you click it the page displays more info about that species.
For another example, I'll paste a sample of what I want to accomplish, filled with sample data:
<!-- PAGINA RESULTADO -->
<div data-role="page" id="resultados">
<div data-role="header" data-position="fixed">
<h1>eFrogs</h1>
<a data-rel="back" data-icon="back" class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all">volver</a>
</div>
<div role="main" class="ui-content">
<!-- TITULO -->
<h3><center><i>Phyllomedusa Sauvagii</i></center></h3>
<!-- FOTO -->
<a href="#foto" data-rel="popup" data-position-to="window" data-transition="pop">
<img class="popphoto" style="margin-right:10px" src="img/phyllomedusa_sauvagii.jpg" alt="Phyllomedusa Sauvagii" width="100%"></a>
<div data-role="popup" id="foto" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">
Cerrar
</a>
<img class="popphoto" src="img/phyllomedusa_sauvagii.jpg" style="max-height:512px;" alt="Phyllomedusa Sauvagii">
</div>
<br><br>
<!-- GRILLA DE DATOS -->
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
Nombre Común
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Rana Mono
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
Familia
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Hyllidae
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
SubFamilia
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Phyllomedusinae
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-a" style="text-align: right;">
Estado de Conservación
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar">
Least Concern
</div>
</div>
</div>
<!-- DATOS EXTRA -->
<h4 class="ui-bar ui-bar-a">Distribución Geográfica</h4>
<div class="ui-body">
<p>Chacoan region of eastern Bolivia, northern Paraguay, Mato Grosso do Sul (Brazil), and northern Argentina.</p>
<p>Up to 1500 m</p>
</div>
<h4 class="ui-bar ui-bar-a">Hábitat y Ecología</h4>
<div class="ui-body">
<p>It occurs in the dry Chaco and is an arboreal species. It occurs on vegetation near temporary lagoons or ponds and the males call at night. They make a coarse leaf nest, filled with their glutinous egg-clutches which hangs over the water, the hatched tadpoles then drop in to the water below where they develop. It breeds only in the rainy season and is not tolerant of substantial habitat disturbance.</p>
</div>
</div><!-- /content -->
<!-- PIE DE PAGINA -->
<div data-role="footer" data-position="fixed">
<h4>Webapp en Construcción</h4>
</div>
</div>
The page above it's filled with sample data. The idea it's that when you select an option, the data is updated with the correct one.
I hope you can understand all of this. Thanks for your help!

I'm not sure if i understood everything, but you could listen for the 'click' event on your list item :
$('li').on('click', function() {
$.mobile.changePage("#phyllomedusa_sauvagii");
});
EDIT :
when you generate an item in your list, you can give it an id to retrive it easly:
<li id="anuro">...</li>
then you can add the event listener :
$('#anuro').on('click', function() {
$.mobile.changePage("#phyllomedusa_sauvagii");
});
in your case, the code could look like this :
var item = ('<li id="aruno"><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></li>');
$('#lista').append(item);
item.on('click', function() {
$.mobile.changePage("#phyllomedusa_sauvagii");
});
$("#lista").listview("refresh");
EDIT 2 :
Once you start understanding jquery, everything becomes easy.
below i edited part of the code a created above to replace the photo in your page :
item.on('click', function() {
$('.popphoto').attr('src', 'img/'+Foto);
});

Hide certain xml using Javascript

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).

Check if a jquery mobile listivew already contains a specific item?

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
}

Running Javascript inside a simplemodal window

I'm trying to add scripts to a modal (simplemodal) jquery plugin but they won't run, is this functionality simply not available when running in the modal or am I missing something.
Here's how I'm calling simplemodal:
$('#modal').modal({
onClose: function (dialog) {
$App.setLocation('#/');
$.modal.close();
}
});
and here's the html of the modal, which includes the addthis script (i've taken out the real username for posting here):
<div class="article clearfix">
<div class="article-post">
<h2 class="title">{{header}}</h2>
<p class="date">Posted in {{feed_source}}, {{date}}</p>
<ul class="tags clearfix">
<li>tag 1</li>
<li>tag 2</li>
</ul>
<div class="body">
{{{body}}}
</div>
</div>
<div id="single-article-comments" class="article-comments">
<h3 class="comments-header">Comments:</h3>
</div>
</div>
<div class="sidebar clearfix">
<div class="sidebar-inner">
<p class="sidebar-logo">Logo Text</p>
<ul class="sidebar-menu">
<li>Comment</li>
<li>Rate</li>
<li>Slate</li>
<li>Report</li>
<li>Email</li>
<li>Tweet</li>
<li>Like</li>
</ul>
<ul class="sidebar-action-addthis addthis_toolbox addthis_default_style" addthis:url="http://www.allaboutmidleton.ie/#/article/{article_id}" addthis:title="Tweet by {user}" addthis:description="{tweet}">
<li><img src="/assets/img/ico-email.png" width="26" height="23" border="0" alt="Email" /></li>
<li><a class="addthis_button_tweet"></a></li>
<li><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a></li>
</ul>
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=username"></script>
<!-- AddThis Button END -->
<div class="sidebar-ads">
<ul class="advertising-ad-list">
<li>Advertisement</li>
<li>Advertisement</li>
<li>Advertisement</li>
</ul>
</div>
</div>
</div>
All of this code works fine outside of the modal. Does anyone know a way to run the script inside the modal.
Thanks

What is $App.setLocation('#/'); doing?
I don't see any reason why it wouldn't work, but intended the onClose callback to be used mainly for closing animations.
My suggestion would be to use the onShow callback and bind your own function to the "close" event. For example:
$('#modal').modal({
onShow: function (dialog) {
$('.close', dialog.data[0]).click(function () {
$App.setLocation('#/');
$.modal.close();
return false;
});
}
});

SimpleModal is more powerful than, I would like to believe, even Eric Martin knows.
Create your modal hidden div within your main document;
Create WHATEVER FULL HTML/ASP/JAVASCRIPT page you want to process in that modal;
Load the hidden div with the HTML/ASP/JAVASCRIPT page using jquery.load();
Display the modal