Ember.js index not working - javascript

I am attempting to create an Ember.js SPA within an ASP.NET MVC5 application. I am using the sample project provided at the weblink below. In it, I have created a new index.cshtml along with application.js and routes.js file. However, the handlebars template is not executing. Below is my code. Does anyone know why this is not working?
All I want is for the menu with the About text to display and for me to click on the About link and see the text "About this app....". Currently, All I see is the text "Test About", so I am inclined to believe that the implementation is done correctly.
https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
EfaAppTabs.cshtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<h1>Test About</h1>
<script type="text/x-handlebars" data-template-name="EfaEmberApp-1.0.0">
<div class="container">
<div class="page-header">
<h1>Movies</h1>
</div>
<div class="well">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<ul class="nav nav-tabs">
<li>{{#linkTo 'about'}}About{{/linkTo}} </li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
{{outlet}}
</div>
</div>
</div>
<div class="container">
<p>©2018 EFA</p>
</div>
</script>
<script type="text/x-handlebars" data-template-name="about">
<div class="container"></div>
<h3>About this app...</h3>
</script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jquery-ui")
#Scripts.Render("~/bundles/ember")
#Scripts.Render("~/bundles/Efa")
</body>
</html>
EfaEmberApp-1.0.0.js
window.App = Ember.Application.create();
EfaEmberRoutes-1.0.0.js
// Routes
App.Router.map(function () {
this.route('about');
});

Related

Can't implement Jquery Scrollify on my website [duplicate]

This question already has answers here:
Where do you include the jQuery library from? Google JSAPI? CDN?
(16 answers)
Closed 4 years ago.
I am trying to set up JQuery Scrollify on my website to get a smooth scroll from one section to the others but cannot make it work! I tried different ways and think I might just be missing something? I think I might not be implementing the script correctly or not giving the sections good class name..Or maybe because I am using Bootstrap??
Need help here!! Thank you so much!
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<link href="css/magicledger.css" rel="stylesheet" type="text/css">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script>
$(function() {
$(".section").css({"height":$(window).height()});
$.scrollify({
section:".section"
});
$(".scroll").click(function(e) {
e.preventDefault();
$.scrollify("move",$(this).attr("href"));
});
});
</script>
</head>
<body>
<section class="section section1">
<header class="jumbotron vertical-center">
<div class="container">
<h1>...</h1>
<h3>...</h3>
<script type="text/javascript">
window.Maitre = { uuid: "MF301766dea0" };
</script>
<script data-maitre src='https://maitreapp.co/widget.js' async></script>
</div>
</header>
</section>
<div class="container-fluid">
<section class="section section2">
<div class="row"> <!------- Row 1 ----->
<div class="col-md-6">
<div class="inside-row">
<img src="icons/animat-bezier-color-2.gif" alt="icon1">
</div>
</div>
<div class="col-md-6">
<div class="inside-row">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
</section>
<section class="section section3">
<div class="row"> <!-- Row 2 -------->
<div class="col-md-6">
<div class="inside-row">
<img src="icons/animat-layers-color-2.gif" alt="icon2">
</div>
</div>
<div class="col-md-6">
<div class="inside-row">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
</section>
<section class="section section3">
<div class="row"> <!-- Row 3 ---------->
<div class="col-md-6">
<div class="inside-row">
<img src="icons/animat-network-color-2.gif" alt="icon3">
</div>
</div>
<div class="col-md-6">
<div class="inside-row">
<h3>...</h3>
<p>...</p>
</div>
</div>
</div>
</section>
</div> <!-- ENd of container fluid ------>
and my javascript extrernal sheet:
jQuery(document).ready(function($) {
$.scrollify({
section : ".section-class-name",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {}
});
Where are you including your .js files? You are probably running your javascript in the head section for your page before you are loading jquery and scrollify.
Load all of your .js files in the head before you run any of your javascript on the page or move your javscript into your .js file.
You might need to add <script src="script/jquery-2.2.1.min.js"></script> inside your HTML body element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.js">< /script>
Paste this right under the <head> tag

Added Polymer auto-binding template, javascript stopped working

So I layed out my entire site with HTML and CSS. I then did some javascript, namely to handle some tab switching. Everything was working great. When I went to wire up the data, rather than putting my entire site in a polymer element, I put an auto-binding template around the bulk of the HTML then just used smaller elements within. The data is all working great, but now that javascript stopped working.
When you look at the DOM it looks a bit off, I'm not very familiar with how the shadow-dom works, so I don't know if this is right, but within #document-fragment I see an exact duplicate of everything I see after #document-fragment (ie "top", "middle", "tabs", etc)
Here is the relevant javascript and the full HTML:
$('.tab').on('click', function() {
$('.tab').removeClass('selected');
$('.content').hide();
$(this).addClass('selected');
var t = $(this).html();
$('.' + t).show();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<link rel="import" href="elements/air-appName.html">
<link rel="import" href="elements/air-appPropertyList.html">
</head>
<body>
<div id="main">
<template is="auto-binding">
<core-ajax auto handleAs="json" url="app.json" response="{{app}}"></core-ajax>
<div id="top">
<img id="imgLogo" src="images/app_AIR.png">
<div id="itemHeader">
<img id="imgDataQuality" src="images/DataQuality0.png">
<air-appName id="lblTitle" name="{{app.name}}">Loading</air-appName>
</div>
</div>
<div id="middle">
<div id="left">
<input id="txtSearch" type="text">
<img id="btnSearch" src="images/btnSearch.gif">
<air-appPropertyList id="appProperties" props="{{app.props}}"></air-appPropertyList>
</div>
<div id="right">
<div id="tabContent">
<!--TODO: Tabs need to be more dynamic-->
<div id="tabs">
<span class="tab">General</span>
<span class="tab">Technical</span>
<span class="tab">Contacts</span>
<span class="tab">Links</span>
<span class="tab">Desktop</span>
</div>
<div class="content General">
This is the general tab
</div>
<div class="content Technical">
<table-servers serversUrl="{{app.associatedServers}}"></table-servers>
</div>
<div class="content Contacts">
This is the Contacts tab
</div>
<div class="content Links">
This is the links tab
</div>
<div class="content Desktop">
This is the desktop tab
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="itemFooter">
</div>
</div>
</template>
</div>
<script src="scripts/vendor/jquery-1.11.1.min.js"></script>
<script src="scripts/vars.js"></script>
<script src="scripts/functions.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/ready.js"></script>
</body>
</html>

How to put button on header in AngularJS

I have a header area before my ui-view. I don't want to include my header in every template file. How can I use a directive or something to get a button on top of the page?
The button depends on the pages.
Here some examples:
My main index.html
<!DOCTYPE html>
<html ng-app="smarthome">
<head>
<script type="text/javascript" src="/lib/ionic/js/angular/angular.min.js"></script>
<script type="text/javascript" src="/lib/ionic/js/angular-ui/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<section id="content">
<div class="page-header row">
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
Why don't you link a controller to the header and use ng-show in the top div of the header?
Like this:
<body>
<section id="content" ng-controller="headerCtrl">
<div class="page-header row" ng-show="isVisible()>
<div class="col-sm-4">
<a href="" ng-show="isBack()" ng-click="goBack()">
<i class="ion ion-arrow-left-c"></i>
</a>
</div>
<div class="col-sm-4">
<h1>blabla</h1>
</div>
<div class="col-sm-4">
<!-- BUTTON HERE -->
</div>
</div>
<div ui-view></div>
</section>
</body>
</html>
I had a similar requirement. You could add the button function in ng-click by adding the function
angular.module('app', ['LocalStorageModule'])
.run(['$rootScope', function ($rootScope) {
$rootScope.yourFunction = function () {
console.log("clicked here");
}
}]);

jQuery AJAX reloading data into a DOM or refreshing the DOM with new data

I have a piece of code using jQuery to load content from an internal webpage onto a new page DOM after the user has selected a button from another page. The problem I got is no matter what option button I click the same result shows in the DOM. I was told to change the Var to .live but it hasn't made any difference. I cant really explain it more apart from some one looking at my code. What is the best way to deal with this?
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="../jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="../jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Options</li>
<li>results</li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="options">
<div data-role="header">
<h1>Options</h1>
</div>
<div data-role="content">
<div id="page-wrap">
<div id="header">
<h1>Call a webpage in a DOM</h1>
</div>
<div id="load-div" class="functions">
<span>Value 1</span>
<input type="submit" value="300GB" id="load" />
<div id="load-div" class="functions">
<span>Value 2</span>
<input type="submit" value="500Gb" id="load2" />
</div>
results
</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</div>
<div data-role="page" id="results">
<div data-role="header">
<h1>Results</h1>
</div>
<div data-role="content">
<div id="result" class="functions">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load.html";
$("#load").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
// load() functions
var loadUrl = "load2.html";
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(loadUrl);
});
</script>
Options
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Basically you overwrite every script you have here. Don't use loadUrl.
For #load:
$("#load").live("click",function(){
$('#result').html(ajax_load).load('load.html');
});
And for #load2:
$("#load_2").live("click",function(){
$("#result").html(ajax_load).load(`load2.html`);
});
Separate script tags are not independent. The code in one can interact with the code in another.
You have declared var ajax_load and loadUrl in both blocks. The ones in the second block overwrite those in the first. Either give them different names, or eliminate them and put the string values directly in your function.

AngularJs ui.bootstrap issues - collapse not working

I am trying to make ui.bootstrap module work in Angularjs application.
Here is the code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="uiApp" ng-controller="uiController">
<a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
Toggle Panel
</a>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" ng-click="isCollapsed = !isCollapsed">
Click here to collapse: {{isCollapsed}}
</a>
</h4>
</div>
<div collapse={{isCollapsed}}>
<div class="panel-body"> This Section should collapse
</div>
</div>
</div>
<pre><code>{{ isCollapsed }}</code></pre>
</div>
</body>
</html>
app.js
angular.module('uiApp', ['ngRoute', 'ui.bootstrap', 'ngAnimate'])
.controller('uiController', function($scope) {
$scope.isCollapsed = false;
});
What am I doing wrong.
I found the following question in stackoverflow,
collapse transition not working with angular's UI Bootstrap
but it did not help.
I tried in plunker - click here
It doesn't work there either.
This worked for me. I replaced
<div collapse={{isCollapsed}}>
with
<div uib-collapse="isCollapsed">

Categories