Hi saw that there was another post with the same title "https://stackoverflow.com/questions/27645823/referenceerror-handlebars-is-not-defined" as this but the problem does not look to be the same. I'm trying to build a single page app but I keep getting the "Uncaught ReferenceError: handlebars is not defined" error in the console. The network tab on the console looks to show that the handlebars.min.js is being loaded.
You are invoking handlebars before it is getting loaded. Move your script that compiles handlebars to body like below.
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="bower_components/materialize/bin/materialize.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="style.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<script type="text/x-handlebars-template" id="main-template">
<h1>Loaded main template</h1>
</script>
<button class="clear-screen">Click Me</button>
<nav>
<div class="nav-wrapper" id="nav-color">
Logo
<i class="mdi-navigation-menu"></i>
<ul class="side-nav" id="mobile-demo">
<li><i class="mdi-action-home left"></i>Home</li>
<li><i class="mdi-content-add left"></i>Add Card</li>
<li><i class="mdi-navigation-close left"></i>Remove Card</li>
<li><i class="mdi-action-stars left"></i>Get Premium</li>
<li><i class="mdi-action-settings left"></i>Settings</li>
</ul>
</div>
</nav>
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header" id="flybuys"><span id="flybuys-text">FlyBuys</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="airpoints"><span id="airpoints-text">Airpoints</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="onecard"><span id="airpoints-text">OneCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="summitclub"><span id="summit-text">Kathmandu Summit Club</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="clubcard"><span id="new-world-text">New World ClubCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
</ul>
<!-- Modal Trigger -->
<a id="btn-color" class="waves-effect waves-light btn modal-trigger" href="#modal1">Add More</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Get Premium</h4>
<p>To have more than 5 card you need Premium, this gives you the ability to have unlimited card! Get it now for only $1.</p>
</div>
<div class="modal-footer">
Not now
Get Premium
</div>
</div>
<div class="content">
init content
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js">
</script>
<script type="text/javascript" src="bower_components/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="bower_components/materialize/bin/materialize.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var template = handlebars.compile( $('#main-template').html() );
$(document).on('click','.clear-screen', function(){
$('.content').html( template() );
});
</script>
</body>
</html>
Related
For the html pages where the external javascript does not work, I put the js code in internally in the HTML file and it worked but what's the problem with the pages that can't do it without applying javascript in the HTML pages. The only page it works externally is in contact.html below. After that code is the sample1.html file where it does not work externally but only internally? What can I do to make it work externally? (javascript file is in the same folder)
contact.html
` <!--contact us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">Contact Us</title>
</head>
<body>
<!--header-->
<section class="header3">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Sponsor Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Contact Us</h1>
</div>
</section>
<!--inquiry box inspired from w3schools.com-->
<section class="box">
<div class="row">
<div class="box-col">
<form action="/action_page.php">
<div class="container">
<h1>Have Any Inquires?</h1>
<p>Fill out the form and our team will get back to you as soon as possible</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="inquiry"placeholder="Inquiry" name="name" required>
<p class="rq">*Required Field </p>
<input type="text" id="email2" placeholder="Email address" name="mail" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button1">Submit</button>
</div>
</form>
</div>
<div class="box-col">
<form name="form1" action="/action_page.php" onsubmit="required"()>
<div class="container">
<h1>Get A Estimated Quote</h1>
<p>This is just a estimate and our team will send a email with more detailed information</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="text" placeholder="Name" name="name3" required>
<p class="rq">*Required Field </p>
<input type="text" id="email" placeholder="Email address" name="mail3" required>
<p class="rq">*Required Field </p>
<input type="text" id="classNum" placeholder="How many different classrooms would you need" name="classrooms3" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button">Submit</button>
</div>
</form>
</div>
</div>
</section>
<!--end-->
<!-- offices(portion)-->
<section class="portion">
<h1>Our Offices</h1>
<div class="row">
<div class="portion-col">
<img src="images/city1.jpg">
<h3>Toronto Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city2.jpg">
<h3>Montreal Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city3.jpg">
<h3>Brampton Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>About Us</h1>
<br>
<br>
Learn More
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html>` </strike>
sample1.html page that doesn't work externally
<!--about us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">ClassPass An Interactive Classroom</title>
</head>
<body>
<!--header-->
<section class="header">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks" >
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Support Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Class Pass</h1>
<p>An Interactive Classroom</p>
</div>
</section>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
<script>
var icon2 = document.getElementById("icon2");
if(localStorage.getItem("theme") == null){
localStorage.setItem("theme", "light");
}
let localData = localStorage.getItem("theme");
if(localData=="light"){
icon2.src== "images/moon.png";
document.body.classList.remove("dark-mode");
}
else if(localData=="dark"){
icon2.src== "iamges/sun.png";
document.body.classList.add("dark-mode");
}
icon2.onclick = function(){
document.body.classList.toggle("dark-mode");
if(document.body.classList.contains("dark-mode")){
icon2.src="images/sun.png";
localStorage.setItem("theme","dark");
}
else{
icon2.src="images/moon.png";
localStorage.setItem("theme","light");
}
}
</script>
<!--sideblock-->
<section class="sideblock">
<div class="row">
<div class="side-col">
<h1>Our Mission</h1>
<p>Here at Class Pass we wanted to bring the classroom into the homes of students and teachers. We re-imagined the way students can interact with their classmates and teachers away from school. ClassPass is designed to offer students a wide varity of learning material through artifical intelligence based reccomended resources. At Class Pass we believe the future starts with the classroom. Important features: </p>
<div class="list">
<ul>
<br>
<li>AI Powered Resources</li>
<br>
<li>Interactive Online Community</li>
<br>
<li>Direct Communication To Teachers</li>
</ul>
</div>
</div>
<div class="side-col">
<img src="images/class1.jpg">
</div>
</div>
</section>
<!-- sub moving cards-->
<section class="sub">
<h1>Specififc features</h1>
<div class="row">
<div class="sub-col">
<img src="images/infopic1.png">
<div class="layer">
<h3>AI Powered Resources</h3>
<p>Class Pass uses the power of Artifical Intelligence to curate specialized resources to each student and teacher</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic2.jpg">
<div class="layer">
<h3>Interactive Online Community</h3>
<p>Students can communicate with their classmates and interact with cards work together</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic3.jpg">
<div class="layer">
<h3>Direct Communication To Teachers</h3>
<p>Parents and students can ask their teachers any questions anytime of the day</p>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>Interested In Our Vision?</h1>
<br>
<br>
Support Us
Contact Us
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html> </strike>
For some reason the dropdown in my navbar is not working. The dropdown button is there but it is not dropping, so there is probably something wrong in the triggering part of the dropdown. I've tried everything but I can't fix it, any help is appreciated. Here is the link to the documentation of materialize: https://materializecss.com/navbar.html
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Casual Clothing comparer</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<div class="row">
{% for post in final_products %}
<div class="col s12 m6 l4">
<div class="card horizontal hoverable z-depth-1-half">
<div class="card-image" id="card_image" style="height:300px">
<img src="{{ post.6 }}">
</div>
<div class="card-stacked">
<div class="card-content">
<span class="card-title">{{ post.0 }}</span>
<p>Initial Price €{{ post.3 }}</p>
<p>Discount {{ post.7 }}%</p>
<p style="margin-top: 10px; font-size: x-large">Price €{{ post.2 }}</p>
</div>
<div class="card-action">
Buy
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
//Initialize dropdown
$(".dropdown-trigger").dropdown();
});
</script>
</body>
</html>
The $(document) is a jQuery selector and you did not included a path for the jQuery.
I added the following line to your code and the drop-down works fine: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. You can read more about this here.
The line of code should be included before the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
The reason why your code did't worked is that Materialize CSS uses jQuery methods.
I'm learning Framework7 now, but I'm stuck in this problem. I have created two pages, this is the file
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#673ab7">
<title>Ciptaloka Editor</title>
<link rel="icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/framework7.material.min.css">
<link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="theme-teal">
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="index" class="page">
<!-- off canvas -->
<div class="panel-overlay"></div>
<div class="panel panel-left panel-cover">
a
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel" data-panel-left>
<i class="icon material-icons">menu</i>
</a>
</div>
<div class="center">
Custom T-Shirt
</div>
<div class="right">
<a class="link">
Done
</a>
</div>
</div>
</div>
<!-- Toolbar -->
<div class="toolbar toolbar-bottom tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#produk" class="link tab-link active">
<i class="icon material-icons">dashboard</i>
<span class="tabbar-label">Produk</span>
</a>
<a href="#image" class="link tab-link">
<i class="icon material-icons">add_a_photo</i>
<span class="tabbar-label">Image</span>
</a>
<a href="#text" class="link tab-link">
<i class="icon material-icons">text_fields</i>
<span class="tabbar-label">Text</span>
</a>
<a href="#clipart" class="link tab-link">
<i class="icon material-icons">photo_filter</i>
<span class="tabbar-label">Clipart</span>
</a>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
<div class="tabs">
<div class="tab active" id="produk">
Go home 2
</div>
<div class="tab" id="image">
Image
</div>
<div class="tab" id="text">
Text
</div>
<div class="tab" id="clipart">
Clipart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/framework7.min.js"></script>
<script type="text/javascript" src="assets/js/my-app.js"></script>
</body>
</html>
index2.html
<div data-page="index2" class="page">
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel">
<a href="index.html">
<i class="icon material-icons">back</i>
</a>
</a>
</div>
<div class="center">
Custom Case
</div>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
Success direct page
</div>
</div>
</div>
When I'm click 'go home 2' at index.html, its succesfully direct to index2.html, content is shown, but not with the navbar, its only shown a background, but the text is hidden. This my screenshoot :
Why this is happen? Is I miss something?
your navbar is inside your data-page
you switch to index2 and all page change.
let navbar outside -> view-main -> navbar and then the data-page
sorry my bad english.
Working on a web app i am implementing routes , i have added route CDN and when i added ngRoute as a dependency to myApp it is not working now.Before adding ngRoute viewproducts was working fine but now what i am seeing is :
{{product.name}} {{product.company}} and not the actual values.
Module CODE :
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.
when('/addproduct', {
templateUrl:'addproduct.html',
controller:'myController'
})
});
Controller CODE :
myApp.controller("myController",function($scope,$http){
$scope.insertData = function(){
$http.post("addProduct.php",{'pname': $scope.productname,'company': $scope.company,'price': $scope.price,'quantity':$scope.quantity})
.success(function(data,status,headers,config){
$scope.successMessage = "Inserted Successfuly!";
});
}
});
HTML CODE:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700, 600,500,400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="js/angular/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body ng-controller="myController">
<div class="header">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<span></span>
</div>
<div class="side-nav">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<nav>
<ul>
<li>
<a href="#">
<span><i class="fa fa-user"></i></span>
<span>Users</span>
</a>
</li>
<li>
<a href="addproduct.html">
<span><i class="fa fa-user"></i></span>
<span>Add Product</span>
</a>
</li>
<li>
<a href="viewproducts.html">
<span><i class="fa fa-envelope"></i></span>
<span>View Products</span>
</a>
</li>
<li class="active">
<a href="#">
<span><i class="fa fa-bar-chart"></i></span>
<span>Analytics</span>
</a>
</li>
<li>
<a href="#">
<span><i class="fa fa-credit-card-alt"></i></span>
<span>Payments</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="main-content">
<div class="title">
Add Product
</div>
<div class="main" ng-view>
<form style="padding:10px">
<div class="form-group">
<label for="ProductName">Product Name</label>
<input type="text" class="form-control" placeholder="Product Name" ng-model="productname">
</div>
<div class="form-group">
<label for="company">Company </label>
<input type="text" class="form-control" placeholder="company" ng-model="company">
</div>
<div class="form-group">
<label for="company">Price </label>
<input type="text" class="form-control" placeholder="price" ng-model="price">
</div>
<div class="form-group">
<label for="company">Quantity </label>
<input type="text" class="form-control" placeholder="quantity" ng-model="quantity">
</div>
<button type="submit" class="btn btn-default" ng-click="insertData()">Submit</button>
<h1>{{successMessage}}</h1>
</form>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</html>
It looks like you may be redifining your module.
Do you have the following code elsewhere in your project?
var myApp = angular.module('myApp', [...]);
If you do, the second module call with brackets would redefine the existing module. Try adding the ngRoute dependency to the first module definition and remove the brackets of the one in config. It should then look like below.
var myApp = angular.module('myApp');
The order of your scripts matters! The file where you create your angular module app:
var myApp = angular.module('myApp', ['ngRoute']);
This file should be after the angular-route file.
Fixed:
<script src="js/angular/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>
Trying to use a custom build example to generate and load code pages only when the user clicks on check boxes and submits. However the textarea does not seem to update at all.
I am attempting to get my code working like this example
http://gregfranko.com/jquery.selectBoxIt.js/customDownload.html
Here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<link href="css/docs.css" type="text/css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Enter Project Name Here</a>
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Custom Download</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<header class="jumbotron subhead" id="overview">
<h1>Customize and download</h1>
<p class="lead">Download the full repository or customize your entire <em>Enter Project Name Here</em> build by selecting only the components that you need.</p>
<div class="subnav">
<ul class="nav nav-pills">
<li>1. Choose and Generate CSS components</li>
<li>2. Choose and Generate JavaScript components</li>
<li>3. Be Happy</li>
</ul>
</div>
</header>
<hr>
<p class="well note">
<strong>Note:</strong> This example page uses the jQuery plugin, SelectBoxIt, to demonstrate how to create custom builds with Downloadbuilder.js.
</p>
<section class="custom-downloads" id="css-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Choose and Download CSS components
<small>Get just the CSS you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.css"> SelectBoxIt CSS</label>
</div>
</div>
<br />
<a class="btn" data-bind="css-downloads" id="css-generate">Generate CSS</a>
<a class="btn btn-primary download-button" id="css-download" download="jquery.selectboxit.css">Download CSS</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-css-source">// Minified source</textarea>
</section>
<section class="custom-downloads" id="javascript-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
2. Choose and Download JavaScript components
<small>Get just the JavaScript you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.core.min.js" disabled> SelectBoxIt Core</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.ariaAccessibility.min.js"> Aria Accessibility</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.destroy.min.js"> Destroy method</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.disable.min.js"> Disable method</label>
</div>
</div><!-- /row -->
<br />
<a class="btn" href="#" data-bind="javascript-downloads" id="javascript-generate">Generate JavaScript</a>
<a class="btn btn-primary download-button" id="javascript-download" download="jquery.selectboxit.js">Download JavaScript</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-javascript-source">// Minified source</textarea>
</section>
</div>
</div><!--/.fluid-container-->
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Downloads</h3>
</div>
<div class="modal-body">
<a class="btn btn-large" href="#" target="_blank" data-lang="css" download="jquery.selectboxit.css">Download CSS</a>
<a class="btn btn-large" href="#" target="_blank" data-lang="javascript">Download JavaScript</a>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tocify.min.js"></script>
<script src ="js/base64.js"></script>
<script src="js/javascripts/DownloadBuilder.js"></script>
<script>
$(function() {
$("a[href='#']").click(function(event) {
event.preventDefault();
});
$(".toggle-all").on("click", function() {
$(this).parent().parent().find('input[type="checkbox"]').not(":disabled").each(function() {
$(this).attr("checked", !$(this).attr("checked"));
});
});
var builder = new DownloadBuilder();
$("#css-generate").on("click", function() {
builder.buildURL($("#css-downloads input[type='checkbox']:checked"), "jquery.selectboxit.css", "css", function(data) {
$("#generated-css-source").text(data.content);
if(!data.content) {
$("#css-download").fadeOut("slow");
}
if(data.url) {
$("#css-download").attr("href", data.url).fadeIn("slow");
}
});
});
$("#javascript-generate").on("click", function() {
builder.buildURL($("#javascript-downloads input[type='checkbox']:checked"), "jquery.selectboxit.js", "javascript", function(data) {
$("#generated-javascript-source").text(data.content);
if(!data.content) {
$("#javascript-download").fadeOut("slow");
}
if(data.url) {
$("#javascript-download").attr("href", data.url).fadeIn("slow");
}
});
});
});
</script>
</body>
</html>
Use $("#generated-javascript-source").val(data.content);
instead of
$("#generated-javascript-source").text(data.content);
replace all .text(data.content); with .val(data.content);;