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.
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 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 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 !!
I am creating a bootstrap website, I have a problem. My left-handed sidebar will always stack ontop of my other items within the website.
This would be the main page. It is intended where the PTech is that it will be moved to the left-hand side of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="employee">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="./CSS/style.css">
<link rel="stylesheet" type="text/css" href="./CSS/bootstrap.css">
<title>Main Menu</title>
</head>
<body ng-controller="funct">
<div class="container-fluid">
<div class="row">
<div class="span12">
<h1>Employee Database</h1>
<hr />
</div>
<div class="navbar span 3">
<div class="navbar-inner span 3">
<ul class="nav nav-tabs span 3">
<li>Home</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="span2">
PTech
</div>
<ng-view> </ng-view>
</div>
<div id="footer" class="footer">
Main | About Developer
</div>
</body>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.js"></script>
<script src="./JS/index.js"></script>
<script src="./JS/bootstrap.js"></script>
</html>
My login part that goes inside of the ng-view
<div class ="well" ng-model="login">
<br />Username:
<br/><input type="text" class="span3" placeholder="username" name="username" id="username" ng-model="username">
<br />Password:
<br/><input type="password" class = "span3" placeholder="password" name="password" id="password" ng-model="password">
<br />
<input type="submit" class="btn btn-primary"value="Sign in" ng-click="signIn()"> {{message}}
</div>
Specify col-sm-4 or any other column size in child divs of the row class. Documentation can be found here: http://getbootstrap.com/css/
I'm not sure if I understood the problem right, but the rows don't seem to correspond with the spans. I also noticed span 3 in your code should probably be span3
I think each row is comprised of span12. If you want a left handed side bar, divide up the row into span3 and span9 for example, and put the left handed items in the span3 div, and the rest of the content in the span9 div
I'm not sure as to why my implementation is not working. I have followed the documentation on the foundation 4 site but can not figure out why it's not working. All that shows up are the cursor dots that change the position of the pictures in the Orbit. Also, I have the correct css/html/js folder paths.
Here's what my mark up looks like:
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title> Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation-4/css/normalize.css" />
<link rel="stylesheet" href="foundation-4/css/foundation.css" />
<script src="foundation-4/js/vendor/custom.modernizr.js"></script>
</head>
<body>
<!-- body content here -->
<nav class="top-bar">
<ul class="left">
<li class="name"><font color="white">Va</font></li>
</ul>
<ul class="right">
<li class="name"><font color="white">Home</font></li>
</ul>
</nav>
<br>
<!-- ======================== ORBIT===================== -->
<div class="orbit-container">
<ul data-orbit="" class="orbit-slides-container">
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li class="active">
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
<li>
<img src="2.jpg">
<div class="orbit-caption">IMAGE 2</div>
</li>
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li>
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
</ul>
<!-- Prev/Next Arrows -->
Prev<span></span>
Next<span></span>
<!-- Slide Numbers -->
<div class="orbit-slide-number">
<span>1</span> of <span>3</span>
</div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
</div>
</div>
<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
<!-- =======ORBIT END======= -->
<script>
document.write('<script src=foundation-4/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'foundation-4/js/vendor/zepto' : 'foundation-4/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Also, here is a screen shot of the errors I am getting in google chrome.
http://s1228.photobucket.com/user/Ebadly/media/random/ScreenShot2013-11-15at112428AM_zpsdfc35907.png.html
EDIT: THE FOUNDATION DOUMENTATION CONTAINS
<ul data-orbit="" class="orbit-slides-container">
REMOVE: ="" class="orbit-slides-container" It did the TRICK FOR ME: SO it becomes:
<ul data-orbit>
"Uncaught TypeError: Object # this is because jQuery has not loaded. Download jQuery from here http://jquery.com/download/
Link this jQuery file to your website
Even if the jQuery file is linked properly make sure it is loaded in the
<head></head> tags before loading the foundation javascript files
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title> Foundation 4</title>
<!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
<link rel="stylesheet" href="foundation-4/css/normalize.css" />
<link rel="stylesheet" href="foundation-4/css/foundation.css" />
<script src="LINKTO JQUERY JS FILE"></script>
<script src="foundation-4/js/vendor/custom.modernizr.js"></script>
</head>
EDIT:
<div class="row">
<div class="orbit-container">
<ul data-orbit="" class="orbit-slides-container">
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li class="active">
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
<li>
<img src="2.jpg">
<div class="orbit-caption">IMAGE 2</div>
</li>
<li>
<img src="3.jpg">
<div class="orbit-caption">IMAGE 3</div>
</li>
<li>
<img src="1.jpg">
<div class="orbit-caption">IMAGE 1</div>
</li>
</ul>
</div>
</div>
EDIT: TRY THIS
<div class="large-12 columns">
<div class="orbit-container">
<ul data-orbit>
<li data-orbit-slide="headline-1">
<h2>Headline 1</h2>
<h3>Subheadline</h3>
<p>Pellentesque habitant morbi tristique senectus.</p>
</li>
<li data-orbit-slide="headline-2">
<h2>Headline 2</h2>
<h3>Subheadline</h3>
<p>Pellentesque habitant morbi tristique senectus.</p>
</li>
</ul>
</div>
</div>
It's not going to work because there are AJAX calls being made to get the scripts. You're going to have to use something like USBWebServer if you're going to develop/test locally.