We Keep Coding

Two jquery ui tabbed divs on one page. One works, the other doesn't

I have a page with two div panels, a left and a right. Both panels are tabbed using jquery-2.1.4.min.js and jquery-ui.js. One panel has three tabs, and it works.
The js in the head of my page looks like this:
$(function(){
// Doesn't matter if following two lines are reversed. Same output.
$( "#property-card" ).show().tabs(); // this one doesn't work
$( "#tabs" ).show().tabs(); // this one works
});
The html looks like this:
//This tabbed content works:
<div id="tabs">
<ul>
<li>Tasks</li>
<li>Notes</li>
<li>Photos</li>
</ul>
<div id="tabs-1">
<!-- Tasks -->
</div>
<div id="tabs-2">
<!-- Notes -->
</div>
<div id="tabs-3">
<!-- Other -->
</div>
The other div panel looks something like this:
//This one shows hyperlinked text within the content area, instead of showing tabs
<div id="property-card" class="eight columns light-manilla curved10 border-dark border-2 border-ridge padding-1-percent">
<ul>
<li>Property</li>
<li>Help</li>
<li>List Price</li>
<li>Taxes</li>
<li>HOA</li>
<li>Showing Instructions</li>
<li>BPO Values</li>
<li>Buyer Leads</li>
</ul>
<div id="property">
</div>
<div id="property-help">
</div>
<div id="property-list-price">
</div>
<div id="property-taxes">
</div>
<div id="property-hoa">
</div>
<div id="property-showing-instructions">
</div>
<div id="property-bpo-values">
</div>
<div id="property-buyer-leads">
</div>
</div>
(not sure if this is related) Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/jquery-2.1.4.min.js:4:14346
ReferenceError: data is not defined
(I think this one is related) jquery-2.1.4.min.js%20line%202%20%3E%20eval:35:1
See inline screen shot sample for example of what's going on.

Hate answering my own questions, but in another file at the bottom of my html, there is another javascript block, which "activated" the working tabbed div, but because I didn't add the new tabbed div (because I didn't realize that second javascript block was there) the second tabbed div didn't work. Here is what made it work:
$(function () {
$('#property-card').tabs({
activate: function (event, ui) {
var $activeTab1 = $('#property-card').tabs('option', 'active');
}
});
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab2 = $('#tabs').tabs('option', 'active');
if ($activeTab2 == 2) {
// HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
$("#mls-images-carousel").css("display","block");
retrieveAssetImages('<?php echo $as_id; ?>');
}
else{
$("#mls-images-carousel").css("display","hidden");
}
}
});
});

How to navigate through a dynamic created link?

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.

Initial Page blank until Page refresh

Basically when I hit the first page and click on the button, it should display the first 2 dynamic posts. Unfortunately no post is displayed until I hit the refresh button on my browser before the first 2 posts appears.
I have spent hours trying to figure out what I am missing in this code:
$(document).ready( function () {
var data = $.getJSON("http://howtodeployit.com/category/daily-devotion/feed/?json=recentstories", function(data) {
var $postsList = $('#postlist'),
$loadMore = $postsList.parent().find('.load-more'),
currentPage = 0,
postsPerPage = 2;
var showMorePosts = function () {
var offset = currentPage * postsPerPage,
posts = data.posts.slice(offset, offset + postsPerPage);
$.each(posts, function ( i, val ) {
$('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('').appendTo($postsList);
});
if( posts.length !== postsPerPage ) {
$loadMore.hide();
}
currentPage++;
$postsList.listview('refresh');
};
$postsList.listview();
showMorePosts();
$loadMore.on('click', showMorePosts);
});
});
HTML:
<!-- Page: home -->
<div id="home" data-role="page" data-theme="d" data-title="My Devotion">
<div data-role="listview">
Daily Devotional Messages
</div><!-- links -->
</div><!-- page -->
<!-- Page: Daily Devotional Messages -->
<div id="devotion" data-role="page" data-title="My Devotion">
<div data-role="header" data-theme="a" data-position="fixed"> <h2>Daily Devotional Messages</h2></div><!-- header -->
<ul data-theme="d" id="postlist"> </ul><!-- content -->
<div class="load-more">Load More Posts...</div>
</div><!-- page -->
Also seeing this error:
Uncaught TypeError: Cannot read property 'jQuery1101005234554712660611' of undefined

I notice you are not adding callback parameter "callback=?" to your json request url, It shouldnt matter if your code is from the same server.
also, the "#postlist" is empty, it doesnt contain any li elements,
the error is caused when "$postsList.listview();" is called.
maybe because your ul is empty.
You can inspect element the "#postlist" to find it empty

jQuery Mobile listview in tabs and rendering problems

I'm writing a very simple app in PhoneGap + jQuery Mobile.
The aim is to become more confident in writing PhoneGap applications.
The app is very simple: it has an HomePage with a navbar.
The navbar has three buttons: Contacts, Calendar and Docs.
The buttons manage three tabs in the <div data-role="content"> element.
I have hidden those three tabs.
When the user tap on the navbar, I can navigate through the tab correctly.
Now, the problem: I successfully load the Contacts in the first tab but, when I navigate to it, I see only the dividers!
Instead, if I do not hide the Contact tab in the home, I can see the contacts correctly.
I'd like to load all the data while the user is still in the home page. So, while he decide what to do, the app should has enough time to load them.
The following screenshots show what I mean:
Why does this happens?
If you need my code, here it is (only significant part! ;) )
HTML:
<!-- Home jQueryMobile page -->
<div data-role="page" id="homePage" data-dom-cache="true">
<!-- Header -->
<div data-role="header" id="homePageHeader" data-position="fixed">
<h1>Frankie App</h1>
</div>
<!-- android style navbar. If the device is not an android, it
will not be shown -->
<div data-role="navbar" id="androidNavBar" hidden>
<ul>
<li>Contatti</li>
<li>Calendario</li>
<li>Documenti</li>
</ul>
</div>
<!-- Page content: it contains 4 tabs. The home + the 3 tabs reachable by the navbar-->
<div data-role="content">
<div id="homeLogger" hidden>Logger</div> <!-- I use this div as a console to debug -->
<div id="tabs">
<div id="homeTab">
<p align="center">
<img src="http://leaderchat.files.wordpress.com/2011/10/bigstock_cartoon_frankenstein_moster_as_151295541.jpg" height="280"/>
</p>
</div>
<div id="contactsTab">
<h1>Contacts</h1>
<ul id="contactList" data-role="listview" data-autodividers="true" data-inset="true">
</ul>
</div>
<div id="calendarTab" hidden>
<h1> Calendar </h1>
</div>
<div id="docsTab" hidden>
<h1> Documents </h1>
</div>
</div>
</div>
<!-- Footer -->
<div data-role="footer" id="homePageFooter" data-position="fixed">
<!-- iOS style navbar. If the device is not an iPhone, it
will not be shown -->
<div data-role="navbar" id="iOSNavBar" hidden>
<ul>
<li>Contatti</li>
<li>Calendario</li>
<li>Documenti</li>
</ul>
</div>
</div>
</div>
JS:
$('#homePage')
.bind('pageinit',
function(){
//Comment the next line to remove the logger from the home page
$("#homeLogger").show();
$("#homeLogger").text("jQuery Initialized");
//Registering to PhoneGap/Cordova lifecycle events
$(document).bind('deviceready', initialize)
});
// ============ //
// Initializers //
// ============ //
function initialize()
{
$("#homeLogger").text("device ready");
initNavBar();
initContacts();
}
function initNavBar()
{
//Retrieve the device platform using PhoneGap
platform = window.device.platform;
$("#homeLogger").text("detected platform: "+platform);
var navbar = null;
if(platform && platform == Constants.ANDROID){
navbar = $("#androidNavBar");
$("#homeLogger").text("show Android navBar");
} else {
//If the platform is not an android, I keep the bottom
//navbar because I prefer its look
navbar = $("#iOSNavBar");
$("#homeLogger").text("show iOS navBar");
}
if(navbar) //safety check to avoid null reference.
navbar.show(); //jQuery show() method
}
function initContacts(){
$("#homeLogger").text("loading contacts...");
var contManager = new ContactManager();
contManager.getAllContacts(["id", "name"],
function(retrievedContacts){
for(var i=0; i<retrievedContacts.length; i++){
var toAppend = "<li><a href='#'>"+retrievedContacts[i].name.formatted+"</a></li>";
$("#contactList").append(toAppend);
$("#homeLogger").text("element appended "+i);
}
$("#homeLogger").text("element "+$("#contactListview"));
$("#contactList").listview('refresh');
$("#homeLogger").text("list refreshed");
},
function(error){
$("#homeLogger").text("error: "+error);
});
}
// ========== //
// Navigation //
// ========== //
function showTab(tab)
{
$("#homeLogger").text("Selected Tab: "+tab);
$("#tabs").find("div").hide();
$("#"+tab.id).show();
}
Thank you very much for your help.
Rik

Have your tried to recreate the content page after dynamically adding content?
$('[data-role="content"]').trigger('create');
I gues your should do this b4 refreshing your ListViews (but after your for-loop has finished).

jQuery .append() JSON data in a jQuery Mobile list adding duplicates when page is refreshed?

I need help. I can't find my mistake. For some reason I get duplicate li when I append a ul. I created an AJAX search that searches for results upon keyup. The problem is that when I leave the page, for example if I click on profile and come back, if I search the same keyword, I get duplicate results. Which is very weird because I empty() my ul before typing anything in. It might be something very simple but I cannot find it.
Here is my jQuery that appends my ul:
$(document).delegate("#search", "pageshow", function() {
$("#search input").focus(function() {
$("ul#search_list").empty();
$(this).val("");
localStorage.search = "";
});
$("#search input").keyup(function() {
$("ul#search_list").empty();
localStorage.search = $("#search input").val();
var result = "";
$.ajax({
url: '/app/users/search/'+localStorage.search,
dataType: 'jsonp',
jsonp: 'jsoncallback',
success: function(data) {
$.each(data, function(i,item){
var result = '<li><a href="#friend_profile" class="friend_profile" data-search_user_id="'
+ item.id +
'"><img class="round" src="'
+ item.picture + '" /><h3>'
+ item.name +
'</h3><p>' + item.location + '</p></a></li>';
$("ul#search_list").append(result);
$("ul#search_list").listview('refresh');
});
},
error: function(){
$("ul#relationships_list").text('Sorry, you dont seem to have any friends.');
}
});
});
});
Here is the HTML ul that is being appended:
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
<a data-rel="back">Back</a>
<h1>Search</h1>
Settings
</div><!-- /header -->
<div data-role="content">
<ul id="search_list" data-role="listview" data-filter="true">
</ul>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Dash</li>
<li>Points</li>
<li>Claim</li>
<li>Search</li>
<li>Profile</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
Here is a screenshot of what appears. In case you want the visual:
Thanks everyone!

I had that issue once where I cleared the results on page hide. I'm not sure what version of JQueryMobile you're using, but I had this issue in 1.0. The ajax event doesn't seem to destroy the page on pagehide, so I had to remove the elements on pagehide. I don't know if this helps.

None of these options worked. But I found a quick fix that removes duplicates in a ul. It is the only thing that has worked so far. Here is a link to the solution:
jquery remove duplicate li