I am using the jquery ui tabs to create dynamic tabs on the fly which will start off without any content. From what I can tell my code is building everything and putting it in the proper places, but jquery is not recognizing them as tabs. How would I get it to recognize the new tabs that were created after page load?
The html code:
<div class="main">
<div>
<button id="new">button</button>
</div>
<div id="tabs">
<ul>
<li>View1</li>
<li>View2</li>
<li id="createView">Create New</li>
</ul>
<div id="tabs-1">
<p>something on this page</p>
</div>
<div id="tabs-2">
<div>
<p>something else on this page</p>
</div>
</div>
</div>
</div>
the Javascript:
//Tabs functionality
$('#tabs').tabs();
//Create new view
var tabNum = 3;
$('#new').click(function() {
$('#tabs ul').append('<li>' + '' + 'newitem' + '' + '</li>');
$('#tabs').append('<div id="' + 'tabs-' + tabNum + '">' + '<div>new</div>' + '</div>');
var NewViewNum = 'tabs-' + tabNum;
$(NewViewNum).focus();
tabNum++;
});
The jQuery UI Tabs have a refresh method you can use per the documentation.
Try calling:
$("#tabs").tabs("refresh");
Related
In a basic XHTML document which contains some information, I'd like to have a "quick-jump" type menu of sections to be able to go to the relevant section quickly.
This is a static XHTML document, so I want all the dynamic stuff done by the browser, not the server. I figured jQuery was the way to go.
I've looked at the jQuery UI stuff and accordion is the closest thing I can find, but I don't want the sections to collapse away - I want all the content showing and just a floating contents/menu.
From this:
<h2>Section 1</h2>
<p>Some information</p>
<h2>Section 2</h2>
<p>More great info</p>
I'd like to produce something like:
<ul id="menu">
<li>First section</li>
<li>Another section</li>
</ul>
<a name="section1"><h2>First section</h2></a>
<p>Some information</p>
<a name="section2"><h2>Another section</h2></a>
<p>More great info</p>
I don't mind wrapping each individual section in a div with a class or similar, but would like the process as automated as possible, so I only need to change the actual content when I amend the document.
Any ideas?
Thanks, F.
If you want to just be able to call a function to automatically create the wrappers you could do something like this:
<ul id="menu"></ul>
<div id="sectionInfo"></div>
function addSection(name, anchor, info) {
$("#menu").append("<li><a href='" + anchor+ "'>" + name + "</a></li>");
$("#sectionInfo").append("<a name='" + anchor + "'><h2>" + name + "</h2></a><p>" + info + "</p>");
}
The HTML defines the containers for the sections, then the function itself adds the content with the wrappers you want. This would work well for simple text but if your section information has HTML in it as well it could get a bit messy. In that case, you might want to look into storing sections and their info in a database.
Usage:
addSection("First section", "section1", "Some information with great content");
Edit
You could then extend this to traverse the document when it's loaded to auto call this "addSection" function.
You'll need to define your sections with a more rigid structure so it's easier to traverse. I'd suggest something like this:
<ul id="menu"></ul>
<div id="content"></div>
<div id='sections' style='display:none;'>
<div>
<h2>Section 1</h2>
<p>Some information</p>
</div>
<div>
<h2>Section 2</h2>
<p>More great info</p>
</div>
</div>
Then once the page is loaded, loop through the defined sections and call addSection() which transforms their content into what ever you want it to look like:
<script>
$(document).ready(function() {
$("#sections div").each(function() {
addSection($(this).find("h2").first().html(), $(this).find("p").first().html());
});
});
function addSection(name, info) {
var anchor = name.replace(/ /g,'');
$("#menu").append("<li><a href='" + anchor+ "'>" + name + "</a></li>");
$("#content").append("<a name='" + anchor + "'><h2>" + name + "</h2></a><p>" + info + "</p>");
}
</script>
This code is untested, but the concept should work. You could make it more efficient by moving the elements instead of copying their HTML.
Sounds like you are looking for a piece of JavaScript that generates content based on the results of a selector. Doesn't need anything fancy to accomplish, either:
function buildSectionAnchorElement(index, heading) {
var a = $("<a>");
var name = "section" + index;
$(heading).attr("name", name);
a.attr("href", "#"+name);
a.text($(heading).text());
return a;
}
var headings = $("h1,h2,h3,h4");
var sections = headings.map(function(i,e) {
var a = buildSectionAnchorElement(i,e);
var p = $(e).next("p");
var li = $("<li>");
li.append(a);
$("#menu").append(li);
return li;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu"></ul>
<h2>something special</h2>
<p>lorem ipsum</p>
<h2>different thing</h2>
<p>dolor kismet aha bwaha</p>
I have a collapsible set for days of the week, with user's activities inside it that represented as a listview inside the collapsible-set.
<div data-role="collapsible-set" id="calCol" data-collapsed-icon="arrow-d" data-collapsed="true" data-iconpos="right">
<div data-role="collapsible">
<h1 id="day1Header">Sunday<img src="#" /></h1>
<ul id="day1" data-role="listview">
</ul>
</div>
<div data-role="collapsible">
<h1>Monday</h1>
<ul id="day2" data-role="listview">
</ul>
</div>
...
All the content for the user's activities i take from my database so i insert all my content dynamically like this:
var userActivitiesObj = JSON.parse(data.d);
for (var i = 0; i < userActivitiesObj.length; i++) {
for (var j = 0; j < userActivitiesObj[i].time.length; j++) {
var listItem = "<li style='background-color: " + userActivitiesObj[i].hobColor + ";'>";
listItem += userActivitiesObj[i].actName + " - " + userActivitiesObj[i].actAddress + " - ";
listItem += userActivitiesObj[i].time[j].startTime + "-" + userActivitiesObj[i].time[j].endTime;
listItem += " (" + userActivitiesObj[i].time[j].audiance + ")</li>";
$("#day" + userActivitiesObj[i].time[j].day).append(listItem);
$("#day" + userActivitiesObj[i].time[j].day).listview("refresh");
}
}
One last thing that left for me to do is to add image of every activity to the header of that day.
When i have tried to do it in html, it worked flawlessly:
<h1 id="day1Header">Sunday<img src="#" /></h1>
but when trying to do it dynamically, it doesn't work correctly.
That what i have tried to do:
$("#day1Header").html($("#day1Header").html()+"<img src='#'");
and:
$("#day1Header").append("<img src='#'");
I know that i am missing here something like the .list("refresh") function, but i have no idea what is that.
jQuery Mobile adds an anchor tag with class ui-collapsible-heading-toggle within the header and places the collapsible title there. So you can remove previous images and append the new image like this:
$("#day1Header .ui-collapsible-heading-toggle img").remove();
$("#day1Header .ui-collapsible-heading-toggle").append('<img src="https://placeimg.com/44/22/tech" />');
DEMO
Basically I am designing this mobile app using jQuery mobile. I am quite new, but I've tried different ways with no success. I am trying to write the code, so that when you click on a list view item, a panel opens with the selected listview h1 (that contains the title of the list item) and p (which holds the description text enter code here). This is my HTML:
<div data-role="panel" id="event-details" data-position="right" data-theme="b" data-display="overlay">
<h1>Hello World</h1>
</div>
<ol data-role="listview" id="show-events" data-theme="a" data-filter="true">
<li data-name="3A Cold-rooms & Aircons" class="ui-shadow" data-icon="my-right-white">
<a href="#event-details" class="events-list">
<img src="img/flower.png" class="listImage" alt="" />
<h2>3A Cold-rooms & Aircons</h2>
<p>Patio & Outdoor Furniture</p>
<p>GARDEN & OUTDOOR ROOMS</p>
</a>
</li>
There are various items in the listview.
$('#show-events').children('li').bind('click', function(e) {
var htxt='<h2>' + $(this).attr('data-name') + '</h2>';
var ptxt='<p>' + txt + '</p>';
var stringText =htxt+ptxt;
$("ol#plannerList").append('<li data-icon="false" class="libgPlanner ui-shadow">' + '<a class="planner-btn" href="#map-page">' + stringText + '</a>' + '</li>').listview('refresh');
}
});
Okay, once i see the answer to this, I will feel stupid. I'm certain of that.
I've created this exactly the way I want to before, but I am refactoring my code for a new version right now. I am trying to dynamically create collapsible sets in jQuery Mobile, but my html does not render right.
<div data-role="header">
<h2>Playground</h2>
</div>
<div data-role="content">
<div data-role="button" id="addprimary" data-inline="true">Add 5</div>
<div data-role="collapsible">
<h4>Collapsible</h4>
<form id="makecollapsible">
</form>
</div>
</div>
<div data-role="footer">
<h4>Please, no applause</h4>
</div>
</div>
<script>
$('#addprimary').on('click', function () {
Markup.Collapsible();
});
var Markup = new Object();
Markup.Collapsible = function () {
$('#makecollapsible')
.append($('<div>')
.attr({ 'data-role': 'collapsible-set', 'id': 'primary' })
);
for (i = 0; i < 5; i++) {
($('<div>')
.attr({ 'data-role': 'collapsible', 'data-content-theme': 'c',
'data-collapsed': 'true' })
.html('<h4>' + i +'</h4>'))
.appendTo('#primary');
}
}
</script>
Could somebody please take a look at this http://jsfiddle.net/c2jLY/ and tell me what I have wrong? My <div>s with data-role='collapsible' are not rendering as collapsibles, which is also having an effect on the HTML I am trying to put in them later on.
Help is appreciated, thanks!
Inside Markup.Collapsible function and at the end of it, add the below. For collapsible-set, you need to tell jQM that you're enhancing a .collapsibleset() and combine it with .trigger('create').
$('#makecollapsible').collapsibleset().trigger('create');
Demo
I forgot to mention that when appending items dynamically, call enhancement methods on parent element; doing so, will enhance children elements. Thus, you don't need to use .collapsible().trigger('create') for each collapsible appended.
what i show here is a simple one but working:
<script type="text/javascript">
//dynamically make 10 collapsible items and append them to the collapsible-set
var jj = "SUPER item added..";
$('[data-role="content"]').append('<div id="set" data-role="collapsible-set"></div>');
var count;
for (count=0; count < 10; count++) { // div id should be from id='c0' to 'c9'
$("#set").append('<div id="c' + count + '" data-role="collapsible">');
$("#c" + count.toString()).append('<h3>Adding element_' + count +'</h3>');
$("#c" + count.toString()).append(jj + 'count ' + count + '</div>');
}
// either one is tested working below:
// $('[data-role="content"]').trigger('create');
$( "#set" ).collapsibleset( "refresh" );
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<!------------------------page 1 ListView template-->
<div data-role="page" id="page01">
<div data-role="header" data-theme="b" data-position="fixed">
<h2>-- DEMO -- </h2>
</div>
<div data-role="content" id="content">
</div>
</body>
How do you add jQuery ui tabs to a dialog box on click?
Here is my code.
<p>
Premium Payer:
<span data-bind = "text: movements_owner_fullname" id = "movements_payer_fullname" > </span>
</p>
<script type="text/javascript">
$('a.premium_payer').click(function payerDialog(e){
$("#premium_payer").html('').dialog();
$("#premium_payer").append('<p>' + "Full name: " + payer_fullname + '</p>').dialog();
$("#premium_ayer").append('<p>' + "ID Number: " + person_id + '</p>').dialog();
e.preventDefault();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a.premium_payer').click(function payerDialog(e){
e.preventDefault();
var tabs = $("<div><ul><li><a href='#tab1'>tab1</a></li><li><a href='#tab2'>tab2</a></li></ul><div id='tab1'>Tab1 content</div><div id='tab2'>tab2 content</div></div>");
$("#premium_payer").empty().append(tabs);
$("#premium_payer").dialog();
tabs.tabs();
});
});
</script>
EDIT if you want an existing element, hide this element with display: none.
<div id="tabs" style="display:none">
<ul>
<li>
<a href='#tab1'>tab1</a>
</li>
<li>
<a href='#tab2'>tab2</a>
</li>
</ul>
<div id='tab1'>Tab1 content</div>
<div id='tab2'>tab2 content</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('a.premium_payer').click(function payerDialog(e){
e.preventDefault();
var tabs = $("#tabs");
$("#premium_payer").empty().append(tabs);
$("#premium_payer").dialog();
tabs.show();
tabs.tabs();
});
});
</script>
May be you should consider this approach instead?
jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
The title is a bit confusing. Main idea - load content from remaining url. It's much more convenient, than building a "kind'a" template inside javascript.