I have a collapsible-set div and within that 2 collapsible divs.
And I have to dynamically add elements to these collapsible divs dynamically, when clicking a plus button. I have tried many codes, but didn't work. Could you please tell me how to do that?
HTML Code
<div data-role="content">
<div data-role="collapsible-set" id="setAllCategory">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" id="setCategory1">
<h1 ><label>Food</label>
<a data-role="button" id="btnAddSubCat1" name="btnAddSubCat1" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" id="setCategory2">
<h1 ><label>Dress</label>
<a data-role="button" id="btnAddSubCat2" name="btnAddSubCat2" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
</div>
</div>
JavaScript
var subCatObject = "<div class='ui-grid-b'>"
subCatObject +="<div class='ui-block-a'><label>Hi</label></div>"
subCatObject +="<div class='ui-block-b'><a href='#' data-role='button' data-iconpos='notext' data-icon='edit'></a></div>"
subCatObject +="<div class='ui-block-c'><a href='#' data-role='button' data-iconpos='notext' data-icon='delete'></a></div>"
subCatObject +="</div>";
$('#btnAddSubCat1').click(function (){
var temp = $(subCatObject);
$(temp).appendTo('#setCategory1').page();
$("#setCategory1").collapsibleset('refresh');
});
I changed your HTML as below
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible-set" id="setAllCategory" data-content-theme="d">
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
id="setCategory1">
<h1><label>Food</label>
<a data-role="button" id="btnAddSubCat1" name="btnAddSubCat1" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
<div id="setCategoryContent1"></div>
</div>
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"
id="setCategory2">
<h1><label>Dress</label>
<a data-role="button" id="btnAddSubCat2" name="btnAddSubCat2" data-rel="popup" href="#" data-icon="plus" data-iconpos="notext" style="float:right;" ><a/></h1>
</div>
</div>
</div>
</div>
and your javascript as below
var subCatObject = "<div class='ui-grid-b'>"
subCatObject += "<div class='ui-block-a'><label>Hi</label></div>"
subCatObject += "<div class='ui-block-b'><a href='#' data-role='button' data-iconpos='notext' data-icon='edit'></a></div>"
subCatObject += "<div class='ui-block-c'><a href='#' data-role='button' data-iconpos='notext' data-icon='delete'></a></div>"
subCatObject += "</div>";
$('#btnAddSubCat1').bind('click', function () {
$("#setCategoryContent1").html(subCatObject);
$('#home').trigger('create');
});
I hope you will be able to take up from here.
Check out the working fiddle here http://jsfiddle.net/PKeSB/2/
Related
I have a JQuery Mobile popup (an unordered list) embedded in a description list:
<dl data-role="listview" data-inset="true" data-theme="d" id="sortable">
<dt class="ui-bar ui-bar-b ui-corner-all">Group One</dt>
<dd class="ui-bar ui-bar-a ui-corner-all ui-btn-icon-left ui-icon-bars">
<div class="divMain">
<div class="divQuestion">
<textarea name="strQuestion-q1" id="strQuestion-q1" placeholder="Enter Question Number 1" style="margin:0px;"></textarea>
</div>
<div class="divCategory">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>
<div id="popupMenu-q1" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="list-divider">Choose the scoring category</li>
<li><a name="strCategory-o1-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 1</a></li>
<li><a name="strCategory-o2-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 2</a></li>
<li><a name="strCategory-o3-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 3</a></li>
</ul>
</div>
</div>
</div>
</dd>
</dl>
I want the function selectCategory() to get the text of the parent dt (in this case "Group One"). I've tried both of the following with no success:
$('#strCategory-o1-q1').parent().prev('dt').text();
$('#strCategory-o1-q1').closest('dd').prev('dt').text();
Any suggestions?
The problem is that when jQM initializes the popup, it moves it from the current DOM position into a popup container at the top level. So the DD is no longer its ancestor.
One thing you could do is add a click handler to the button that launches the popup and get the text there. Then you could put the text in a global variable or a data-attribute within the popup.
Given this markup:
<a id="btnPopup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>
<div id="popupMenu-q1" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="list-divider">Choose the scoring category</li>
<li><a name="strCategory-o1-q1" href="#">Category 1</a></li>
<li><a name="strCategory-o2-q1" href="#">Category 2</a></li>
<li><a name="strCategory-o3-q1" href="#">Category 3</a></li>
</ul>
</div>
Your script would be along the lines of
var curDDText;
$("#btnPopup").on("click", function(){
curDDText = $(this).closest('dd').prev('dt').text();
});
$("#popupMenu-q1 ul li a").on("click", function(e){
selectCategory(this);
});
function selectCategory(elem){
alert($(elem).prop("name") + " - " + curDDText);
$("#popupMenu-q1").popup( "close" );
}
working DEMO
If you prefer the data-attribute route:
$("#btnPopup").on("click", function(){
var curDDText = $(this).closest('dd').prev('dt').text();
$("#popupMenu-q1 ul").jqmData("dttext", curDDText);
});
function selectCategory(elem){
var curDDText = $(elem).closest("ul").jqmData("dttext");
alert($(elem).prop("name") + " - " + curDDText);
$("#popupMenu-q1").popup( "close" );
}
data-attribute DEMO
I have a list with delete button for each element , when the user click on the delete button a confirmation dialog appear ,if the user press the OK button i want to delete the list element my problem is how to get the <li> list element index in order to remove it from the list , my code not return the correct index , please help me ..
<div data-role="page">
<div data-role="content">
<ul data-role="listview" id="employeesList" data-inset="true" data-split- icon="delete">
<li><a href="#">
<font class="line1" > Emp1Name</font>
<font class="line2" >Emp1Salary</font>
</a><a href="#DeleteConfirm" data-rel="popup" data-position-to="window" data- transition="pop" >Delete</a></li>
<li><a href="#">
<font class="line1" > Emp2Name</font>
<font class="line2" >Emp2Salary</font>
</a>Delete</li>
</ul>
<div data-role="popup" id="DeleteConfirm" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="width:400px;height:200px;" class="ui-corner-all">
<div data-theme="c" style="text-align:center;float:center;height:53px;padding-top:13px;" >
<font size="6px" >Delete</font>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<font size="5px" >Do you want to delete this Employee?</font>
<BR>
<div style="text-align:center;font-size: 22px;" >
<input type="button" id="No" data-inline="true" data-icon="delete" data-theme="c" value="No " />
<input type="button" id="Yes"data-inline="true" data-icon="check" data- theme="c" value=" Yes" data-corners="false"/>
</div>
</div>
</div>
</div>
Java script code:
var SelectedLi ;
$('#DeleteConfirm').on('click',function(){
SelectedLi= $(this).parent().index();
});
$('#Yes').on('click',function(){
$('#employeesList').remove(SelectedLi);
$('#DeleteConfirm').popup('close');
});
$('#No').on('click' ,function(){
$('#DeleteConfirm').popup('close');
});
You have mistake in binding event to split button, it should be as follows:
var SelectedLi ='' ;
$('[href=#DeleteConfirm]').on('click',function (e) {
// store parent of clicked button
SelectedLi = $(this).closest("li");
});
$('#Yes').on('click',function(){
$(SelectedLi).remove();
$('#employeesList').listview("refresh");
$('#DeleteConfirm').popup('close');
});
$('#No').on('click' ,function(){
$('#DeleteConfirm').popup('close');
});
Demo
This is how I do my popup:
HTML:
<div data-role="popup" id="sterge" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Delete?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">To Delete Product from Bonus?</h3>
<p>This action cannot be undone.</p>
<input id="giveupButton" data-inline="true" type="button" value="Cancel"/>
<input id="delButton" data-inline="true" onclick="deletebonusproduct();" data-theme="b" type="button" value="Delete"/>
</div>
</div>
JS:
$(document.body).on('click', '.del' ,function(){
li = $(this).parent();
$('#sterge').popup("open");
});
$(document.body).on('click', '#delButton' ,function(){
$('#sterge').popup("close");
li.remove();
});
$(document.body).on('click', '#giveupButton' ,function(){
$('#sterge').popup("close");
});
im making an internal page jquery mobile ive search question here in stackover but those are not similar to mine.i want to know if it is possible to use ajax in loading internal pages.i want to load my about1 page and about2 page in the about page here is my sample code:
<!-- start about -->
<div data-role="page" id="about" data-url="about" data-theme="a">
<div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >
Header
</h3>
<!-- working back button go back -->
<a data-role="button" data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Back
</span></span></a>
<a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Home
</span></span></a>
</div>
<div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" >
<h1 class="ui-title" >About</h1>
</div>
<!-- start ajax -->
<ul data-role="listview" data-theme="a" id="mylist" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right ui-li-has-arrow ui-li ui-screen-hidden">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
about
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">
</span>
</div>
</li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-a">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
about
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last ui-btn-up-a">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
about2
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
<!-- end ajax -->
<div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >Footer</h3>
</div>
</div>
<!-- end about -->
<!-- start about1 -->
<div data-role="page" id="about1" data-url="about1">
<div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >
Header
</h3>
<!-- working back button go back -->
<a data-role="button" data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Back
</span></span></a>
<a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Home
</span></span></a>
</div>
<div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" >
<h1 class="ui-title" >About1</h1>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >Footer</h3>
</div>
</div>
<!-- end about1 -->
<!-- start about2 -->
<div data-role="page" id="about2" data-url="about2">
<div data-theme="a" data-role="header" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >
Header
</h3>
<!-- working back button go back -->
<a data-role="button" data-rel="back" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Back
</span></span></a>
<a data-role="button" href="#home" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">
Home
</span></span></a>
</div>
<div data-role="header" data-icon="bars" data-theme="d" class="ui-header ui-bar-b" >
<h1 class="ui-title" >About2</h1>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" class="ui-footer ui-bar-a ui-footer-fixed slideup" >
<h3 class="ui-title" >Footer</h3>
</div>
</div>
<!-- end about2-->
If you want to do jquery mobile page load as AJAX,
Your AJAX should be,
$( "#your_success_ele_id1" ).load( "about1.html", function() {
$('#your_success_ele_id1').trigger('create');
});
$( "#your_success_ele_id2" ).load( "about2.html", function() {
$('#your_success_ele_id2').trigger('create');
});
trigger('create') should be used, otherwise you will get an normal html page
This you can use for onclick of an element.
Trying to set the background color of my dynamic li. li is not given 'class' or 'id' since each li needs to have an assigned color in code.
$(data).find("#HospitalDescriptions").find('th').filter(function(){
if (this.innerHTML !== '') {
var bgcolor = $( this ).css( "background-color" );
var txtcolor = $( this ).css( "color" );
if (bgcolor !== ''){
$('#information').append('<li><span style="background-color:' + bgcolor + ';color:' + txtcolor + ';">' + this.innerHTML + '</span></li>');
$('li').css({backgroundColor: bgcolor});
} else {
$('#information').append('<li>' + this.innerHTML + '</li>');
}
}
$('#information').listview('refresh'); // not working!
});
HTML:
<div data-role="page" data-theme="b" id="hospitals" data-add-back-btn="true">
<div data-role="header">
<h1>HOSP-HEADER</h1>
<a class="ui-btn-right" id="infoButton" onclick="$('#locations').listview('refresh');">Refresh</a>
</div><!-- /header -->
<div data-role="content" data-theme="b" id="regions">
<div data-role="content">
<h4>Information</h4>
<ul data-role="listview" data-inset="true" id="information">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Regions I, II, III</h4>
<ul data-role="listview" data-inset="true" id="region3">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region IV</h4>
<ul data-role="listview" data-inset="true" id="region4">
<!-- AJAX CONTENT -->
</ul>
</div>
<div data-role="collapsible">
<h4>Region V</h4>
<ul data-role="listview" data-inset="true" id="region5">
<!-- AJAX CONTENT -->
</ul>
</div>
</div>
<div data-role="footer">
<h1>Powered by CM</h1>
</div><!-- /footer -->
</div>
Results I'm getting now. text background color needs to fill the list view area not black:
1
▲
text-align: center; to li as well. Even simpler. – Omar yesterday
I've created a button
<a data-role="button">
inside a Popup. Here is Popup:
<div data-role="popup" id="popupRegister" data-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" class="ui-header ui-bar-b"
role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Success!!</h1>
</div>
<div data-role="" data-theme="a" class="ui-body-a"
role="main" style="padding:15px;">
<h1>Thank you for regestering with us.</h1>
<p>You may now continue to the app.</p>
<!-- this is the button -->
<a href="#" id="takeMeHome" data-role="button" data-rel="back"
data-theme="a" data-inline="true"
data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span"
class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-a">
<span class="ui-btn-inner"><span class="ui-btn-text">GO</span></span>
</a>
</div>
</div>
When I click the button, console.log is responding but page does not redirect. Why?
Here is how I redirect:
$("#takeMeHome").click( function(){
console.log("lets go home");
//window.location.href = "home.html";
//localStorage.registered=true;
//window.location.replace("home.html");
window.location.href = ("home.html");
});
Replace
window.location.href = ("home.html");
with
$.mobile.changePage('home.html');
And add data-history="false" to popup div.