I'm very new to Ember and am trying to follow the ToDo app tutorial. However, I am having a hard time generating a handlebar script in my index.html file. Here is what the index file looks pre-handlebars script
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js • TodoMVC</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.4.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
</body>
</html>
However, when I wrap the handlebars script tag within the body element, the other HTML elements are not rendered properly. The code doesn't run in my browser and I suspect the script is missing a closing element somewhere. I'm not sure where. Does anyone have any pointers. Much appreciated and thank you in advance.
<script type="text/x-handlebars" data-template-name="todos">
<section>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</script>
I'm not completely sure what the issue is, but I would check that all of your js files are being properly loaded. I actually tried the ToDo demo from here that used JS Bin and I didn't see that it was working. However, after taking that code and placing into a jsfiddle where the sources are loaded in the <head> tag, it actually worked.
Here's a link to the jsfiddle and here a link to the live version. I would inspect the output on the second link and see what the differences are between that and your code.
Hope you get your question resolved!
I faced the same issue while working through the Tutorial.
The trick is in the order of the script includes. Make sure that the framework dependencies are included first and then the application.js and finally the router.js. See below:
<!-- ... Ember.js and other javascript dependencies ... -->
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
You can't write html on < script > element !!
Related
The problem I am getting is, whenever I am clicking on the Question It has to show the answer, but I am unable to get it so please help me getting it.
My code:
<html>
<head>
<meta charset="UTF-8">
<title>FAQ</title>
</head>
<body>
<div class="faq">
<ul class="frequent-ul list-unstyled">
<div class="bb">
<li class="question clearfix accordion" id="accordionExample show">
<span class="frequent-icon">Q</span>
<h4 class="frequent-text">I am a non-tech can I still learn Blockchain?</h4>
</li>
</div>
<div class="aa">
<li class="answer clearfix" id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample hide"><span class="frequent-icon">A</span> <span class="frequent-text">Yes, for the fundamentals of blockchain, any graduate having passion to learn this technology can take the program.</span></li>
</div>
</ul>
</div>
</body>
</html>
<script>
$("h4.frequent-text").on('click', function() {
$(this).next(".aa").slideToggle('slow');
});
$(document).ready(function() {
$(".aa").children("li").hide();
})
</script>
You have an invalid html. You shouldn't put <div> inside the <ul> and on top of the tags of <li>.
And I edited your jquery code a bit.
$(document).ready(function() {
$(".frequent-text").hide();
$(".frequent-icon").on('click', function() {
$(this).next(".frequent-text").slideToggle('slow');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>FAQ</title>
</head>
<body>
<div class="faq">
<ul class="frequent-ul list-unstyled">
<li class="question clearfix accordion" id="accordionExample show">
<span class="frequent-icon">Q</span>
<h4 class="frequent-text">I am a non-tech can I still learn Blockchain?</h4>
</li>
<li class="answer clearfix" id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample hide">
<span class="frequent-icon">A</span>
<span class="frequent-text">Yes, for the fundamentals of blockchain, any graduate having passion to learn this technology can take the program.</span>
</li>
</ul>
</div>
</body>
</html>
I have a question in regards to creating a grid in HTML, CSS and Javascript which can be sorted from highest to lowest and vice versa. You should also be able to filter.
Right now i am doing a grid using bootstrap. When googling i can see that many use unordered lists ul in order to do so. My question is, can you make a grid which is actually a ul?
This is the code i have made to begin with:
<body>
<div class="container-fluid">
<div class="filter">
<h1>Boliger</h1>
<button>Pris, Faldende</button>
<button>Pris, Stigende</button>
</div>
<div class="properties">
<ul>
<div class="row">
<li>
<div class="col-sm-6">
<div class="property" data-id="01">
<img
class="property__image image-fluid"
src="assets/01.jpg"
alt=""
/>
<h2 class="property__title">Lige ud til vejen</h2>
<p class="property__address">
Dommervænget 6a, 2. th, 4000 Roskilde
</p>
<ul class="property__info">
<li class="property__price">1.000.000,-</li>
<li class="property__type">Villa</li>
<li class="property__rooms">4 Rum</li>
<li class="property__size">120 m2</li>
</ul>
</div>
</div>
</li>
<li><div class="col-sm-6">
<div class="property" data-id="02">
<img class="property__image" src="assets/02.jpg" alt="" />
<h2 class="property__title">Rustikt og lækkert</h2>
<p class="property__address">
Enghavevej 8, 1. th, 1674 København V
</p>
<ul class="property__info">
<li class="property__price">2.500.000,-</li>
<li class="property__type">Ejerlejlighed</li>
<li class="property__rooms">2 Rum</li>
<li class="property__size">80 m2</li>
</ul>
</div>
</div>
</li>
Try this out, if you want to see it with snippet for sure, make full screen as you were setting .col-sm-6
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="filter">
<h1>Boliger</h1>
<button>Pris, Faldende</button>
<button>Pris, Stigende</button>
</div>
<div class="properties">
<ul class="row">
<li class="col-sm-6">
<div class="property" data-id="01">
<img
class="property__image image-fluid"
src="assets/01.jpg"
alt=""
/>
<h2 class="property__title">Lige ud til vejen</h2>
<p class="property__address">
Dommervænget 6a, 2. th, 4000 Roskilde
</p>
<ul class="property__info">
<li class="property__price">1.000.000,-</li>
<li class="property__type">Villa</li>
<li class="property__rooms">4 Rum</li>
<li class="property__size">120 m2</li>
</ul>
</div>
</li>
<li class="col-sm-6">
<div class="property" data-id="02">
<img class="property__image" src="assets/02.jpg" alt="" />
<h2 class="property__title">Rustikt og lækkert</h2>
<p class="property__address">
Enghavevej 8, 1. th, 1674 København V
</p>
<ul class="property__info">
<li class="property__price">2.500.000,-</li>
<li class="property__type">Ejerlejlighed</li>
<li class="property__rooms">2 Rum</li>
<li class="property__size">80 m2</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
You can use CSS Flexbox Layout to display the grid, as its name suggests its flexible
and we can control the flow of the grid contents efficiently.
I suggest you to learn/use vue.js unless you want to code everything- sorting, then displaying the result, aquiring/updating data etc. in vanilla js. Also by browsing through these topics - css flexbox, css-grid, vue.js (generally single page app development), atleast you will gain some insight into solving the above mentioned problem.
I'm trying to build the sample application, i'm getting this error, Uncaught ReferenceError: EMBER_INSPECTOR_CONFIG is not defined, Can someone tell me how to define EMBER_INSPECTOR_CONFIG ??
This is my index.html fle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js • TodoMVC</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</script>
<script src="js/libs/jquery-1.11.1.min.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
</body>
</html>
Update December 24 2014:
The Ember Inspector has been updated. If you encounter this issue you're likely still using an old version for some reason.
This is a bug in the Ember Inspector that has been fixed here (but not yet released).
It should not affect your application, and only shows up if the Ember Inspector is active and the content script is delayed.
You can either ignore the error when it happens and wait for the next Ember Inspector version to be released (which is soon), or set window.EMBER_INSPECTOR_CONFIG = null temporarily.
I want to show a html page which is saved in a string with jquery-ui dialog. Unfortunately no dialog opens.
This is my code:
$(failedRequest.responseText).dialog();
The error message in the js console says:
Uncaught TypeError: Cannot read property 'display' of undefined
I also tried
$('<html><body><h1>A title</h1>And some text.</body></html>').dialog();
which works fine.
I assume there's something in the HTML code which causes .dialog() to fail. This is the compelente HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>EAI Configuration Web :: Status page</title>
<link href="/EAIConfig/styles/design.css" rel="stylesheet" type="text/css" media="all" />
<link href="/EAIConfig/styles/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="shortcut icon" type="image/x-icon" href="/EAIConfig/img/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/EAIConfig/img/favicon.ico" />
<script type="text/javascript">
function onChangeAutoSessionClose() {
var checked = document.getElementById('autoSessionClose').checked;
$.post("autoSessionClose.action", {autoSessionClose: checked});
};
</script>
</head>
<body id="page-home">
<div id="maincontainer">
<div id="header">
<div class="headerTop">
<div class="logo">
<img src="/EAIConfig/img/galenicaLogo.gif"
title="" />
</div>
<div id="blockMainPopup" style="float:right">
<form id="logout" name="logout" action="logout" method="post">
<a class="item" href="javascript:print()"><img
src="/EAIConfig/img/iconPrint.gif"
alt="Print Page" /> title.print</a>
login.as : ugxnbpluse
<input type="submit" id="logout_logout" name="action:logout" value=""/>
</form>
</div>
<div class="row"></div>
</div>
</div>
<div id="content">
<div class="leftcontent">
<br/>
<ul>
title.mappingDefinition
<li> title.mapping</li>
<li>
title.businessServiceDefinition</li>
<li> title.dataStoreEntity</li>
<li> title.valueConversion</li>
<li> title.conditionalValueConversion</li>
</ul>
<br/>
<ul>
title.messageTypeDefinition
<li>
title.taskMessageType</li>
<li> title.messageType</li>
<li> title.outputConfiguration</li>
<li> title.configurationHeader</li>
<li>
title.startTaskContent</li>
</ul>
<br/>
<ul>
title.administration
<li>
title.contractorDefinition
</li>
<li>
title.partnerGroupList
</li>
<li>
title.holidayCalendar
</li>
<li>
title.exportImport
</li>
<li>
title.lastChange
</li>
<li>
title.translation
</li>
</ul>
<br/>
<ul>
title.reports
<li>
title.reports.partner
</li>
</ul>
</div>
<div class="rightcontent">
<div id="pagetitle">
<h1>
title.eaiConfiguration
-
Status page
</h1>
<h2>
</h2>
</div>
<div class="row">
</div>
<br/><br/><br/>
<p style="font-size: 1.2em;font-weight: bold;margin: 1em 0px;">Internal Server Error</p>
<p>Internal Server Error</p>
<p>You can get technical details here.<br>
Please continue your visit at our home page.
</p>
</div>
</div>
</div>
</body>
</html>
Any ideas about how to get this HTML shown in a dialog?
I'm just getting started with Foundation and trying to create a title bar with a search box. I want the search box to fill all available space in the title bar. However, nothing I've tried has quite worked:
1) I tried setting a 50% width but at small screen sizes it pushed the other buttons off the top row
2) I tried to implement this solution but couldn't get it working (see commented css)
Dynamic width for input text box (HTML)
I've set up a jsfiddle here:
http://jsfiddle.net/B7nS8/1/
Thanks for your help!
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Site</title>
<meta name="description" content="Desc." />
<link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css" />
<script src="http://foundation.zurb.com/assets/js/modernizr.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<style type="text/css">
.row { max-width: 1200px; }
/* .searchParent div { overflow: hidden; }
.searchText { width: 100%; }
.searchButton { float: right; }
*/
</style>
</head>
<body>
<!-- Navigation -->
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
My Site
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<form>
<ul class="left">
<li class="has-form">
<div class="row collapse searchParent">
<div class="large-8 small-9 columns searchText">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-4 small-3 columns searchButton">
Search
</div>
</div>
</li>
</ul>
</form>
<ul class="right">
<li class="divider"></li>
<li>Login</li>
<li class="divider"></li>
<li>Register</li>
<li class="divider"></li>
</ul>
</section>
</nav>
<!-- End Top Bar -->
<div class="row">
<div class="large-12 columns">
<div class="row">
</div><!-- End Thumbnails -->
</div>
</div>
<!-- End Content -->
<!-- Footer -->
<footer class="row">
<div class="large-12 columns"><hr>
<div class="row">
<div class="large-6 columns">
<p>© Copyright no one at all. Go to town.</p>
</div>
<div class="large-6 small-12 columns">
<ul class="inline-list right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<script>
document.write('<script src=js/vendor/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<!-- End Footer -->
<script src="http://foundation.zurb.com/assets/js/jquery.js"></script>
<script src="http://foundation.zurb.com/assets/js/templates/foundation.js"></script>
</body>
</html>
You should look at foundations docs for topbar.js and form inputs, they're easy to follow and have given examples which do almost exactly what you are trying to do.
You shouldn't really need to write any css, that's what foundations is for.
I'd suggest something like this:
<nav class="top-bar" data-topbar="">
<!-- Title -->
<ul class="title-area">
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<!-- Top Bar Section -->
<div class="row">
<div class="large-12 columns">
<div class="row collapse">
<div class="small-10 columns">
<input type="text" placeholder="Search">
</div>
<div class="small-2 columns"> Go </div>
</div>
</div>
</div>
</nav>
Make sure you also remember to include a reference to topbar.js after foundation.min.js
Edit: Added an alternate approach
<nav class="top-bar" data-topbar="">
<ul class="title-area" style="width: 100%">
<li class="name has-form">
<div class="large-12 medium-12 small-11 columns">
<input type="text" placeholder="Find Stuff">
</div>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
</nav>