How to navigate through a dynamic created link? - javascript

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.

Related

Append element from another page?

Given this HTML:
index.html:
<div class="tile" data-tilename="test">
<div class="tileHeader">Tile Name</div>
</div>
tile-content.html:
<div id="test-tile" class="tileContent">
<!-- lots of stuff here. -->
</div>
How can I arrive at the following?
<div class="tile">
<div class="tileHeader">Tile Name</div>
<div class="tileContent">
//lots of stuff here.
</div>
</div>
Currently all these are created dynamically, so here is my current code:
let $elTile = $('<div/>', {
class: 'tile'
}).appendTo($elContainer);
let $elTileHeader = $('<div/>', {
class: 'tileHeader',
html: tile.header
}).appendTo($elTile);
let $elTileContent = $('<div>').load('tile-content.html #' + tile.name + '-tile');
$elTile.append($elTileContent);
The last two lines above were inspired by this solution. Unfortunately it adds an extra <div> which I would like to avoid:
<div class="tile">
<div class="tileHeader">Tile Name</div>
<div> <!-- I don't want this -->
<div class="tileContent">
<!-- lots of stuff here. -->
</div>
<div>
</div>
How can I arrive at the desired solution?
There are a couple similar questions, but none that I found have solutions and my situation is slightly different (dynamically created elements).
It's because you are creating that extra div by yourself here:
let $elTileContent = $('<div>').load(...)
You should load the content, then prepend the header:
//create the tile and add it to the container
let $elTile = $('<div/>', {
class: 'tile'
}).appendTo($elContainer);
//create the header but do not add it yet
let $elTileHeader = $('<div/>', {
class: 'tileHeader',
html: tile.header
})
//load the content into the tile
$elTile.load('tile-content.html #' + tile.name + '-tile', function(){
//on the "complete" callback, prepend the header
$elTile.prepend($elTileHeader);
});
Happy Coding :)
You are telling it to give that extra div on this line:
let $elTileContent = $('<div>).load('tile-content.html #' + tile.name + '-tile')
You would need to do the load on the element with the tile class first and then duse the .prepend instead of append for the header div element so it stacks above the loaded content div.

Clearing the listview contents

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.

FirefoxOS emulator and JSFiddle giving different result

I have the following code:
http://jsfiddle.net/xFzy8/4/
HTML:
<body>
<!-- ..................... Page 1 - HOME ..................... -->
<!-- ......................................................... -->
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h3>My Test App</h3>
</div>
<div data-role="content">
<div class="container-wrapper">
<!--
..................FOR TESTING ONLY..................
<div class="container">
<div data-role="collapsible" id="coll1">
Delete
<h3>Item 1</h3>
<p>This is item 1</p>
</div>
</div>
..................................................
-->
</div>
</div>
</div>
</body>
CSS:
.btn-delete{
position:absolute;
top:0;
right:2px;
display:block !important;
z-index:10000;
}
.ui-collapsible {
position: relative;
}
Javascript:
$(document).ready(function() {
var $containerWrapper = $('.container-wrapper');
/*..............FOR TESTING...................
//var $btnDelItem1 = $('#delColl1').detach();
//$('#coll1').append($btnDelItem1);
..............................................*/
for(var i=1; i<=5; i++) {
var $containerDiv = $('<div>', {'class':'container'})
var $divCol = $('<div>', {'data-role':'collapsible', 'id':'coll'+i});
var $btnDel = $('<a>', {'href':'#', 'class':'btn-delete ui-btn ui-icon-delete ui-corner-all ui-btn-icon-notext', 'id':'btnDel'+i});
var $colHead = $('<h3>', {'text':'Item '+i});
var $colContent = $('<p>', {'text':'This is item '+i});
$containerDiv.append($divCol);
$divCol.append($colHead);
$divCol.append($colContent);
$containerWrapper.append($containerDiv);
$containerWrapper.trigger('create');
$divCol.append($btnDel);
}
});
I am using the same code to run the webapp on firefoxOS emulator. But i am getting a different result. This is the result i'm getting on the emulator:
http://imagizer.imageshack.us/v2/800x600q90/208/mzv6.jpg
On JSFiddle, the Delete icon is appearing as it should. But on the emulator, the delete button is appearing below the collapsible headers. Even when i open the 'index.html' in a normal browser, im getting the same result as in the emulator.
How do I fix this?
Thanks!
Try these 2 things:
1 put the btn-delete class at the end of the list instead of first in the list of classes and see if it makes any difference.
2 Instead of the class, just use jQuery to set the CSS. After appending the created DOM elements, run this:
$btnDel.css({"position": "absolute", "top": "0", "right": "2px", "zIndex": "10000"});
Here is your updated FIDDLE
Also, instead of jQuery document.ready, use one of the jQM init events like:
$(document).on("pageinit", function() {...
If jQM is still overriding your class, try appending the DOM elements in pageinit, and then set the CSS in pageshow.

Dynamically created collapsible-set in jQuery Mobile

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>

dynamic listview not being styled by jQuery Mobile

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.

Categories