Develop Reference

How to add JS for Jquerymobile Dynamic ID in Collapsible Sets

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/

Link to current page with different parameters jqm

I'm building a webpage with jquery mobile and try to link pages with parameters.
This works but the issue I have is that I'm not able to link to the same page I'm currently stay with different parameters.
Example:
<html>
<body>
<!-- START INDEX PAGE -->
<div data-role="page" id="index">
<div data-role="header">
<h1>Indexpage</h1>
</div>
<div data-role="content">
<a href="index.html#listpage?list=1">
<a href="index.html#listpage?list=2">
</div>
</div>
<!-- END INDEX PAGE -->
<!-- START LIST PAGE (page to list content i.e. user list)-->
<div data-role="page" id="listpage">
<div data-role="header>
<h1>Listpage</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="listview">
</ul>
</div>
<script>
//to get passed parameter (list id)
$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '= ([^&#]*)').exec(window.location.href);
if (results==null){
return null;
} else {
return results[1] || 0;
}
}
var list = $.urlParam('list');
switch(list) {
case 1:
//insert list one into page
break;
case 2:
//insert list two into page
break;
}
</script>
</div>
<!-- END LIST PAGE -->
</body>
</html>
So when I click on the list2 link when im staying on the list1, it doesn't do anything.
Thanks for your help

You can append html data on click event of anchor tag if you are using same page
OR
<a href="index.html#listpage?list=1" data-ajax="false">
<a href="index.html#listpage?list=2" data-ajax="false">
OR
$(document).delegate("a", "vclick click", function(event) {
$.mobile.defaultPageTransition = "slide";
var href = $(this).attr("href");
event.preventDefault();
if ( event === "click" ) { return; }
$.mobile.changePage(href);
});
**PAGE-1**
<div data-role="page" id="index">
<div data-role="header"> </div>
<div data-role="content">
List 1
List 2
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /page1 -->
<div data-role="page" id="list1">
<div data-role="header"> </div>
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /List page1 -->
<div data-role="page" id="list2">
<div data-role="header"> </div>
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div>
</div><!-- /List page2 -->

So I solved it this way:
First I changed the switch, which started at pageint, to a standalone function:
function displayContent(contentid) {
switch(contentid) {
case 1:
//change content
break;
case 2:
//change content
break;
}
}
Then I changed the way how I display the content:
$('#listpage-header-title').html('Alle Turner'); //change title on header
//CHANGED PART START
//check if navbar already exists
if($('#listpage-sub-nav ul').length != 0) {
//remove activestate from all active buttons
$('.ui-btn-active').removeClass('ui-btn-active');
$('.ui-state-persist').removeClass('ui-state-persist');
//add activestate to pushed button
$('[onclick*="alle_tu"]').addClass('ui-btn-active');
$('[onclick*="alle_tu"]').addClass('ui-state-persist');
} else {
//if navbar doesn't exists add html code of the navbar
$('#listpage-sub-nav').html('<ul><li>Überblick</li><li>Turner</li><li>Turnerinnen</li></ul>');
}
//CHANGED PART END
//add autodivers to listview
$('#list-page-listview').attr('data-autodividers', 'true');
//change/add data to listview
showTeilnehmer('listpageM');
//refresh listview
$('#list-page-listview').listview('refresh');
break;
Hope someone helps

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
}

How to create a slideshow player with Raphael.js to load slides into separate html divs?

I'm looking to make a slideshow player with Raphael.js. I would like it to be a plugin so it can be used again in the future.
Here is an example straight from the creator of Raphael, but it doesn't meet my needs:
http://raphaeljs.com/jsconfeu/ In this example, Dimitry stores slides in an array and fire them sequentially. Seems to work well.
However I am looking for a way to load slides into separate divs (on different paper elements) to go with my jquery splitview model.
The main idea:
1. Users can select a slide from the left navbar panel on the iPad.
2. Each slide can be loaded separately into the right slideviewer panel.
Here's my HTML code so far:
<!-- Demo slide 1 -->
<div data-role="page" id="demo1_page1">
<div data-role="header" data-backbtn="false">
<h1>Mobility Bootcamp</h1>
</div><!-- /header -->
<div data-role="content">
<div class="container"></div> //<----Here is the container div
Next slide
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ew-footer"
class="ui-splitview-hidden">
<div data-role="navbar">
<ul>
<li>
Main
</li>
<li>Demos</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<!-- Demo slide 2 -->
<div data-role="page" id="demo1_page2">
<div data-role="header" data-backbtn="false">
<h1>Classroom</h1>
</div><!-- /header -->
<div data-role="content">
<div class="container"></div>//<--------Here is the container div
Previous slide
Next slide
</div><!-- /content -->
And the Javascript:
// Here is the function that contains everything needed to
//create a new slide and fill it with Raphael info.
var createContainer = function(selectedSlide) {
//Clear existing slide
$('#[id*="slide"]').remove();
// Create a new div with parameters.
$('<div/>', {
id: 'slide' + selectedSlide,
class: 'slide',
text: 'container'+selectedSlide,
}).appendTo('.container'); // append it to container div
var container = "slide"+selectedSlide;
alert('just created container: '+ container);
// load the slide
slides[selectedSlide](container);
};
var slides = [
0, //offset array for simplicity
// slide 1
function(container){
console.log('slide 1 created!');
var paper = new Raphael(container, 730, 600);
var background = paper.rect(0, 0, 730, 600).attr({opacity: 1});
background.attr({'gradient':'90-#444-#fff'});
}];
// is fired whenever a page is loaded.
$(window).bind('hashchange', function(){
// set the hashString to the current hash in the browser bar.
var hashString = window.location.hash;
hashString = hashString.split("demo1_page");
// set the selected slide to the hashString
var selectedSlide = hashString[1];
// alert("currentSlide = "+container);
//Create the container for Raphael
createContainer(selectedSlide);
});
Are there any existing slideshow player examples with Raphael.js that will load slides into separate divs?