I am creating an editor application which requires dynamically appending HTML into the document. I am using JQuery UI tabs to divide the document into sections. I want to be able to dynamically add tabs and then use append() to add content into the tabs.
The page has 3 tabs when it loads and I want to be able to dynamically add more when required.
Currently my code works when appending content into the 3 non-dynamic tabs, and when creating a new tab. For some reason I cannot append any content into a new, dynamically created tab.
Why won't my code work for adding content to a dynamically created tab?
$(function () {
$('#addTab').click(function () {
var num_tabs = $('div#tabs ul li.tab').length + 1;
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
$('div#tabs').append(
'<div id="tab-' + num_tabs + '></div>');
$('#tabs').tabs("refresh");
$('#tabs').tabs("option", "active", -1); //makes the new tab active
});
});
//Insert content into the currently selected tab
function insertContent(content) {
var activeTab = $("#tabs").tabs('option', 'active');
activeTab += 1;
console.log(activeTab);
$("#tab-" + activeTab).append(content);
}
HTML after creating a 4th tab:
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="false">Section 1</li>
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false">Section 2</li>
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false">Section 3</li>
<li class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab4" aria-labelledby="ui-id-7" aria-selected="true">Section 4</li></ul>
<div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><br><p contenteditable="true" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_83" style="position: relative;">Paragraph text</p></div>
<div id="tab-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display:none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor2" title="Rich Text Editor, editor2" aria-describedby="cke_153" style="position: relative;">Paragraph text</p></div>
<div id="tab-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor3" title="Rich Text Editor, editor3" aria-describedby="cke_223" style="position: relative;">Paragraph text</p></div>
</div>
After looking at the HTML generated following are the problems I found with your code:
1) The following line generated li with wrong Id i.e. tab4 instead of tab-4
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
change <a href="#tab' to <a href="#tab-'
2) The following line was missing " in id because of which the div wasn't appended in the tabs
$('div#tabs').append(
'<div id="tab-' + num_tabs + '"></div>');
Once you fix there, you'll see your code is working properly
See working fiddle
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 am using the existing jquery UI tabs..
<div id="tabs">
<ul>
<li>title 1</li>
<li>title 2</li>
<li>title 3</li>
</ul>
<div id="tabs-1">
<p>t1 content</p>
</div>
<div id="tabs-2">
<p>t2 content</p>
</div>
<div id="tabs-3">
<p>t3 content</p>
</div>
</div>
when rendered in the browser, jquery adds some set of classes to the <li> elements. [some part of it given below]
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
</ul>
when I append some <li> elements in <ul> using the following jquery code:
$('#tabs ul').append($('<li>title 4</li>');
The list gets appended but the classes are not added to it, hence do not exhibit the tab functionality.
Please give some insight into it.
You also need to add the div with the tab id:
var num_tabs = $('div#tabs ul li.tab').length + 1;
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
$('div#tabs').append(
'<div id="tab-' + num_tabs + '"></div>');
Then try a refresh on tabs:
$("div#tabs").tabs("refresh");
WORKING Fiddle
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");
});
I managed to style my checkboxes in JQuery as I wanted them to look:
var content = '<fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">' +
'<div class="ui-controlgroup-controls">' +
'<div class="ui-checkbox">' +
'<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">' +
'<label for="checkbox-1a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-checkbox-on ui-btn-up-c">' +
'<span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Food</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"> </span></span></label></div>' +
'<div class="ui-checkbox">' +
'<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">' +
'<label for="checkbox-4a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off ui-corner-bottom ui-controlgroup-last">' +
'<span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Sun Chips</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span></span></label></div>' +
'</div></fieldset>';
The result is static (no action or status change when clicking the button).
How do I get them to act as a normal checkbox, changing its checked status when clicked?
Thank you!
I suppose you append your html string to the div which has the id myCheckBoxes
e.g: <div id="myCheckBoxes"></div>
try as below
$('#myCheckBoxes').html(content);
$('#myCheckBoxes').trigger("create");
jQuery Mobile is not only styling elements but also adds some event handling and class/attributes switching (similar for JUI, but you have JQM in a tag). So you either need to add this behavior on your own or insert standard elements before JQM starts parsing or insert standard elements and make JQM parse them again.
To make JQM re-render mobile page markup you need to call something like this:
$jqueryElement.trigger("create");
Where $jqueryElement is e.g.:
$jqueryElement = $('#elementId');
EDIT:
In another words you shouldn't use classes like ui-checkbox. You should add a simple input with label and a fieldset like this:
<fieldset data-role="controlgroup" data-type="vertical">
<input id="foo1" name="foo" type="checkbox"><label for="foo1">Option 1</label>`
<input id="foo2" name="foo" type="checkbox"><label for="foo2">Option 2</label>`
</fieldset>
I'm trying to create a tab set using jQuery UI that has some permanent tabs as well as some special purpose tabs. The special tabs are added temporarily: when the form they contain is submitted, the tabs are removed.
I've got this working except for one thing: after a tab is removed, if it is re-added later its content isn't shown, and I can't figure out why. I've distilled it down to this jsFiddle example, code also reposted below.
HTML:
<div id="tabs">
<ul>
<li>Foo</li>
</ul>
<div id="foo">
<h2>Foo Tab</h2>
</div>
<div id="bar" class="transient" style="display: none">
<h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Bar Tab</h2>
</div>
<div id="baz" class="transient" style="display: none">
<h2><button type="button" class="close" style="float: right"><span class="ui-icon ui-icon-closethick">close</span></button>Baz Tab</h2>
</div>
</div>
<hr>
<button onClick="openTransientTab('bar', 'Bar')">Add Bar Tab</button>
<button onClick="openTransientTab('baz', 'Baz')">Add Baz Tab</button>
JavaScript:
$('#tabs').find('div.transient').find(".close").live('click', function() {
var footer_tabs = $('#tabs');
var tab_id = $(this).closest("div.transient").attr("id");
var index = footer_tabs.tabs("option", "selected");
footer_tabs.tabs("select", -1);
footer_tabs.tabs("remove", index);
});
function openTransientTab(id, title) {
var footer_tabs = $("#tabs");
footer_tabs.tabs("select", -1);
footer_tabs.tabs("select", "#" + id);
var selected = footer_tabs.tabs("option", "selected");
if (selected < 0) {
footer_tabs.tabs("add", "#" + id, title);
footer_tabs.tabs("select", "#" + id);
}
$("#" + id).css("display", "block");
}
$(function() {
var footer_tabs = $("#tabs");
footer_tabs.tabs({
collapsible: true,
selected: -1
});
});
When you load the page, the bar and baz tabs are created, but in their style, display is set to none which is why they are not visible originally. Inside the tab, when you hit the X, it actually removes the div for bar and baz completely. When you re-click to add the bar or baz tab after it closes, it recreates the div, but you are not putting anything within it. Add something like the following to once you create the tab.
document.getElementById("bar").innerHtml = whatever you want within it here
Before:
<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="baz" class="transient" style="display: none">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Baz Tab
</h2>
</div>
<div id="bar" class="transient ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;">
<h2>
<button class="close" style="float: right" type="button">
<span class="ui-icon ui-icon-closethick">close</span>
</button>
Bar Tab
</h2>
</div>
After opening and closing both
<div id="foo" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<h2>Foo Tab</h2>
</div>
<div id="bar" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" style="display: block;"></div>
<div id="baz" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;"></div>
After Collecter provided the key insight about what wasn't working, I found a nicer way to preserve the tab content for reuse. I changed my close function to the following:
$('#tabs').find('div.transient').find(".close").live('click', function() {
var footer_tabs = $('#tabs');
var tab = $(this).closest("div.transient");
var index = footer_tabs.tabs("option", "selected");
footer_tabs.tabs("select", -1);
footer_tabs.tabs("remove", index);
footer_tabs.append(tab);
});