I am using handlebars and it is working fine in development. When I upload to github-pages, The handlebars template still works if i open directly to the page. But if I go to a page in a link, the handlebars loop doesn't work. Here is my code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../bower_components/handlebars/handlebars.min.js"></script>
</head>
<div id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
{{#each this}}
<div class=" col-md-4 col-sm-6 " data-animation-type="fadeIn" data-animation-delay="0.5s" data-animation-duration="2s">
<div class="item-wrap">
<figure class="">
<div class="popup-call">
<i class="flaticon-arrows-4"></i>
</div>
<img src="{{this.picture.picture.url}}" class="img-responsive" style="height: 200px" alt="img11"/>
<figcaption>
<div class="post-header">
<h5>{{this.name}}</h5>
</div>
</figcaption>
</figure>
</div>
</div>
{{/each}}
</script>
<script>
$(document).ready(function(){
var source = $("#some-template").html();
var template = Handlebars.compile(source);
$.getJSON('https://my-url.com/teams.json', function(data){
console.log(data);
$("#content-placeholder").html(template(data));
});
});
</script>
I've tried doing it without the document.ready() but that doesn't change anything.
It's fairly clear that the handlebars.js isn't loading, because of the relative path in the script tag:
<script src="../bower_components/handlebars/handlebars.min.js"></script>
Replace src="" with your favorite CDN location:
For example
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
I don't think Handlebars works with Github pages. At least mine does not.
Related
Help me please, i have this libs:
<title>Semantic UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
and this is the html code:
<div class="ui container">
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i>
Hello
</div>
<div class="content">
contenido 1
</div>
</div>
</div>
and js:
<script>
$('.ui.accordion').accordion();
</script>
What am I missing to work fine this element ? Am I need some scripts to add ? I have a browser console error:
TypeError: $('.ui.accordion').accordion is not a function. (In '$('.ui.accordion').accordion()', '$('.ui.accordion').accordion' is undefined)
you're script tags have the typo for the attribute src on your script tag. In your example, its spelled scr, so the page is never actually loading your libraries. So change:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
TO:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
You forgot to put accordion module.
Simple add after semantic.min.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
I am working on a very basic HTML page that has a little bit of Javascript functionalities. Nothing fancy, just some DOM manipulation. Everything was working fine and then all the scripts magically stopped working. Upon looking into firebug, it seems as though this script is working fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
These two references, however, don't seem to load up at all anymore:
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
custom.js is in the root directory and the other is in a Bootstrap folder. Everything was fine yesterday until it wasn't and I can't get it to work again.
function betterWork(this) {
if(confirm("Is this your final selection?"))
{
// document.location = '#';
$("#myModal").modal("show");
}
}
function youCantDoThat() {
alert("That isn't a Pokemon ya doof.");
}
function tooDamnBad() {
var changeText = document.getElementById("textToChange");
var newText = document.getElementById("newText");
changeText.innerHTML = "Too Damn Bad!";
newText.innerHTML = "Pick One Anyways :)";
}
.imageSize {
width: 400px;
height: 400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Project</title>
<link rel="stylesheet" href="Bootstrap/bootstrap.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="col-lg-12">
<h1 class="text-center" id="textToChange">Pick A Starter Pokemon</h1>
<h3 id="newText" class="text-center"></h3>
</div>
<div class="col-lg-12">
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//001.png" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" />
</div>
<div id="img3" onmouseover="youCantDoThat()" class="imageSize col-lg-4">
<img class="imageSize" src="http://41.media.tumblr.com/c38fff03b8dd7aaf75037eb18619da57/tumblr_n436i3Falo1sndv3bo1_1280.png" />
</div>
<div id="img4" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/010.png" />
</div>
<div id="img5" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette2.wikia.nocookie.net/camphalfbloodroleplay/images/7/77/Pikachu.png/revision/latest?cb=20141004224742" />
</div>
<br />
<div class="text-center">
<button type="button" class="btn btn-info btn-lg" onclick="tooDamnBad()">I Don't Like These Pokemon</button>
</div>
</div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</body>
</html>
Diagnosing why a script is not loading should begin with opening your console, looking at the resources tab, and determining whether and why the browser had an error loading the script.
Alternatively you can open the script from your browser directly and your webpage will notify you. For example, if your script is located at the path /Bootstrap/bootstrap.js and your host name is localhost, navigate to localhost/Bootstrap/boostrap.js.
Interpreting the results:
if the result is a 403 error it means that your webserver is not able to open this file. You will need to grant read access to your webserver.
if the result is a 404 error it means that the file is actually not at the path you specified. You will need to debug step by step and figure out why. An additional stack overflow question may resolve this if needed.
if the result is a different error, the meaning of it can be googled and you can comment and ask for additional clarification
I am trying to figure out how to use a jQuery plugin with the Kendo UI template.
I have an index.html that calls a views/home.html file. Then there is a home.js file that controls some functionality for the home.html using a model.
I am trying to use a jQuery barcode plugin. We are dynamically getting data from our service and outputting the data (although right now I am just trying to hardcode values). How would I get the jQuery plugin to work with the Kendo UI template code.
My code is below.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/home.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<!--Need to add back button and mail center buttons-->
<span data-role="view-title"></span>
<a data-role="button" data-align="right" href="views/messagecenter.html" class="nav-button"><i class="fa fa-envelope-o"></i></a>
<i class="fa fa-bars"></i>
</div>
</div>
</head>
home.html
<div data-role="view" data-layout="main" data-model="app.MemberInfo" data-title="Home" >
<div id="MemberCardHeader">
<div data-template="memberTemplate" data-bind="source: MemberInfo">
<!--Member card x-kendo-template id="memberTemplate" renders here-->
</div>
</div>
</div>
<script type="text/x-kendo-template" id="memberTemplate">
<div id="memberCard">
<!--Barcode should render here-->
<div id="Barcode"></div>
</div>
</script>
home.js
var app = app || {};
app.MemberInfo = (function (){
/*Barcode code*/
/*HOW DO I GET THIS TO WORK WITH KENDO UI CODE ABOVE*/
$("#Barcode").kendoBarcode({
value:"288288",
type:"ean8"
});
}());
you can instantiate the widget in the init event of the view:
http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/view#events-init.
I am attempting to run an method after the DOM is ready, but cannot access the element. It is coming back as undefined. The code is below. I know the element is accessible because code ran after the DOM elements processes fine. The alert in the separate js file come back undefined. The alert at the bottom of the html returns the correct value.
HTML
<%# Master Language="C#" inherits="test.master"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head runat="server">
<title>test</title>
<link rel="Stylesheet" href="css/master.css" />
<script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./javascript/master.js"></script>
<script type="text/javascript">
$(ajaxStuff('<%= varthing %>'));
</script>
</head>
<body>
<div id="wrapper">
<div id="hdr">
<div id="hdr_logo">
<img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
</div>
<div id="hdr_toolslct">
<div id="hdr_toolslct_wrpr">
<span id="hdr_toolslct_cursys"><span id="hdr_toolslct_cursys_payer" runat="server"></span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
Hello <span id="hdr_toolslct_name" class="hdr_toolslct_name" runat="server"></span>!
Thing1:
<select id="hdr_toolslct_gp" runat="server">
</select>
Thing2:
<span id="hdr_toolslct_prov_wrpr"></span>
</div>
</div>
</div>
<div id="nav" class="nav" runat="server">
<div id="nav_home" class="nav_tab">Home</div>
<div id="nav_worklist" class="nav_tab">Worklist</div>
<div id="nav_reporting" class="nav_tab">Reporting</div>
<div id="nav_splits" class="nav_tab">Splits</div>
<div id="nav_users" class="nav_tab">Users</div>
<div id="nav_import" class="nav_tab">Import</div>
</div>
<div id="cntnt">
<asp:ContentPlaceHolder id="cntnt_phldr" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="ftr">
If you experience issues with this tool, please stop using it. I'm not going to help.
</div>
</div>
<script type="text/javascript">
alert($("#ftr").html());
</script>
</body>
</html>
Javascript
function ajaxStuff(vartest) {
alert($("#ftr").html());
}
ViewSource
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>
test
</title><link rel="Stylesheet" href="css/master.css" />
<script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./javascript/master.js"></script>
<script type="text/javascript">
$(ajaxStuff('no'));
</script>
</head>
<body>
<div id="wrapper">
<div id="hdr">
<div id="hdr_logo">
<img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
</div>
<div id="hdr_toolslct">
<div id="hdr_toolslct_wrpr">
<span id="hdr_toolslct_cursys"><span id="ctl00_hdr_toolslct_cursys_payer">Mcaid</span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
Hello <span id="ctl00_hdr_toolslct_name" class="hdr_toolslct_name">Name Name</span>!
Thing1:
<select name="ctl00$hdr_toolslct_gp" id="ctl00_hdr_toolslct_gp">
<option selected="selected" value="OP1">Option 1</option>
<option value="OP2">Option 2</option>
</select>
Thing2:
<span id="hdr_toolslct_prov_wrpr"></span>
</div>
</div>
</div>
<div id="ctl00_nav" class="nav">
<div id="nav_home" class="nav_tab">Home</div>
<div id="nav_worklist" class="nav_tab">Worklist</div>
<div id="nav_reporting" class="nav_tab">Reporting</div>
<div id="nav_splits" class="nav_tab">Splits</div>
<div id="nav_users" class="nav_tab">Users</div>
<div id="nav_import" class="nav_tab">Import</div>
</div>
<div id="cntnt">
</div>
<div id="ftr">
If you experience issues with this tool, please stop using it. I'm not going to help
</div>
</div>
<script type="text/javascript">
alert($("#ftr").html());
</script>
</body>
</html>
Please bear in mind that the reason you're getting undefined is because the function ajaxStuff is being invoked immediately. If you use any of the following forms, it should work as expected. (), or (arguments) invokes the function right away:
$(ajaxStuff);
Or
$(document).ready(ajaxStuff);
Or
$(function() {
ajaxStuff('no');
});
Or
$(document).ready(function() {
ajaxStuff('no');
});
JS FIDDLE DEMO
Live demo
HTML
<div id="test">hello</div>
JS
$('document').ready(function(){
alert($('#test').html());
});
You forgot the jQuery ready event:
http://api.jquery.com/ready/
Your code might work with:
$( document ).ready(function() {
// Handler for .ready() called.
alert($("#ftr").html());
});
Or
$(function() {
// Handler for .ready() called.
alert($("#ftr").html());
});
in the JavaScript part.
Demo
UPDATE:
As this is not working, you should try to analyze the DOM that is generated:
$(function() {
// Handler for .ready() called.
console.log($("body").html());
});
Maybe there IDs are changed? Or something like that? You tell us :D
I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>