Develop Reference

Can't loop through my Pokemons in Onsen.io

I'm learning how to use onsen.io and the best way to learn is by making a Pokemon app!
But of course, being a noob, I'm having trouble trying to loop through my list of 151 Pokemons using onsen.io. I'm able to console.log the list of 151, but I'm not sure what's missing to display it in an ons-list.
Am I looping it incorrectly?
Thanks!
Here's my code:
<ons-navigator id="myNavigator" page="main-temp"></ons-navigator>
<!-- ******************** main-template ******************** -->
<template id="main-temp">
<ons-page id="main-page">
<ons-toolbar style="background-color: red;">
<div class="center" style="color: #fff;">Pokedex</div>
</ons-toolbar>
</ons-page>
</template>
<!-- ******************** list template ******************** -->
<template id="list-temp">
<ons-page id="list-page">
<div class="content content-container">
<ons-list id="list-item"></ons-list>
</div>
</ons-page>
</template>
<!-- ******************** spinner modal ******************** -->
<ons-modal id="spinner-modal">
<div style="margin: auto;">
<ons-icon icon="md-spinner" size="100px" spin></ons-icon>
</div>
</ons-modal>
window.onload = function (){
var spinnerModal = document.querySelector('#spinner-modal');
spinnerModal.show();
var settings = {
"url":`https://pokeapi.co/api/v2/pokemon?limit=151`,
"method": "GET",
"timeout": 0,
};
$.ajax(settings)
.done(function(result){
sendData(result);
let results = result;
console.log(results);
})
.fail(function(xhr, status, error){
console.log('error:' + xhr.status);
})
.always(function(){
spinnerModal.hide();
})
function sendData(jsonData){
var itemsList = document.getElementById('list-item');
for(let i = 1; i < jsonData.length; i++){
itemsList.appendChild(
ons.createElement(
'<ons-card class="inside-cards">'+
'<ons-list>' +
'<ons-list-item modifier="tappable>' +
'<div class="left" >' +
jsonData[i].name +
'</div>' +
'<div class="" style="margin-left:20px;" >' +
'<ons-icon icon="fa-hashtag"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
'<ons-icon icon="fa-thumbs-up"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
'<ons-icon icon="fa-user"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
'</div>' +
'<div>' +
'</div>' +
'</ons-list-item>' +
'</ons-list>' +
'</ons-card>'
)
);
}
}
}

there are two problems in your code.
your api response contains result but you want list of pokemons which is avaialble in result.results so you need to call sendData(result.results)
you are using template tag which creates a different document scope called documentFragment. also in template the id means the HTML page you want to render in app as template so id should be defined as id='something.htm'. for more details read ons-template
proper use of template
<template id="page.html">
</template>
or
<ons-splitter>
<ons-splitter-content page="page.html">
</ons-splitter-content>
</ons-splitter>
showing this in online editor is a bit difficult since online editor provide only one HTML. let me see if I get time to do this in plunkr/stackblitz online editor or I hope you figure out this from ons documentation.
ons.ready(function() {
var spinnerModal = document.querySelector('#spinner-modal');
spinnerModal.show();
var settings = {
"url": `https://pokeapi.co/api/v2/pokemon?limit=151`,
"method": "GET",
"timeout": 0,
};
$.ajax(settings)
.done(function(result) {
sendData(result.results); // result.results contains pokemon list :)
let results = result;
console.log(results);
})
.fail(function(xhr, status, error) {
console.log('error:' + xhr.status);
})
.always(function() {
spinnerModal.hide();
})
function sendData(jsonData) {
debugger;
var itemsList = document.getElementById('list-item'); // this is no longer null since this is no longer part of template.
for (let i = 1; i < jsonData.length; i++) {
itemsList.appendChild(
ons.createElement(
'<ons-card class="inside-cards">' +
'<ons-list>' +
'<ons-list-item modifier="tappable>' +
'<div class="left" >' +
jsonData[i].name +
'</div>' +
'<div class="" style="margin-left:20px;" >' +
'<ons-icon icon="fa-hashtag"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
'<ons-icon icon="fa-thumbs-up"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
'<ons-icon icon="fa-user"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
'</div>' +
'<div>' +
'</div>' +
'</ons-list-item>' +
'</ons-list>' +
'</ons-card>'
)
);
}
}
})
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ons-navigator id="myNavigator" page="main-temp"></ons-navigator>
<!-- ******************** main-template ******************** -->
<template id="main-temp">
<ons-page id="main-page">
<ons-toolbar style="background-color: red;">
<div class="center" style="color: #fff;">Pokedex</div>
</ons-toolbar>
</ons-page>
</template>
<!-- ******************** list template ******************** -->
<ons-page id="list-page">
<div class="content content-container">
<ons-list id="list-item"></ons-list>
</div>
</ons-page>
<!-- ******************** spinner modal ******************** -->
<ons-modal id="spinner-modal">
<div style="margin: auto;">
<ons-icon icon="md-spinner" size="100px" spin></ons-icon>
</div>
</ons-modal>
</body>
</html>

Uncaught SyntaxError: missing ) after argument list, i have tried many ways

for(var key in result)
{
var html = '';
html += '<li class="item item_chat">' +
'<div class="product-img">' +
'<img src="' + base_url + '/assets/img/noimage.png" alt="Product
Image" class="img-size-50">' +
'</div>' +
'<div class="product-info">' +
'<a href="javascript:void(0)" onclick="viewGroupBody(this,' +
result[key].id + ',' + result[key].name + ');" class="product-
title">' + result[key].name +
'<span class="badge badge-danger float-right"> Group </span></a>' +
'<span class="product-description"> Message </span>' +
'</div>' +
'</li>';
$('#messageListDashGroups').append(html);
}
I am getting error on this line in onclick function
'<a href="javascript:void(0)" onclick="viewGroupBody(this,' +
result[key].id + ',' + result[key].name + ');" class="product-
title">' + result[key].name +
Before i use two arguments
onclick="viewCusBody(this,' + id + ')"
But now i add an extra argument so i am having issue

You can try with Template literals.
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
Demo:
var base_url = "test.com";
var result_id = "some_id";
var result_name = "jhon";
var html = `<li class="item item_chat">
<div class="product-img">
<img src="${base_url}/assets/img/noimage.png" alt="Product
Image" class="img-size-50">
</div>
<div class="product-info">
<a href="javascript:void(0)" onclick="viewGroupBody(this,'${result_id}','${result_name}');" class="product- title">${result_name}
<span class="badge badge-danger float-right"> Group </span></a>
<span class="product-description"> Message </span>
</div>
</li>`;
$('#messageListDashGroups').append(html);
function viewGroupBody(el, id, name){
console.log(id)
console.log(name);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageListDashGroups"></div>
For IE: Try the traditional way by changing
onclick="viewGroupBody(this,' + result[key].id + ',' + result[key].name + ');"
To
onclick=viewGroupBody(this,"'+result['key'].id+'","'+result['key'].name+'")
var base_url = "test.com";
var result = {key:{id: "some_id", name:"john"}};
var html = '';
html += '<li class="item item_chat">' +
'<div class="product-img">' +
'<img src="' + base_url + '/assets/img/noimage.png" alt="Product Image" class="img-size-50">' +
'</div>' +
'<div class="product-info">' +
'<a href="javascript:void(0)" onclick=viewGroupBody(this,"'+result['key'].id+'","'+result['key'].name+'"); class="product- title">'+
'<span class="badge badge-danger float-right"> Group </span></a>' +
'<span class="product-description"> Message </span>' +
'</div>' +
'</li>';
$('#messageListDashGroups').append(html);
function viewGroupBody(el, id, name){
console.log(id)
console.log(name);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageListDashGroups"></div>

Dynamically adding items to listview (jQuery mobile)

How i can you pull out of the object's data and dynamically add them to the listview
function (){
var person = {
title: "ddd",
mes: "sss",
op: {},
tel: 2
};
}
the data will be coming from to json server
<div data-role="page" id="page1">
<div data-role="header">
<h1>Заголовок</h1>
</div>
<ul data-inset="true" id="ideaposits" data-role="listview" data-split-icon="gear">
<script type="text/html" id="list">
<li>
<a class="ui-btn ui-icon-carat-r " href="#page2">
<h2 class="title"></h2>
<p class="mes"></p>
</a>
</li>
</script>
</ul>
</div>
and move on to the second screen page2 ........

First, make the "template" element hidden:
<li style="display:none">
<a class="ui-btn ui-icon-carat-r " href="#page2">
<h2 class="title"></h2>
<p class="mes"></p>
</a>
</li>
Then, change your javascript to copy the template item and fill in the values, and then show it:
function (){
var person = {
title: "ddd",
mes: "sss",
op: {},
tel: 2
};
var li = $("li");
var newLi = li.clone();
newLi.find(".title").text(person.title);
newLi.find(".mes").text(person.mes);
newLi.show();
li.after(newLi);
}

function getRandomInt(min, max) {
//credit : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
function dataFromAjaxExample(){
var sumall = getRandomInt(2,20);
$('#head-list').html('List View ( total item ' + sumall + ' )');
// json data from ajax example
var itemlist = [];
for(i=1;i<=sumall;i++){
itemlist.push({
itemid: i,
title: 'Item ' + i,
desc: 'is ' + i,
page: 'page'+i
});
}
return itemlist;
}
//template
function itemList(item){
var htmlList = [
'<li>',
'<a class="ui-btn ui-icon-carat-r " href="#' + item.page + ' ">',
'<h2 class="title">' + item.title + '</h2>',
'<p class="desc">' + item.desc + '</p>',
'</a>',
'</li>'
];
return htmlList.join('');
}
//add process
function addItemListView(data){
is_list = $('#ideaposits');
is_list.html('');
data.forEach(function(x){
is_list.append(itemList(x));
});
}
//main process
setInterval(function(){
addItemListView(dataFromAjaxExample());
},4000);
//onload
addItemListView(dataFromAjaxExample());
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1 id='head-list'>List View</h1>
</div>
<ul data-inset="true" id="ideaposits" data-role="listview" data-split-icon="gear">
<li>
<a class="ui-btn ui-icon-carat-r " href="#page2">
<h2 class="title"></h2>
<p class="mes"></p>
</a>
</li>
</ul>
</div>

How To Refresh New Div Content in Jquery Mobile 1.4.5

I'm dynamically adding content to page div.
But i could not refresh to new content.The style is missing.(Only shows links)
I'm trying to add listview.
Here is my popup.html:
<div id="pageDiv" data-role="page" data-theme="a">
<div id="contentDiv">
</div>
</div>
Here is my popup.js:
$("#button").on("click",function(e){
var contentDiv = $("#contentDiv");
contentDiv.empty();
var wordDiv = '<ul id="wordListViewId" data-role="listview" data-split-icon="plus" data-split-theme="a" data-inset="true" style="height:15px;width:350px;margin-left: auto;margin-right: auto;">' +
'<li>' +
'<h3 style="text-align: center;">' + 'try me' + '</h3>' +
'<a id="minusId" href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>' +
'</li>' +
'</ul>';
contentDiv.append(wordDiv);
});

Working fiddle.
You can use .trigger( "create" ) :
contentDiv.append(wordDiv).trigger( "create" );
Hope this helps.

jQTouch Dynamic Web app?

I'm working on a dynamically changing web app. I'm using javascript and jQuery to populate DIV's with <li>'s and <a>'s. For example, I start with one menu dynamically built with javascript. From that menu, depending on item selected, another javascript function gets called to dynamically populate the corresponding DIV. The problem coming when I keep dynamically building submenu's and JQTouch doesn't switch to the next page.
In the following code, the alert('what') displays on an iPhone but never switches to the ePresentationDetails DIV. I have tried forcing it with jQT.goTo(); but that usually causes more issues and doesn't fix the problem.
Basic html code:
<div id="home">
<div class="toolbar">
<a class="blueButton" href="javascript: void(0);" onClick="$('#logout').show();">Logout</a>
<h1>AllaccessMD</h1>
</div>
<div id="logout" style="display:none;">
<div id="confirmBox">
Are you sure?
<a class="logoutButton" href="javascript: void(0);" onClick="logOut();">Logout</a>
<a class="cancelButton" href="javascript: void(0);" onClick="$('#logout').hide();">Cancel</a>
</div>
</div>
<h1>Home</h1>
<ul class="edgetoedge" id="ulHome"></ul>
</div>
<div id="ePresentations">
<div class="toolbar">
<a class="button back" href="#">Back</a>
<h1>AllaccessMD</h1>
</div>
<div id="ePresentationsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
</div>
</div>
<div id="ePresentationDetails">
<div class="toolbar">
<a class="button back" href="#">Back</a>
<h1>AllaccessMD</h1>
</div>
<div id="ePresentationDetailsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
</div>
</div>
Javascript file:
function setupHome(){
if(localStorage.role == "Specialist"){
var homeUL = '<li class="arrow"><a id="aEP" rel="s,' + localStorage.userID + '" href="#ePresentations">My E-Presentation</a></li>'
+ '<li class="arrow"><a id="aN" rel="s,' + localStorage.userID + '" href="#date">My Newsletter</a></li>'
+ '<li class="arrow"><a id="aE" rel="s,' + localStorage.userID + '" href="#date">My Events</a></li>'
+ '<li class="arrow"><a id="aMP" rel="s,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="aS" rel="s,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="aP" rel="s,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
} else {
var homeUL = '<li class="arrow"><a id="aMP" rel="m,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
+ '<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>'
+ '<li class="arrow"><a id="aP" rel="m,' + localStorage.userID + '" href="#date">Profile</a></li>';
$('#ulHome').html(homeUL);
}
$('#ePresentations').bind('pageAnimationStart', function (e){setupEPresentations(getID($('#aEP').attr('rel')).id);});
}
function setupEPresentations(sID){
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var epObject = JSON.parse(xmlhttp.responseText);
var html = '<h1>Dr. ' + epObject.DR.DATA[0][1] + ' E-Presentation\'s</h1>';
if(epObject.EP.DATA.length == 0){
html += '<div><p>There are currently no E-Presentation\'s for this doctor.</p></div>';
} else {
html += '<ul class="edgetoedge">';
for(var i in epObject.EP.DATA){
html += '<li class="arrow"><a id="' + epObject.EP.DATA[i][0] + '" href="#ePresentationDetails">' + epObject.EP.DATA[i][1] + '</a></li>';
}
html += '</ul>';
}
$('#ePresentationsData').html(html);
$('#ePresentationsData li a').click(function(e) {alert('what');setupEPresentationDetails(this.id);});
}
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getAllEPsID&sID=" + sID,true);
xmlhttp.send();
}
function setupEPresentationDetails(id){
/*xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var epObject = JSON.parse(xmlhttp.responseText);
var html = '<h1>Dr. ' + epObject.DATA[0][0] + ' E-Presentation</h1>';
html += '<p>';
//html += '<br />' + epObject.DATA[0][2].format("mmmm dd, yyyy");
html += '<br /><strong>Rating:</strong> ' + Math.ceil(epObject.DATA[0][4]) + ' / 5 (' + epObject.DATA[0][5] + ' votes cast)';
html += '<br /><br /><a rel="external" href="http://www.youtube.com/v/' + epObject.DATA[0][3] + '">Click here to view E-Presentation</a>';
html += '</p>';
$('#ePresentationDetailsData').html(html);
}
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getEP&id=" + id,true);
xmlhttp.send();*/
$('#ePresentationDetailsData').html('I dont get called?');
}
What am I doing wrong? Maybe there is a better way to do this?
Thanks!!

What version of JQT are you using?
Are you wrapping your entire app in the <div id="jqt"></div> ?
Have you looked at it using Safari developer mode to see what the list HREFs actually are when they are rendered?
I would look at the rendered HREF for these:
<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>
Make sure the html is what it should be. The rel= or your quotes not being escaped might be throwing it off. But I don't see anything obvious that you are doing wrong.
Do you have a link you can send me so I can debug it in action?