I have 2 files in a very simple web application
The first is a standard index.html and it looks something like the below
<body>
<div id="add-stuff"></div>
<script id="the-template" type="text/x-handlebars-template" src="some-template.erb.html"></script>
<script type="text/javascript">
var data = [];
var source = $("#the-template").html();
var template = Handlebars.compile(source);
$('#add-stuff').html(template(data));
</script>
</body>
The second is my handlebars template "some-template.erb.html" and it looks something like the below
<table>
{{#each item}}
<tr><td>{{ item.name }}</td></tr>
{{/each}
</table>
The problem with the inline javascript I have above is that when I try the ".html()" part it always returns an empty string (as I'm linking in the erb.html file).
I've found a work around that lets me achieve this if I use $.ajax to pull in the template but I'd much prefer something like the above (so I can include the template client side w/out any nested jQuery callbacks).
Is this possible? If not what can I do do improve the $.ajax based approach?
** the ajax based approach that works is shown below **
<body>
<div id="add-stuff"></div>
<script type="text/javascript">
$.ajax({
url: 'some-template.erb.html',
cache: true,
success: function (source) {
var data = [];
var template = Handlebars.compile(source);
$('#add-stuff').html(template(data));
}
});
</script>
</body>
Here is a link to the stackoverflow question that showed the $.ajax version in a bit more detail
maybe its already outdated, but I found your question today and I have a suggestion for you or people who are dealing with the same problem. It's not a perfect one, but for small templates an option if you don't want to use ajax.
What do you think about writing the template as string in a variable in an external JS-file and inlcude it via script tag?
template.js
var source = '<table>\
{{#each item}}\
<tr><td>{{ item.name }}</td></tr>\
{{/each}';
index.html
<body>
<div id="add-stuff"></div>
<script src="template.js"></script>
<script type="text/javascript">
var data = [];
var template = Handlebars.compile(source);
$('#add-stuff').html(template(data));
</script>
</body>
Related
I'm a newbie to angularJS and I'm trying to make the simple thing to work but I fail.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="main.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body ng-app="app" ng-strict-di>
<div class="test" ng-controller="testSrc">
<p> {{ blah }} </p>
<img ng-src="{{ URLImage }}"/>
<button class="btn btn-sucess" ng-click="goYahoo()">Yahoo</button>
<button class="btn btn-sucess" ng-click="goGoogle()">Google</button>
</div>
</body>
</html>
JS:
var app = angular.module("app", []);
app.controller('testSrc', ['$scope,$location', function ($scope, $location) {
"use strict";
$scope.blah = "blah blah";
$scope.URLImage = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png';
$scope.goGoogle = function () { $location.url('localhost:58164/g'); };
$scope.goYahoo = function () { $location.url('localhost:58164/y'); };
}]);
app.config(function ($routeProvider) {
"use strict";
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/g', {
templateUrl : 'http://www.google.com'
})
.when('/y', {
templateUrl : 'http://www.yahoo.com'
});
});
The code has passed all lint warnings. I use the live preview of brackets that opens up Internet explorer. I encounter 3 issues:
1) {{ blah }} does not translate into blah blah, I see {{ blah }} as if the js is ignored. same for the ng-src of the img. It is ignored and I don't see the image.
2) the 2 buttons are not colored in green as I expect it to be from the bootstrap css. I tried it in jsFiddle and did see them as green but when I tried again now, they were regular, not sure what did I do wrong.
3) Routing: I want to browse to Google/Yahoo when navigating to specific url g and y using the 2 buttons. When I open the live preview, the url is: http://127.0.0.1:58164/index.html so how can I route this correctly? http://127.0.0.1:58164/index.html/g won't work.
I'm kinda lost here, not sure if the problem is my code, the browser of the live preview though the JS didn't work also in jsFiddle...
1) You're injecting the dependencies into your controller incorrectly - you need a string for each argument of the function. It's an easy mistake to make!
app.controller('testSrc', ['$scope,$location', function ($scope, $location) { // Wrong
app.controller('testSrc', ['$scope', '$location', function ($scope, $location) { // Right
2) You've misspelled the class name in your buttons. 'sucess' should be 'success'.
<button class="btn btn-sucess" ng-click="goYahoo()">Yahoo</button>
^^^^^^
3) There's numerous things wrong with your routing:
You haven't included the ngRoute module in your HTML - it hasn't been included in the base Angular package for a long time now.
Once that's done, you need to add it as a dependency: var app = angular.module("app", ["ngRoute"]); and add an ng-view tag to your HTML.
By default, the router will use 'hashbangs' for the URL - so the URL would be something along the lines of `http://127.0.0.1:58164/index.html#/g. If this isn't acceptable for you, I'd look into HTML5 mode.
All that being said, I don't think ngRoute will help you accomplish what you're trying to do. The router is designed to route through the pages of your app, not to external sites, so trying to load HTML from another domain probably won't work.
I'd recommend running through the official Angular tutorial if you haven't already - it covers all this stuff quite well. I'd also recommend Shaping Up With Angular.js on Code School, if you would prefer something a bit more hands-on.
Have installed the angularjs and Twitter.Bootstrap packages succesfully
This is my index.html:
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<title>Amazing Todo</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
This is my app.js:
var TodoApp = angular.module("TodoApp", []).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
And, this is my list.html:
<h1>Test: {{test}}</h1>
This should work fine. However the index.html is not showing the content of list.html. I think the angularjs part is not working properly.
No idea about what am i doing wrong?
Once you have defined a module, you need to define your controllers for that module and not independently.
Thus, your controller should be rewritten as:
TodoApp.controller('ListCtrl', [ '$scope', '$location',
function ($scope, $location) {
$scope.test = "Testing";
}
]);
This should show the view in question.
I would say, that if you check errors in console (in Chrome or IE press F12) you should see:
...Failed to instantiate module TodoApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider...
The reason for this expectation is that we ask IoC to inject $routeProvider while not correctly listing dependent modules. This is the above code:
var TodoApp = angular
// here we say: we do not need any other module
.module("TodoApp", [])
// here we ask: inject $routeProvider from other module
.config(function ($routeProvider)
So to make it runing we have to include the module 'ngRoute'
var TodoApp = angular
// here we say: we need these modules to make our module working properly
.module("TodoApp", [
'ngRoute'
])
// now we can ask for the provider,
// using minification-safe syntax
.config(
[ '$routeProvider',
function ($routeProvider) {
$routeProvider.
...
}]);
And also do not forget to also reference this module scripts:
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<!-- here we have to load this module -->
<script src="Scripts/angular-route.js"></script>
What is your directory structure can you check if list.html is in the same directory as index.html, if not specify a relative path from the application root?
Since no one has posted a full correct answer to this question and it hasn't been closed yet, here is another answer.
This is your function:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
This is a bare function, which isn't of much use. You need a controller so that Angular knows what to do with {{ test }}:
<div ng-controller="someController">
<h1>{{ test }}</h1>
</div>
If you insist on keeping the function as a separate variable, you could do so and still have a controller:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
TodoApp.controller('someController', ListCtrl);
This also works.
Despite of this, your UI won't show, as there's an error in it:
var TodoApp = angular.module("TodoApp", [])
You're using $routeProvider and .when(),.otherwise(), for which you need ngRoute as a dependency:
var TodoApp = angular.module("TodoApp", ['ngRoute'])
Your app should work after that.
I was trying to include the Google Plus One button in a Meteor app for collaborative sketching and I noticed that the script tags inside templates are not executed.
<template name="gplus">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-href="{{url}}"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
console.log("Google Plus button");
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</template>
I got the button to work by moving the script to a separate JavaScript file, but I still wonder why the inline-script didn't work.
I see the script tag on the console, but the script itself doesn't run. How does Meteor do this?
Meteor just inserts the contents of the gplus template into the DOM, so of course nothing happens because there is no script execution when elements are added to the DOM.
To fix this you can create a .js file and put it in the client folder, which Meteor will automatically include and execute for you (as well as minify in production).
Here is what I do to load the Google +1 Button in my application:
1. Add the JS library between the <head> tag of your application.
<head>
<!-- Load JS Library -->
<script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script>
</head>
2. Insert the +1 Button.
<template name="myTemplate">
<div data-href="https://hackisition.com/" data-size="medium" class="g-plusone"></div>
</template>
3. Render the Button.
Template.myTemplate.rendered = function() {
return gapi.plusone.go();
};
In one file (test_ajax.php) I have a which on change loads another page (registration_form_race_type.php) with a short message via jQuery Ajax(). It works fine when "test_ajax.php" is accessed via its absolute URL which is :
http://46.20.119.207/~asuntosf/wordpress_test/wp-content/themes/test_ajax/test_ajax.php
But amazingly enough, the Ajax functionality ceases to work if the exact same page "test_ajax.php" is accessed via its WordPress address which is :
http://46.20.119.207/~asuntosf/wordpress_test/?page_id=13
I insist these both URLs point to the SAME two PHP files.
Here is the code of "test_ajax.php" :
<?php
/*
Template Name: Page Test Ajax 01
*/
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
jQuery(function () {
jQuery('#event_id_from_list').change(function() {
var event = jQuery("#event_id_from_list").val();
var data = "event_id=" + event;
jQuery.ajax({
url: 'registration_form_race_type.php',
type: 'GET',
data: data,
success: function(data){
jQuery('#div_race_type').html(data);
}
});
});
});
</script>
</head>
<body>
<select class='required' type="text" name="event_id_from_list" id="event_id_from_list" />
<option value='Paris'>Paris</option>
<option value='London'>London</option>
<option value='Rome'>Rome</option>
</select>
<div id='div_race_type' class='section'>
<?php require_once('registration_form_race_type.php'); ?>
</div>
</body>
<html>
And the code of the page called via Ajax, "registration_form_race_type.php" :
<?php if (isset($_GET['event_id'])) echo 'you selected '.$_GET['event_id']; ?>
There is nothing strange about this behavior. You are simply referring to registration_form_race_type.php in your jQuery and it does just what you are asking it to do, which is to look for registration_form_race_type.php in the current directory. registration_form_race_type.php lives inside http://46.20.119.207/~asuntosf/wordpress_test/wp-content/themes/test_ajax/ and not in http://46.20.119.207/~asuntosf/wordpress_test/.
If you would like to access registration_form_race_type.php from http://46.20.119.207/~asuntosf/wordpress_test/?page_id=13, your code needs to change to:
jQuery.ajax({
url : 'wp-content/themes/test_ajax/registration_form_race_type.php',
type : 'GET',
data : data,
success : function (data) {
jQuery('#div_race_type').html(data);
}
});
I've got a page using a Microsoft Reporting ReportViewer. The report appears to be working but the page is giving me two javascript errors, both of them "'Sys' is undefined".
Examining the html output, I can see that this page is not loading the ScriptResource.axd file. Here is the generated output from the <form runat="server">:
Normal pages:
<script src="/ScriptResource.axd?d=A7zLSiYT-QHoLdLnJ4qcSxAMYrwOyrYaDQLr4063d4z_oKYldDliKqXbyFe5lSU_BLW1XY7gevJ3qbD0cmlGqFb4n7TXEUowGbFVlAH6qW01&t=ffffffff81a772fc" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=A7zLSiYTQHoLdLnJ4qcSxAMYrwOyrYaDQLr4063d4z_oKYldDliKqXbyFe5lSU_pP3jafRTfoGWk6oNhALZysXq7AipBxlz6Hg1wbpmi5swSCq2gf8Ifthok9c1Qyjf0&t=ffffffff81a772fc" type="text/javascript"></script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWBwLqzd6VBwLe87a+BQLe87a+BQKMhJXjCwLDhbnwDQLDhc2YCALFibnGClZTK/SWwK6x3zLDgngtDRWbwIkm" />
</div>
And here the page with a reportviewer control:
<script src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&Version=9.0.30729.1&Name=Microsoft.Reporting.WebForms.Scripts.ReportViewer.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function RVClientImageToggle(shouldEnable, image1Id, image2Id)
{
var enableHover = document.getElementById(image1Id);
var disableHover = document.getElementById(image2Id);
if (enableHover == null || disableHover == null)
return;
if (shouldEnable)
{
enableHover.style.display = "";
disableHover.style.display = "none";
}
else
{
disableHover.style.display = "";
enableHover.style.display = "none";
}
}//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWGQLrm7KJCwLe87a+BQLe87a+BQKMhJXjCwLDhbnwDQLDhc2YCALFibnGCgL4rMvOCQL4rK/NCQKp9KnKBgKp9I3JBgKQitCjCALzoZ6fCQLzoYKeCQLC2pe+DgLC2vu8DgKsmc6MBgLYo/6MDgKsz4boDQLCqZGDBgL97pJQAv3u/vQHAv3u6pkPAv3u1r4GAv3ugpYJAOTw7r3aR/RClkJpkBgvgn/NGjI=" />
</div>
There you can see -- no references to the axd files
The <ScriptManager> tag produces this in either case:
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl00$smManager', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
And that's where the javascript error comes in -- referencing the Sys object
So what is it that triggers the different output from <form runat="server">?
I still have no answer, but did find a workaround on the internet here: http://forums.asp.net/p/1318006/2617880.aspx#2617880
If I jam the report viewer into a user control, and then just have the user control on the page, the form tag will render correctly.
Note, I am using master pages as well so maybe that had something to do with this. The form tag is in the master page, then I have a content page with a user control in the content section, and then the ReportViewer in the user control. That works.
What didn't work was a master page with a form tag (runat=server), and a content page with a ReportViewer in the content section. That's the case in which none of the ASP.NET AJAX scripts were included, leading to 'Sys is undefined' errors.