I am trying bootstrap3 date picker but it does not show up calendar or it does not even show any javascript error when i click on textbook.
Below is my code for showing up calendar.
enter code here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Date Picker -->
<script src="js/bootstrap-datepicker.js"></script>
</head>
<body>
<input type="text" class="form-control" id="sandbox-container">
<script>
$(function() {
$('#sandbox-container input').datepicker();
});
</script>
</body>
</html>
You jquery selector is wrong and should just be $('#sandbox-container')
This should be your code (including working example):
$(function() {
$('#sandbox-container').datepicker({
//..
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<input type="text" class="form-control" id="sandbox-container">
Related
I'm trying to learn vue, but I can't get anything working, this is the 5th tutorial I've tried now and I really don't know what I am doing wrong.
When rendering the following code, it shows the template tagging not the intended content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Learning Vue.js</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" />
<p>Hello {{ name }}</p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
name: 'John'
};
}
});
</body>
</html>
Can anyone please help me understand why this isn't working, I've had this issue for the last month now and can't find a solution. I'm using Firefox on a Linux computer, I've also tried it in Opera and Brave browser with the same issue, so I suspect it is my code.
In the above code snippet you have not closed the script tag.
Code after closing the tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Learning Vue.js</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" />
<p>Hello {{ name }}</p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
name: 'John'
};
}
});
</script>
</body>
</html>
how to to wire html backspace in vue js in have try code bellow but not working, try template but dont working to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p><span v-html="backspace"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
backspace:"&larr"
}
})
</script>
</body>
</html>
You're missing semi-colon:
&larr // missing semi-colon ;
You may also use:
←
As I understood, you would like to display the left arrow HTML character "&laar;", that looks like an arrow pointing backwards.
You simple missed a semicolon (;) at the end of the HTML within your data array.
Here is the updated snipped:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p><span v-html="backspace"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
backspace:"←"
}
})
</script>
</body>
</html>
I have a few problems after having upgraded to gulp-mocha-phantomjs Version 0.8.0:
1) Error when running against remote by url:
When running my tests against a remote URL, I get the following error:
ReferenceError: Can't find variable: Mocha
at browser-shim.js:27
All required files in runner.html seem to be available and the test do work as expected in an actual browser like FF or Chrome.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.css">
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;">
<div id="charset_ascii"> !"#$%&'()*+,-./0123456789:;<=>?#ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</div>
<div id="charset_other">ÄäÆæß</div>
</div>
<script src="HTTP://localhost:7777/q/p/lj_unittest/js/core.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai-datetime.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/sinon.js"></script>
<script>
mocha.setup("bdd");
</script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/charset_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/ods.log_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/date.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:backend:ODS', function (/callback/) {
var stream = mochaPhantomJS({'reporter': 'spec'});
stream.write({path: config.URL_ROOT + '/TEST_WEB_ODS.main'});
stream.end();
return stream;
});
2) Strange warnings in some (but not all) of the runner.html based tests:
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///D:/MyDev/ljs_app/trunk/periscope/build/node_modules/gulp-mocha-phant
mjs/node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js. Domains, protocols and ports must match.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="../../../libs/mocha/mocha.css">
<link rel="stylesheet" href="../../../dist/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;"></div>
<script src="../../../dist/js/core.js"></script>
<script src="../../../libs/mocha/mocha.js"></script>
<script src="../../../libs/chai/chai.js"></script>
<script src="../../../libs/chai/chai-datetime.js"></script>
<script src="../../../libs/sinon/sinon.js"></script>
<script>
mocha.setup('bdd');
</script>
<!-- START of actual unit test scripts -->
<script src="./json.js"></script>
<script src="./moment.js"></script>
<script src="./underscore.js"></script>
<!-- END of actual unit test scripts -->
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:frontend:lib', function (/*callback*/) {
return gulp.src('test/frontend/lib/runner.html').pipe(mochaPhantomJS({'reporter': 'spec'}));
});
Any help is appreciated!
Load mocha.js first. Your own comment is correct.
Related:
ReferenceError: Can't find variable: Mocha when running test · Issue #7 · nathanboktae/mocha-phantomjs-core
I've written such code in my _Layout.cshtml:
<head>
<link href="#Url.Content("~/Content/jquery.fancybox-1.3.4.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.fancybox-1.3.4.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//alert("H");
$('#gallery a').fancybox({
});
}); // end ready
</script>
</head>
<body>
<div id="gallery" >
<a href="../../Content/Images/Slide1.JPG" rel="gallery" title="Img1!:)">
<img alt="Dog" height="170" src="../../Content/Images/Slide1_s.JPG" width="200" /></a>
<a href="../../Content/Images/Slide2.JPG" rel="gallery" title="Img2!:)">
<img alt="Cat" height="170" src="../../Content/Images/Slide2_s.JPG" width="200" /></a>
</div>
</body>
I've used above code in simple html file and it works perfectly. However, if I try to put this code in MVC 4, it does not work. Just links of images work and it shows just image without "new pop-up window". I checked a lot of times all addresses of ".js" libraries and putted "alert('Hello from .js')" to check availability from "Scripts" folder of these libraries.
What's the reason of that? How to resolve it?
I just moved "#Scripts.Render("~/bundles/jquery")" and "#RenderSection("scripts", required: false)" from to and it works perfectly!
The whole code is:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<link href="~/Icon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
I'm new to using magnific popup and I'm trying to implement query.magnific-popup.js in dreamweaver cs5. I did not change a thing in the original syntax of this file but get a syntax error in:
<meta name="selected-link" value="repo_source" data-pjax-transient />
I also placed a test image with syntax online and this simply works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Page</title>
<script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="www.youtube.com/iframe_api" type="text/javascript"></script>
<script src="www.youtube.com/iframe_api" type="text/javascript"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.magnific-popup.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/magnific-popup.css"></script>
</head>
<body>
<div id="wrapper">
<div id="topnav">
<div id="topnav-links">
<ul>
<li>Flexstay</li>
<li>Flexpack</li>
<li>Flexchoice</li>
<li>Flexclusives</li>
<li>Friends</li>
<li>Guiding | Car | Coach</li>
</ul>
</div>
<a class="popup" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" height="75" width="75"></a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup').magnificPopup({
type: 'image', closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
</body>
</html>
Can anyone help me here? Thanks in advance.