can you please tell me why my alert is not display .I am using bootbox.js plugin(http://bootboxjs.com/v3.x/) .but it is not display my alert as given in site ?
here is my code..
http://jsbin.com/kopalire/1/
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/8nlfxc5zh58uf9o/bootbox.min.js?m="></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="clikId">add</button>
</body>
</html>
JS CODE
$(function () {
// Code goes here
$(document).ready(function(){
$('#clikId').click(function(){
bootbox.alert('Hello alert')
})
})
});
BUT when I change bootstrap 3.2 to 2.3 it works why ? if i include this it works why ?
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You are using Bootbox v3.3.0, which is not compatible with Bootstrap 3. Take a look at the Bootbox's dependencies table: http://bootboxjs.com/#dependencies
I tried your JS Bin example with Bootbox v4.3.0 and Bootstrap v3.2.0 and it works just fine: http://jsbin.com/kopalire/3/edit
Related
I'm trying to get a simple qtip2 demo running but it wont work need help.
qtip2 is a framework that allows to create individual tooltips.
if you hover over the link a small yellow box should appear.
all files are in the same folder.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qtip.js"></script>
<script type="text/javascript" src="jquery.imagesloaded.pkg.min.js"></script>
Sample link
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
$('a[title]').qtip();
})();
</script>
Sample link
</body>
</html>
i removed unnessesary codes like the imagesloaded and replace the jQuery link you have with a CDN version.
And it works.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script type="text/javascript" src="jquery.qtip.js"></script>
Sample link
<script>
// self executing function here
(function() { $('a[title]').qtip(); })(); </script>
Sample link
</body>
</html>
I have used mobile.js. In my apps using phonegap for developing app
Please check my code
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="cordova.js"></script>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//some js code here
}
</script>
</head>
<body>
Login
</body>
</html>
login.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
alert("Hello");
</script>
</head>
<body>
Login form here..
</body>
</html>
My page fliping perfectly but When I will going index.html to login.html by clicking of Login link in index.html page my JavaScript alert not working.
use
$( function() {
alert('Hello');
});
I guess this type of js script injection into HTML is not supported by Cordova. You need to do the logic in the index.js script.
Also if you wish to perform a alert you can use the apache cordova plug-in for notifications (you can get it via project config --> plugins).
I am a beginner programmer and I'm trying to make a web page that displays a JQuery Inline Date and Time Picker. As I was researching, I found this documentation: DateTimePicker. I followed the steps of first importing the JS and CSS files (after the closing body tag) using these tags:
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
Following those tags, I called on my <input> from my Home.html file with the id of datetimepicker. Then using that id, I copied the code from the tutorial that creates the Inline DateTime Picker Calendar, like so:
$('#datetimepicker').datetimepicker({
inline:true
});
So my Home.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Home</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h3>Inline DateTimePicker</h3>
<input type="text" id="datetimepicker"/><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
</body>
<!-- CALLS JQUERY LIBRARY FOR DATE AND TIME PICKER -->
<!-- this should go after your </body> -->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.js"></script>
<script src="./jquery.datetimepicker.js"></script>
<script>
$('#datetimepicker').datetimepicker({
inline:true
});
</script>
</html>
However, when I run this code, I get an error that says:
TypeError: 'undefined' is not a function (evaluating '$('#datetimepicker').datetimepicker({
inline:true
})')
This is what is displaying:
This is what I want to display:
How can I get an Inline calendar to display on my Home.html page?
Put
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.datetimepicker.js"></script>
between your <head></head> tags and remove
<script src="./jquery.js"></script>
I had the same sort of issue , If download the the source code from the XDSoft site
there is build folder , try using jquery.datetimepicker.full.js file from build folder .
You need to include jquery-ui.js
Do not confuse between jQuery versions. You first referenced jQuery here:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
And then you are doing it here:
<script src="./jquery.js"></script>
Please remove one. As the newer jQuery will be active and it doesn't have the plugin registered.
I was trying to add a simple dialog box to my bootstrap website but I can get that right. Something seems to go wrong with my links because when I tested the dialog box on a blank website (with no Bootstrap links) it worked perfectly. Please take a look at my code...
Keep it as simple as possible please:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="jquery-style.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
modal:true,
show: {effect:"fade",
duration:250},
hide: {effect:"fade",
duration:250}
});
});
</script>
</head>
<body>
</body>
</html>
Stefanos Ioannou, you are using 2 jquery version why you don't place latest one.
or use jQuery.noConflict(); in document ready which will may solve your problem.
The Bootstrap datepicker from Eyecom doesn't seems to work. I'm following various questions from here, for example:
Bootstrap Datepicker seems to not work
How do I implement and use eyecon's bootstrap-datepicker?
But without avail. What am I doing wrong? I click the input box and it doesn't show me the datepicker.
Here's my code:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../css/datepicker.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
</head>
<body>
<input type="text" id='datetimepicker1'>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker();
});
</script>
</body>
</html>
It should work! Any help?
Please refer to http://jsbin.com/lerojivu/1/edit
The DIV includes INPUT and SAPN element is necesaary for datepicker to be initiated.