I have created here a code that would store the array contents into a listview by pressing a button, my problem is the listview contents would stack. I want to clear the previous listview contents everytime i press the button and be able to display again the updated stored array contents.
<div id="MainPage" data-role="page" >
<div data-role="content">
RENAME
</div>
</div>
<div id="ViewPage" data-role="page" >
<div data-role="header" data-position="fixed">
BACK
<h1>View Page</h1>
</div>
<div data-role="content">
<ul id="viewlist" data-role="listview" data-filter="true" data-filter-placeholder="Sample Contents" data-inset="true">
<!-- array contents goes here -->
</ul>
</div>
</div>
<script>
var sampleContent = new Array( );
displayArray( )
{
//i want to place a code here that would clear the listview contents
for(var scan=0; scan<sampleContent.length; detect++)
{
//looping of the array contents into the listview
$('#viewlist').append('<li>' + sampleContent[scan] + '</li>').listview("refresh");
}
}
</script>
I am stuck with this problem right now, any help or advice will be gladly accepted thanks in advance.
this should do the job. Just add all data then you empty the list and append all the string for a faster result.
displayArray( )
{
//i want to place a code here that would clear the listview contents
var data='';
for(var scan=0; scan<sampleContent.length; detect++)
{
data+='<li>' + sampleContent[scan] + '</li>';
}
$("#viewlist").empty().append(data);
}
I have recently worked with lists, this is how I went about this:
displayArray( )
{
//Emptys viewlist
$('#viewlist').empty();
//i want to place a code here that would clear the listview contents
for(var scan=0; scan<sampleContent.length; detect++)
{
//looping of the array contents into the listview
$('#viewlist').append('<li>' + sampleContent[scan] + '</li>');
}
//Update list
$("#viewlist").listview("refresh");
}
You have to empty, append then update.
Related
So I have a table in HTML which gets filled dynamically with <td> elements. These elements are a link, but I don't know how to navigate through them.
My HTML:
<div id="catalog-page" data-role="page">
<!-- catalog header -->
<div data-role="header" data-id="header" id="catalog-header" data-position="fixed" class="ui-header">
Back
<h1>Pokémon Catalog</h1>
</div>
<!-- /catalog header -->
<div data-role="content">
<h1>Gotta catch em all!</h1>
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<tr>
<th>Name</th>
</tr>
</table>
</div>
My JS file:
$(document).on("pageshow", "#catalog-page", function() {
console.warn("catalog-page loaded");
$.ajax({
url: "http://pokeapi.co/api/v2/pokemon/"
}).then(function(data) {
console.warn("Found " + data.count + " pokemon...");
console.warn(JSON.stringify(data.results));
var obj = data.results;
drawTable(obj);
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i], i);
}
}
function drawRow(rowData, c) {
var row = $("<tr />")
$("#table-column-toggle").append(row);
row.append($("<td>" + rowData.name + "</td>"));
}
});
});
The results of this will be like:
Bulbasaur will have an id of pokemon0, ivysaur pokemon1, etc..
The problem is that if I click on Bulbasaur, I want the page to load a new div. In this div I want to provide information about the Bulbasaur. I am using Jquery mobile for the dynamic loading of the div.
In my HTML code:
<div id="pokemon0" data-role="page">
<div data-role="header" data-id="header" id="catalog-header" data-position="fixed" class="ui-header">
Back
<h1>Here comes the name of the pokemon</h1>
</div>
</div>
This works, but as you can see, I've written id="pokemon0", but that is not how I want it because otherwise I have to create 811 div's..
So long story short, is there a way to change id="pokemon0" to whatever link I am clicking (for instance id="pokemon12")?
You just need one div with generic id
<div id="pokemon" data-role="page">
Add click handler to your dynamic links
$("a[href^='#pokemon']").click(function(){
$('#pokemon h1').html($(this).text());
});
See working example here. By the way, it takes a long time to create 811 table rows.
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>
I am working with a blog and want to move the category above the title on each post listing. when I use the following code I get 50 clones of the first category. I think I need to be using the index parameter of .each() but I'm not sure. Here's my code:
jQuery(document).ready(function(){
jQuery(".blog-category").each(function(){
jQuery(this).insertBefore( jQuery(".blog-head") ) ;
});
});
Essentially I'm trying to insert the
.blog-category
before the
.blog-head
on each post.
HTML
<div id="entry-2839">
<div class="blog-post-in">
<div class="blog-head">content</div>
<div class="blog-side">
<div class="blog-category">more content</div>
</div>
</div>
</div>
This should do the trick:
var e = jQuery(this);
e.closest(".blog-post-in").prepend(e);
I'm bringing external data via JSON for my app. The loading of data is OK.
The problem is when I display this data. I have this page:
<!-- cinema -->
<div data-role="page" id="cinema">
<div data-role="header">
<h1>WGBN Cinema Salvador</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-divider-theme="d" id="programa">
</ul>
</div>
</div>
and this javascript to this page:
$(document).delegate("#cinema", "pageinit", function(data) {
// loop nas salas
$.each($.objCinema, function(key,value) {
$("#programa").append('<li data-role="list-divider">'+value.sala+'</li>').trigger('create');
$.each(value.filmes, function(a,b) {
$.each(b, function(c,d) {
$("#programa").append('<li>'+d+'</li>').trigger('create');
});
});
});
});
And even using .trigger("create") elements inserted in the page are not being styled by jQuery Mobile, I'm doing something wrong?
Try this -
$("#programa").listview("refresh");
/edit
I forgot to mention to try this listview refresh after your inner for each loop.
I am using dynamic div content and toggling between them on clicks, works well but is there a way to retain the last viewed div when the user clicks forward and backward on his browser? Thanks.
<script>
$(".settings").click(function() {
var id = this.id;
if ($("." + $(this).attr('rel')).css('display') == 'none') {
$('.n_tab').hide();
$('.p_tab').hide();
($("." + $(this).attr('rel')).show());
}
});
</script>
<div class="settings" rel="n_tab">
<div class="title info_2_Title">
Notifications</div>
</div>
<div class="settings" rel="p_tab">
<div class="title info_2_Title">
Privacy</div>
</div>
<div id="MasterContainer">
<div class="n_tab" style="display: none;"> the N DIV </div>
<div class="p_tab" style="display: none;"> the P DIV </div>
</div>
Try using a library like history.js to set that up. Internally it will use the pushState API, or fall back to url fragments if the browser doesn't support that.
You could try adding an id to each tab and appending that in an object or array each time a div is selected.
Define an array history = []; outside the click event and in your click event something like
history.push($(this).id);
If you wanted to keep more detailed data you could use a json object and append to it.
Thanks for the help guys, but after fiddling ard with History.js, I still couldn't get it to work, in the end I used a cookie to store the state and then check it when the page with dynamic div loads.
$(function() {
var x = $.cookie('tab_cookie');
($(x).show());
if (x == '.m_tab') {
var btn = document.getElementById('<%= btnLoadm.ClientID %>');
if (btn) btn.click();
}
});