I have an application where I am attempting to use Ember to persist a data model to CouchDB. I have been working through the Ember tutorial and am stuck trying to set up my application.
My HTML looks like:
<!DOCTYPE html>
<html>
<head>
<title>Habit Tracker</title>
<link rel="stylesheet" href="style/main.css" type="text/css"/>
<link rel="stylesheet" href="vendor/couchapp/jquery.mobile-1.4.2.css" type="text/css"/>
</head>
<body>
<div id="account"></div>
<h1>Habit Tracker</h1>
<div id="profile"></div>
<div id="content"></div>
<div id="sidebar">
<p>Track your habits.</p>
</div>
<script src="vendor/couchapp/jquery-1.8.3.js"></script>
<script src="vendor/couchapp/handlebars-1.0.0.js"></script>
<script src="vendor/couchapp/ember.js"></script>
<script type="text/x-handlebars" data-template-name="habits">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>Habits</li>
<li>Mood</li>
<li>Events</li>
<li>Stats</li>
</ul>
</div>
<div id="habits" class="ui-body-d ui-content">
<ul data-role="listview" data-inset="true">
<li><a href="#">
<span>Pipe Of Tobacco</span>
<span data-role="timer">1995-12-17T03:24:00</span>
</a></li>
<li><a href="#">
<span>Pipe Of Tobacco</span>
<span data-role="timer">1995-12-17T03:24:00</span>
</a></li>
<li><a href="#">
<span>Pipe Of Tobacco</span>
<span data-role="timer">1995-12-17T03:24:00</span>
</a></li>
<li><a href="#">
<span>Pipe Of Tobacco</span>
<span data-role="timer">1995-12-17T03:24:00</span>
</a></li>
</ul>
</div>
<div id="mood">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
</ul>
</div>
<div id="events"></div>
<div id="stats"></div>
</div>
</script>
<script src="script/application.js" type="text/javascript"></script>
<script src="script/router.js" type="text/javascript"></script>
<script src="vendor/couchapp/jquery.mobile-1.4.2.js"></script>
</body>
</html>
My application.js is just:
window.Habits = Ember.Application.create()
And router.js is:
Habits.Router.map( function() {
this.resource( 'habits', { path: '/' } )
} )
When I load the page , I get the following in the console:
DEBUG: ------------------------------- ember.js:3461
DEBUG: Ember : 1.4.1+pre.af87bd20 ember.js:3461
DEBUG: Handlebars : 1.0.0 ember.js:3461
DEBUG: jQuery : 1.8.3 ember.js:3461
DEBUG: ------------------------------- ember.js:3461
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.8.3.js:3254
DEBUG: ------------------------------- VM2062:3461
DEBUG: Ember : 1.4.1+pre.af87bd20 VM2062:3461
DEBUG: Handlebars : 1.0.0 VM2062:3461
DEBUG: jQuery : 1.8.3 VM2062:3461
DEBUG: ------------------------------- VM2062:3461
Ember Debugger Active VM2053:151
Uncaught Error: Assertion Failed: You cannot use the same root element (body) multiple times in an Ember.Application
If I remove the reference to jQuery Mobile, I only get one loading message (from ember.js) and no error.
By tracing the execution of jQuery Mobile I was able to narrow the error down to the lines:
var $pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" )
if( !$pages.length ) {
$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 )
}
I fixed the error by wrapping my handlebar template in:
<div data-role="page">
Related
I have an accordion written like this
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="editTournamentAccordionWrapper">
<div class="accordion-body">
<iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
When i click the first time on the Accordion header, the accordion won't open and the following exception will be threw
Uncaught TypeError: 'querySelectorAll' called on an object that does not implement interface Element. selector-engine.js:18:59
Any idea of the reason? As far as I noticed, this is the minimum code I had to wrote in order to make the bug present
TLDR: A # is missing in the data-bs-parent attribute.
According to the Bootstrap documentation, the data-bs-parent accepts a
selector | jQuery object | DOM element
When you pass in data-bs-parent="id" for the attribute, it is plain text hence belongs to none of the categories. As a result you get the Uncaught TypeError: Illegal invocation
Working example:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="#editTournamentAccordionWrapper">
<div class="accordion-body">
Card Body
<!-- <iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>-->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
The below given code is not working even after including all the script files.I cannot see the toggle happen on the panel.
What needs to be added to the code?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row aet-content-fluid">
<div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="panel-title">
<h2>
<a role="button" data-parent="#accordion"
data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1"
class="" aria-expanded="false"><span>Office Information</span>
</a>
</h2>
</div>
</div>
<div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body office-detail-panelBody">
This content is straight in the template.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It took me a while but it seems the problem is in scripts you included.
First you need a jquery included.
And the second: Order is important.
When I set the <head> section to:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="example.js"></script>
</head>
It worked! Three first inclusions (link and two scripts) is the order recommended by bootstrap creators.
I tried to implement external panel on JQM 1.4.5 but I did'nt success to display it correctly on my web app. JQM 1.4.5 doc about external panel
My code is written below.
Thanks for helping,
Clément
<html>
<head>
<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-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some content
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some other content
</div>
</div>
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
<div class="ui-panel-inner">
<ul data-role="listview">
<li data-icon="home">
<a id="menu-home" href="index.php#home">Home</a>
</li>
<li data-icon="user">
<a id="menu-account" href="#">Account</a>
</li>
<li data-icon="gear">
<a id="menu-settings" href="#">Settings</a>
</li>
<li data-icon="mail">
<a id="menu-contact" href="#contact">Contact</a>
</li>
</ul>
</div>
</div><!-- /mypanel -->
</body>
</html>
You need to enhance the panel in java-script. In $(document).ready write the following code:
$('#mypanel').enhanceWithin().panel();
Wondering if anyone has been able to use the Dygraph in conjunction with a jquery mobile. Say I define the following page:
<html>
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="/js/dygraph-combined.js"></script>
</head>
<body>
<div class="page" data-role="page">
<div class="header" data-role="header">
<h1>Header</h1>
</div>
<div class="ui-content" data-role="main">
<div id="graph" style="border:1px solid"></div>
</div>
<div class="footer" data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
//<![CDATA[
new Dygraph(document.getElementById("graph"), //"http://localhost:8081/twenty20/scores");
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
//]]>
</script>
The graph does not get displayed. All I see is a blank div. But if I replace the body with just
<body>
<div id="graph"></div>
</body>
This works fine.
Could it be to do with the timing of when I create my Dygraph object?
For jQuery Mobile you should use their documented page structure and the events they provide for when the page is ready:
<div data-role="page" id="page1">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div role="main" class="ui-content" >
<div id="graph"></div>
</div>
</div>
Use CSS to set the graph size:
#graph { height: 300px; }
In JavaScript, it seems that pagecreate, pagebeforeshow do not work for the dygraphs, so you can use pageshow or another event that comes after the page is rendered:
var g1;
$(document).on("pageshow", "#page1", function(){
if (!g1){
g1 = new Dygraph(document.getElementById("graph"),
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
}
});
Here is a DEMO
Is it possible to make the UI Tabs closed by default, until clicked?
The 2 week search is still on! Such a complex/bloated script, and yet no simple way to control
Try this jsfiddle,
$("#tabs").tabs({
collapsible: true,
active: false
});
This could use some polish, but it should get you on the right track.
http://jsfiddle.net/vbmMJ/2/
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
$(".tab-content").hide();
$(".ui-tabs-active").removeClass("ui-tabs-active");
$(".ui-state-active").removeClass("ui-state-active");
$(".ui-tabs-anchor").click(function() {
$($(this).attr("href") + " .tab-content").first().show();
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab-1">
<div class="tab-content">
tab 1 content
</div>
</div>
<div id="tab-2">
<div class="tab-content">
tab 2 content
</div>
</div>
</div>
</body>
</html>