Twitter Bootstrap alert close does not work - javascript

I use Bootstrap 3.0.3 and JQuery 2.0.3
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Encoding" content="gzip" />
<meta http-equiv="Accept-Encoding" content="gzip, deflate" />
<title>#L("CONTROL_PANEL") | #ViewBag.Title</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta content="L" />
#Styles.Render("~/content/admin/css")
<link type="text/css" href="/Content/jquery.mCustomScrollbar.css" rel="stylesheet" media="all" />
#RenderSection("css", false)
</head>
<body>
<section id="container">
<header class="navbar navbar-fixed-top">
<div class="title">
<span>#L("CONTROL_PANEL")</span>
</div>
</header>
<aside class="sidebar">
<menu class="fisrt">
<li class="active">
<a href="#">
<i class="fa fa-2x fa-tachometer"></i>
#L("PANEL")
</a>
<span class="separator"></span>
</li>
</menu>
<menu class="second">
#RenderSection("second_menu", false)
</menu>
</aside>
<menu class="breadcrumb">
<li><span>Панель</span></li>
<li><span>Новости</span></li>
</menu>
<section class="main-content">
<div class="panel panel-dark">
<div class="panel-heading">
<h3 class="panel-title">#ViewBag.PanelTitle</h3>
</div>
<div class="panel-body">
<div class="content">
#{
if (this.TempData["Success"] != null)
{
<div class="alert alert-success fade in">
<a href="#" class="close close-sm" data-dismiss="alert" aria-hidden="true">
<i class="fa fa-times"></i>
</a>
<h4>
<i class="fa fa-check-circle"></i> #L("SUCCESS")
</h4>
<p>#this.TempData["Success"]</p>
</div>
}
if (this.TempData["Error"] != null)
{
<div class="alert alert-danger fade in">
<button type="button" class="close close-sm" data-dismiss="alert">
<i class="fa fa-times"></i>
</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
}
}
<div>
#RenderBody()
</div>
</div>
</div>
</div>
</section>
<footer>
Время генерации страницы #TempData["Time"]
</footer>
</section>
<!-- Scripts -->
#Scripts.Render("~/js")
<!-- the jScrollPane script -->
<script type="text/javascript" src="/scripts/jquery.mCustomScrollbar.concat.min.js"></script>
#RenderSection("js", false)
<script type="text/javascript">
(function ($) {
$(window).load(function () {
$(".content > div").mCustomScrollbar({
theme: "dark-thick",
advanced: {
autoScrollOnFocus: false,
updateOnContentResize: true
}
});
});
})(jQuery);
</script>
</body>
</html>
When I try close message, I get error
TypeError: elem.getAttribute is not a function.
elem.getAttribute( name ) : jquery-2.0.3.js (строка 1707)
Update
I don't know Why but if change Jquery from NuGet to google start work.


I don't know Why but if change Jquery from NuGet to google start work.
Google offers you the latest jQuery 1.x maybe. Before you used 2.0.3. Bootstrap only supports the 1.x release. (jQuery 2.x drops support for IE8 and Bootstrap still support this).
See also: http://getbootstrap.com/getting-started. The basic example template includes https://code.jquery.com/jquery.js which offers version 1.10.2.
https://github.com/twbs/bootstrap/blob/v3.0.3/bower.json shows you Bootstrap 3.0.3 requires >= 1.9.0

Related

Resources are not loaded in Chrome

I am using EJS to render HTML. But the same HTML thing gets loaded for one route and when tried with another route chrome shows the status of CSS files as cancelled and js files with status code 404. I am unable to get what is going wrong. It works for the '/' route but does not work for the '/admin/students' route. Please help. In the table, I am printing the data sent through route.
In '/' route I am just sending a text as a data and everything else is the same as giving the code below.
app.get('/',(req,res)=>{
res.render('layout',{data:"IT is working"});
});
app.get('/admin/students',(req,res)=>{
Student.find({},function(err,result){
if(err)
console.log(err);
else
res.render('student',{st:result});
})
})
<!DOCTYPE HTML>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/fav.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Blog Home</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700"
rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center"
id="navbarSupportedContent">
<ul class="navbar-nav">
<li>Home</li>
<li>Admin</li>
<li>User</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="banner-area" style="background: url('img/home.png')" >
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
Blog Home
</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one greater leap forward than the
building.
</p>
<div class="link-nav">
<span class="box">
Home
<i class="lnr lnr-arrow-right"></i>
Blog Home
</span>
</div>
</div>
</div>
</div>
</section>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Reg.No.</th>
<th scope="col">Name</th>
<th scope="col">Branch</th>
<th scope="col">Handle</th>
</tr>
</thead>
<body>
<% st.map(rec=>{ %>
<tr style="color:black">
<th scope="row"><%=rec._id%></th>
<td><%=rec.sname%></td>
<td><%=rec.branch%></td>
<td><form action="/students/<%=rec._id%>/edit}"></form></td>
</tr>
<% }) %>
</tbody>
</table>
<footer class="footer-area section-gap">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved |
This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

You should use absolute paths of static files instead of relative ones. Example:
<script src="js/main.js"></script>
should be:
<script src="/js/main.js"></script>
Similarly, you should fix the paths for all static files (css, js, etc.) in your EJS files.
You can read more about absolute and relative paths here.

Framework7 : Navbar hidden when I'm move to anothers views

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.

Hide sidebar for particular page in Mobile Angular Ui.(Angular Js)

I am using mobile angular ui. I want to hide side for particular page.
http://mobileangularui.com/
This side bar by default put in every page. But i don't want this side bar in home page. Mobile angular ui have one index.html file. One sidebar.html import in index file. And every page import in index file. But when come home.html file will come then sidebar should be hide.
Index.html
<html>
<head>
<meta charset="utf-8" />
<title>y</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<!-- inject:js -->
<script src="js/app.min.js"></script>
</head>
<style>
.color-winni-text
{
color:#c62222;
}
</style>
<body ng-app="Y" ng-controller="MainController">
<!-- Sidebars -->
<div ng-include="'sidebar.html'"
ui-track-as-search-param='true'
class="sidebar sidebar-left">
</div>
<div class="app">
<!-- Navbars -->
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center " ui-yield-to="title">
<a class="color-winni-text" href="#/"> <strong>Winni Celebration</strong></a>
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
<i class="fa fa-bars color-winni-text fa-2x"></i>
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn">
<i class="fa fa-sign-in color-winni-text"></i>
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a style="color:#c62222" href="#/" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Home</a>
<a style="color:#c62222" href="#/my-winni" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> My Winni</a>
<a style="color:#c62222" href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a>
</div>
</div>
<!-- App Body -->
<div class="app-body background-color-body" style="background-color:white" ui-prevent-touchmove-defaults>
<div class="app-content scrollable-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<div ui-yield-to="modals"></div>
</body>
</html>
Screen Shot of index file
App.js File.
angular.module('Y', [
'ngRoute',
'mobile-angular-ui',
'Y.controllers.Main'
])
.config(function($routeProvider) {
$routeProvider.when('/', {templateUrl:'home.html', reloadOnSearch: null})
.when('/cityPage', {templateUrl:'cityPage.html', reloadOnSearch: false})
.when('/category-prduct', {templateUrl:'category-prduct.html', reloadOnSearch: false})
.when('/product-description', {templateUrl:'product-description.html', reloadOnSearch: false})
.when('/my-winni', {templateUrl:'my-winni.html', reloadOnSearch: false})
.when('/gift-box', {templateUrl:'gift-box.html', reloadOnSearch: false});
});
I want to hide sidebar only on home.html page.

Try wrapping your <div ng-include="'sidebar.html'"> element in an ngIf directive that examines the location path.
You can inject the $location service into your MainController and expose the value of $location.path() to the template.
Example: $scope.currentPath = $location.path()
Then use:
<div ng-if="currentPath !== ''">
<div ng-include="'sidebar.html'">`
Also, use the controllerAs syntax instead of $scope.

Set image in mobile angular ui website

I am implement mobile website. I am using mobileangularui framework for mobile website. I want to set image in home.html, But i could not set image from image folder.If i put URL of image which is exist in server then it is works. I will show screen shot of code snippet.
Existing output:
home.html
<style>
.bgImage
{
background-image: url('http://www.electricshop.com/editordocs/image/OurTopGiftIdeas231215_978x400.png');
height:330px;
background-position: center center;
}
</style>
<div class="jumbtron scrollable-content">
<div class="bgImage">
</div>
<img src="../images/clocks.jpg">
<img src="http://1.bp.blogspot.com/-NFIfiFmg8SA/Ti0xrNqB4OI/AAAAAAAADno/fB_2wYQBiv4/s1600/silence-between-two-people.jpg">
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>y</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<script src="http://localhost:8001/target/target-script-min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.min.js"></script>
</head>
<style>
.color-winni-text
{
color:#c62222;
}
</style>
<body ng-app="Y" ng-controller="MainController">
<!-- Sidebars -->
<div ng-include="'sidebar.html'"
ui-track-as-search-param='true'
class="sidebar sidebar-left"></div>
<div class="app">
<!-- Navbars -->
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center color-winni-text" ui-yield-to="title">
<strong>Winni Celebration</strong>
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
<i class="fa fa-bars color-winni-text fa-2x"></i>
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn">
<i class="fa fa-comment color-winni-text"></i>
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<i class="fa fa-home fa-navbar"></i> Docs
<i class="fa fa-github fa-navbar"></i> Sources
<i class="fa fa-exclamation-circle fa-navbar"></i> Issues
</div>
</div>
<!-- App Body -->
<div class="app-body background-color-body">
<div class="app-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<div ui-yield-to="modals"></div>
</body>
</html>
When i give
<img src="../images.clocks.jpg">
then it is not works, But i give image url which is exist in server then it is works.
Directory Screen Shot:
Please give me some idea.

Textarea doesn't get updated when I click generate

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);;

Categories

Resources