I have the following code from a html page:
<div class="bd">
<h1><%= user.fullname %></h1>
</div>
What is the <%= %> tag? Is this standard html? I never encountered it before. (user.fullname is a javascript variable)
Here is the full code of the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/styles.css">
<script language="javascript">
// We use this code for handling unexpected errors.
// Using alert, we are sure that the user get notified in a Mobile device.
// We add this code at the begining of the index.html and we use only native javascript functions.
window.onerror = function(msg, url, lineNumber) {
if (typeof(msg) === "string") {
var error = msg + "\n\nFile: " + url + "\nLine: " + lineNumber;
// Ommit cordova and 3rd party libs errors.
if (url.indexOf("cordova.js") == -1 && url.indexOf("externallib") == -1) {
window.alert(error);
}
} else {
var error = msg;
}
// This may help debugging if we use logging apps in iOs or Android.
if(typeof(console) !== "undefined" && typeof(console.log) === "function") {
console.log(error);
}
// Let default error handler run.
return false;
};
</script>
<script src="cordova.js"></script>
<script src="childbrowser.js"></script>
<script src="webintent.js"></script>
<script src="PushNotification.js"></script>
<script src="externallib/jquery.min.js"></script>
<script src="externallib/jquery.touchSwipe.min.js"></script>
<script src="externallib/md5.js"></script>
<script src="externallib/matchMedia.js"></script>
<script src="externallib/matchMedia.addListener.js"></script>
<script src="externallib/underscore.js"></script>
<script src="externallib/backbone.js"></script>
<script src="externallib/backbone-localstorage.js"></script>
<script src="lib/mm.js"></script>
<script src="lib/mm.panels.js"></script>
<script src="lib/mm.util.js"></script>
<script src="lib/mm.lang.js"></script>
<script src="lib/mm.db.js"></script>
<script src="lib/mm.tpl.js"></script>
<script src="lib/mm.cache.js"></script>
<script src="lib/mm.settings.js"></script>
<script src="lib/mm.widgets.js"></script>
<script src="lib/mm.sync.js"></script>
<script src="lib/mm.emulator.js"></script>
<script src="lib/mm.rdebugger.js"></script>
<script src="lib/mm.fs.js"></script>
<script data-main="lib/app.js" src="externallib/require.js"></script>
<script language="javascript">
// We should wait to phonegap, if not, we get errors like:
// http://rickluna.com/wp/2012/04/solving-the-connection-to-the-server-was-unsuccessful-error-in-androidphonegap/
$(document).bind('deviceready', function() {
MM.log('Deviceready fired');
MM.deviceReady = true;
// Store the device locale for further uses.
navigator.globalization.getLocaleName(
function (locale) {
MM.lang.locale = locale.value;
MM.log("Device locale loaded: " + locale.value);
},
function () {}
);
// Disable the back button, exists the app.
document.addEventListener("backbutton", function() {
MM.panels.goBack();
}, false);
// Call deviceIsReady function in plugins.
// Plugins may not be able to listen for the deviceready event because it's possible that it was fire
// when plugins whasn't loaded, we use a timeout of 5 seconds.
setTimeout(function() {
for (var el in MM.plugins) {
var plugin = MM.plugins[el];
if (typeof(plugin.deviceIsReady) == 'function') {
plugin.deviceIsReady();
}
}
}, 5000);
MM.fs.init();
});
// This function is for handling when the app is opened using a custom URL SCHEME.
function handleOpenURL(url) {
MM._appLaunchedByURL(url);
}
</script>
<style id="mobilecssurl"></style>
</head>
<body>
<div id="add-site" style="display: none">
</div>
<div id="manage-accounts" style="display: none">
</div>
<div id="main-wrapper" style="display: none; background-color: white">
<div class="header-wrapper">
<header class="header-main">
<nav class="nav-main">
<ul class="nav">
<li class="nav-item home menu-home">
<a href="#" class="ir" id="mainmenu">
Home
</a>
</li>
</ul>
<span id="page-title"></span>
</nav>
</header>
</div>
<div id="panel-left" class="panel user-menu"></div>
<div id="panel-center" class="panel"></div>
<div id="panel-right" class="panel"></div>
</div>
<div id="app-dialog">
<div>
<div class="modalHeader">
</div>
<div class="modalContent">
</div>
<div class="modalFooter">
</div>
<div class="modalClear"></div>
</div>
</div>
<script type="text/template" id="menu_template">
<header>
<div class="media">
<div class="refresh app-ico">
<a href="#refresh">
<img width="16" height="16" src="img/reload.png" border="0">
</a>
</div>
<div class="img">
<img src="<%= MM.util.getMoodleFilePath(user.profileimageurl) %>" border="0">
</div>
<div class="bd">
<h1><%= user.fullname %></h1>
</div>
</div>
</header>
</body>
</html>
What is the <%= %> tag in html?
There is none. There are several templating engines that use <% and %> to delimit either templates or code blocks, though: Active Server Pages (ASP), JavaServer Pages (JSP), probably others. Those usually do server-side processing and replace the text in the <% ... %> with whatever should go there.
For instance, in your example
<h1><%= user.fullname %></h1>
if the user object's fullname property is "Joe Bloggs" when the resource is requested, the engine will swap that in for that token before sending the text, so what the browser actually sees is
<h1>Joe Bloggs</h1>
In your case, as you point out, the processing is happening client-side. Your <% ... %> tokens are within <script type="text/template">...</script> blocks, so the < isn't at all special. (Before DCoder pointed that out to me, I had a complex explanation here of why it worked...but then, er, DCoder pointed out that they were in script blocks, so...)
DCoder also identified that these are templates being handled by backbone.js, which reuses underscore.js's templates.
What is the <%= %> tag in html?
Like T.J. Crowder said, that is not an HTML tag, it comes from a client-side templating engine that happens to use these expressions to indicate the beginning/end of dynamically interpolated content.
How do I find out what templating engine is used? (it's not ASP or JSP)
Based on the fact that your page loads backbone.js, the template engine is most likely backbone's template engine, which is actually borrowed from underscore.js.
That's either ASP.NET or JavaScript markup that you're seeing.
That's usually a form of server side programming. It could be JSP (in Java), ASP or even PHP (with asp tags enabled). It will replace the contents (at server response time) of the <%= %> with the server side variable's value.
The statement '<%= user.fullname %>' evaluates the property 'user.fullname' and renders it as a string. The 'user' object could exist as a property on the page or could be a static class type.
Related
I want to inject javascript library inside head tag and my customized and my own code at body using GULP.
For Example:
<html>
<head>
<!-- injectJS -->
<script src="jquery.js">
<script src="d3.js">
<!-- injected -->
</head>
<body>
<!-- injectJS -->
<script src="index.js">
<!-- injected -->
</body>
</html>
I've been using gulp-template to do exactly this. Your index.html would then have to be adjusted. e.g.:
<% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>" inline></script>
<% }); %>
In this example your gulpfile task would look something like:
gulp.task('index', () =>
gulp.src('src/index.html')
.pipe(template({scripts: ['script.js', 'another-one.js']}))
.pipe(gulp.dest('dist'))
);
Another way to achieve this would be using gulp-inject. I prefer gulp-template though.
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>
I am trying to load templates from a file into an HTML file using a script tag. I want to use this as a template in UnderscoreJS - but I'm not able to load the file:
//main.js
this.template = _.template($("#add-question").html());
console.log("testing");
console.log(this.template({
question: "How are you doing?",
yesOrNo: true
}))
//console output:
testing Main.ts:37
Main.ts:38
//main html file:
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<script type="text/template" id="add-question" src="client/add-new-question.html"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>
</html>
// client/add-new-question.html
<form id="testForm">
<span>"<% question %></span>
<input id="questionInput" type="text">
<span>"<% yesOrNo %></span>
<input id="typeInput" type="checkbox">
</form>
Update:
Here's the updated HTML in in which I've tried loading the html though a script tag in the body. Still doesn't work. This is how its expected to be done when rendering the template with UnderscoreJS. I want to be able to load the template with requireJS but render it using the underscoreJS template function.
<body>
<script type="text/template" id="add-question">
<form id="testForm">
<span>"<%= question %></span>
<input id="questionInput" type="text">
<span>"<%= yesOrNo %></span>
<input id="typeInput" type="checkbox">
</form>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>
You have to use <%= to output variables instead of <%.
It looks like you are using requirejs.
So you could also use the tpl extension and store your underscore template in .tpl files:
https://github.com/ZeeAgency/requirejs-tpl
define(['tpl!client/add-new-question.html'], function(tpl) {
console.log(tpl({
question: "How are you doing?",
yesOrNo: true
}));
});
Links:
How to use underscore.js as a template engine?
and underscore.js
Sorry for my English, I am a new to jquery mobile and only have basic knowledge about javascript languages in general; I was playing around with a single page website mobile ( I usually use Dreamweaver CS6) and I reached a good result with photoswipe and everything was good since I had just few images. I have added a lot of them so now I would get the images' link dynamically.
In short, I want to start from a folder on my ftp and read all images file within it and create the <li> items for each one. Can I make this job with jquery mobile or should I use a language like php or .Net
I have read some examples around here and on google but they didn't help me a lot, like this one, I am sure it could be an answer for me in it but I don't know how to start
http://docs.phonegap.com/en/2.4.0/cordova_file_file.md.html#DirectoryReader
Here some code I'm using:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!-- Librerie PhotoSwipe -->
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/photoswipe.css">
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/styles.css">
<script type="text/javascript" src="../PhotoSwipe/klass.min.js"></script>
<script type="text/javascript" src="../PhotoSwipe/code.photoswipe-3.0.5.min.js"></script>
<!-- End PhotoSwipe -->
<script type="text/javascript">
$(document).ready(function(){ var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false, captionAndToolbarAutoHideDelay: 0 }); });
</script>
Then my page
<div data-role="page" id="page">
<div data-role="header">
<h1>Title of my Page</h1>
</div>
<div data-role="content">
<ul id="Gallery" class="gallery">
<li>
<a href="../Images/img04.jpg">
<img src="../Images/img04.jpg" alt=""></a>
</li>
</ul>
</div>
When i land on this page everything works fine. Shall I use something like this?
That I took from this website, can I use JSON to accede to my ftp folder and than cycle the content?
Should I put this in a function? If yes who is going to call it?
$("#Photos").live("pagebeforeshow", function(){
$("ul#PhotoList").children().remove('li');
var tag = MyTag
$.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&client_id=####",
function(data){
$.each(data.data, function(i,item){
$("ul#PhotoList").append('<li><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /></li>');
});
});
var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
});
Any help is appriciated, thank you in advance, I am sure my issue here is my limited knowledge.
You should use pageinit and pagebeforeshow Instead of $(document).ready. Also .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). http://api.jquery.com/live/
Append list Items:
$("#PhotoList").append('<li><a href="..
When you finish refresh the list to display your new list:
$('#PhotoList').listview('refresh');
Update:
I use php programs on my server in order to retrieve json strings. Something like this...
xhr = new XMLHttpRequest();
xhr.open("GET","http://192.168.100.2/sr/quotelisttest?name="+s,true);
xhr.send("");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4){
alert(xhr.readyState);
alert(xhr.responseText);
var v = JSON.parse(xhr.responseText);
I am working on my first website that is on my computer and I am not planning to put it on the internet. However, I want to reuse nav and footer on other pages.
No php.
No frames.
Javascript?
Are there anyways to use HTML?
Modest will do this.
It's especially easy if you're not putting it on the internet, just put jquery and modest-preview.js in the section and you can start using it right away:
main.xhtml
<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="modest-preview.js"></script>
<include>myNav</include>
</head>
<body>
<myNav/>
</body>
</html>
myNav.xml
HTML |
CSS |
JavaScript |
jQuery
I know is a bit old but Ive found a way to achieve this.
You can load a portion of code into yout html by using ajax and leave the rest of your page without changes in order to use the same nav.
Code:
lets say I have this code in this file:
home.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="thirdParty/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#/">NAVBAR</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=" active">
Home
</li>
<li>
About
</li>
<li>
Rebout
</li>
</ul>
</div>
</nav>
<main id="main">
</main>
<script src="thirdParty/jquery-1.12.0.min.js"></script>
<script src="thirdParty/jquery.ba-hashchange.min.js"></script>
<script src="js/partialViewLoad.js"></script>
<script src="thirdParty/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
I will have two more files that will work as htmls partial views: 'partialViews/main.html' and 'partialViews/about.html'. (put some html into those files)
I use the plugin jquery.ba-hashchange.min for refreshing the html.
And at least I have the script used to load the partial views:
loadPartialView.js
$(function () {
$(window).hashchange(function () {
if (location.hash.indexOf('#/') > -1) {
loadPartial(location.hash.substr(location.hash.lastIndexOf('/') + 1));
}
});
$(window).hashchange();
});
function loadPartial(partialName) {
partialName = partialName || 'main';
$.get('/partialViews/' + partialName + '.html').done(function (html) {
$('#main').html(html);
});
}
$(document).ready(function() { loadPartial(); });
When you click on the links in the ul the hash location will change and this will trigger a jquery callback that we ve created. in that moment we load our partial views.
I recommend you to use a server and a more robust language to accomplish this. But this solution will work, is easy to implement and will work even on a server.