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");
}
}
});
});

app.route not working in browser while working fine in mobile - Polymer1.0

I have polymer 1.0 app. In my routing.html file I have following configuration for routes.
page('/applications', function () {
app.route = 'Applications';
});
page('/claims', function () {
app.route = 'Claims';
});
I have applied data-routes attr in index.html file to map the corresponding section part.
For Ex:
<a data-route="Claims" href="/claims">
<iron-icon icon="report-problem"></iron-icon>
<span>Claims</span>
</a>
<section data-route="Claims">
<div class="vertical layout center">
<div>
<p>Getting Claims...</p>
<paper-progress value="10" secondary-progress="30" class="" indeterminate elavation="4"></paper-progress>
</div>
</div>
</section>
So the main problem occurs when I try to change the routes through a function. In my case I am calling a function on paper-fab tab event
I want to change the route when a user click on paper fab, to achieve this I defined a method "createApplication" in app.js
app.createApplication = function() {
app.route = 'Create Application';
};
and section part for this route in index.html file
<section data-route="Create Application">
<div class="vertical layout center fit">
<p> Some content</p>
</div>
</section>
The problem is when I click on the paper -fab its not changing the route in browser but same code runs fine in mobile.

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.

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.

jQuery Mobile // theming my dynamic dialog box

in my notification dialog,
i want to specified by parameter dialog box type.
but theming isnt manage after all, so input and others arent theme with css from my javascript function.
HTML :
<div id="notification" data-role="page" >
<div data-role="header" data-theme="c">
<h1></h1>
</div>
<div data-role="content" data-theme="c">
</div>
</div>
JAVASCRIPT :
function notification(title, text, notification_transition){
$.mobile.changePage( "#notification", {
transition: notification_transition,
role: "dialog"
} );
$("#notification h1").html(title);
$("#notification p.message").html(text);
$("#notification div[data-role=content]").html('<p class="message"></p>'+
'<p>Identifiant</p>'+
'<input type="text" value="" data-theme="a">');
try
{
navigator.notification.vibrate(500);
}
catch(error) {}
}
how relaunch jaquery mobile theming after $("#notification div[data-role=content]").html();
thank in advance
Metos

You could try the following:
http://forum.jquery.com/topic/how-to-refresh-the-theme-of-a-button