i'm trying to implement google sign in functionality in my website using handlebars.
i want to include my script in a file and load it when the https://apis.google.com/js/api:client.js? loads because it creates an object gapi which i use in my js.
The problem is that handlebars doesn't give any help to load js files.
i tried using helpers but the problem is that gapi gets undefined in the registered helper as gapi is loaded when client library loads.
i tried doing
<script src="https://apis.google.com/js/api:client.js?onload=after_load"></script>
<script>
function after_load(){
{{helper_name gapi}}
}
</script>
but still the error persists, is there any way to load a js file in hbs? or i just have to put my code in the script tag itself?
To my mind you're confusing handlebar with something else.
Instead of doing such things try to do something like this :
load normally your api in your html.
once loaded you can call your handlebar part (for example jquery has a nice on ready function).
after the handlebar result has been processed inject it in your html.
if you need to launch another script then do it afterwards
Here is one example:
$(document).ready(function () {
var context = { "form" : "<div class='input-container'><div class='label'>User :</div><div class='input'><input type='text' id='username' name='username'></div></div><div class='input-container'><div class='label'>Password :</div><div class='input'><input type='password' id='password' name='password'></div></div>" };
var source = $("#sourceTemplate").html();
var template = Handlebars.compile(source);
var html = template(context);
$("#resultPlaceholder").html(html);
alert("Load is done place your additional scripts calls here");
});
.input-container { display: inline-block; }
.label { float: left; width: 100px;}
.input { float: left; width: 300px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://apis.google.com/js/api:client.js?onload=after_load"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
<div class="container">
{{{form}}}
</div>
</script>
<br/>
<div id="resultPlaceholder">
</div>
Related
I am trying to get syntax highlighting working but when changing the mode it doesn't work
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/monokai.js"></script>
<script="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/mode-javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<script src="scripts.js"></script>
scripts.js
var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");
html.setTheme("ace/theme/monokai");
css.setTheme("ace/theme/monokai");
js.setTheme("ace/theme/monokai");
var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
js.session.setMode(new JavaScriptMode());
You have a typo in your html <script=" also scripts for theme and modes must be inserted after ace.js
It is better to pass names to ace and let it load modes and themes by itself
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<div id="htmlEditor"><html></div>
<div id="cssEditor">.css { color: red }</div>
<div id="jsEditor">var js</div>
<style>
html, body {
height: 100%;
}
#htmlEditor, #cssEditor, #jsEditor {
height:30%
}
</style>
<script>
var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");
html.setTheme("ace/theme/monokai");
css.setTheme("ace/theme/monokai");
js.setTheme("ace/theme/monokai");
html.session.setMode("ace/mode/html");
css.session.setMode("ace/mode/css");
js.session.setMode("ace/mode/javascript");
</script>
what let me to this question is that I got 404 error when I call setMode
I traversed the code to see whats going on, Ace tries to identify where Ace library and its files are located, and it does that by looking at the script tags within the page, so if it had a lock finding the lib location, it set it as a basePath for it,
but what if Ace is bundled within a one minified main js file main.js it will fail and return 404
to solve this
if (window.ace) {
configureAce();
//....
}
function configureAce() {
// this is important in case of bundling , to have Ace knows where
// its files are located (like themes, workers and modes)
// and get them from that path
window.ace.config.set("basePath", "/resources/js/lib/ace");
}
I have a web application that is structured as the following:
Server is written in Python. It serves the client an HTML page with
about 100 different tables (grids) and matching JS files. Every grid is a DIV with JS code that initializes it:
page.html:
<script type="text/javascript" src="static/assets/js/grid_type_1.js"></script>
<script type="text/javascript" src="static/assets/js/grid_type_2.js"></script>
<script type="text/javascript" src="static/assets/js/grid_type_3.js"></script>
<div id="grid_type_1" style="width: 100%; height: 200px;"></div>
<div id="grid_type_2" style="width: 100%; height: 200px;"></div>
<div id="grid_type_3" style="width: 100%; height: 200px;"></div>
grid_type_1.js:
$(function () {
w2utils.settings['dataType'] = 'JSON'
$('#grid_type_1').w2grid({
// configuration here
});
All the JS files use the same UI framework (W2UI) but each grid is of different configuration and structure. After the page loads, each grid makes a POST request to the server and it replies with a JSON that is used to populate that grid with entries.
I'm already using Jinja2 to template the HTML files and 80% of the code in the JS files is the same, so I was thinking if it would be better to generate the JS files as well, instead of duplicating 80% of the JS grid code 100 times.
Is it a viable approach to this issue?
I wan to display a code with JavaScript then load it using jQuery load.
Here is my codes :
<div class="noti"><span name="creator">::creator::</span></div>
<script type="text/javascript"> creators=document.getElementsByName('creator'); for(i=0;i<creators.length;i++){creator=document.getElementsByName('creator')[i].innerHTML; :userstats:d=ru,o=dl,s=1,l=50::if(creator=='%name%'){document.getElementsByName('avatar')[i].innerHTML='<img src="%urlpicture%" width="40" height="43" style="background: url(http://wapkaimage.com/400207/400207380_d4c2093a7f.PNG);" width: 40; height: 43;"/>';}:: :/userstats:}</script>
Then in another url, load with this :
<div class="title">NOTIFICATION</div><div id="noti">Loading notification...</div>
<script type="text/javascript"> $('#noti').load('/popup_0.xhtml .noti',function(data){$(this).find('.noti').css({"width":"96%","margin":"auto"}); }); </script>
The problem is the result of span name creator is not displayed in the JQuery load but it displays in the 1st url.
That because the changes made by your javascript doesn't affect source/original file popup_0.xhtml, but still affected just the DOM loaded in the browser, when the load() function get the code inside the source file.
Hope this helps.
I'm creating a website that uses jQuery .load() to present content that is stored in divs on another .html page, as follows
index.html head:
<link href="css/prism.css" rel="stylesheet" />
<script type="text/javascript" src="js/prism.js"></script>
index.html:
$('#content').load('project_info.html #example', function() { $(this).fadeIn(".25s"); });
project_info.html's corresponding div:
<div id="example">
<pre><code class="language-css">p { color: red }</code></pre>
</div>
I'm trying to get the prism.js code block to display correctly, and while
<pre><code class="language-css">p { color: red }</code></pre>
works properly when I embed it in index.html, it won't seem to inherit the prism.js file, just the prism.css stylesheet. It seems the prism.js file won't manipulate the "content" div. Any ideas?
After you load the remote content onto your page, you'll need to manually apply prism to it. After some brief search, looks like prism.js provides this method:
highlightElement: function(element, async, callback) { ... }
I'm assuming can use Prism.highlightElement(document.getElementById('example')) to highlight the code inside #example.
(Also see this example: https://github.com/PrismJS/prism/blob/b551696fbdf8905d52ca67e1a9ae50a3ccfeab92/examples.js)
I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.
use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})
For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.
Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>
You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.
The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.
And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.
I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").