I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
Related
I am kinda new to programming, I wanted to make this example run on my php page http://jsfiddle.net/N78hs/2138/ but it just doesnot work for me
I've tried to create a .js file in (root/js) folder and call it on my php page but it didnot work for me.
here you can find head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
and here is the body
<body>
<div id="fullcalendar"></div>
</body>
thank you in advance
I think you did not connect all js and css libraries.
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="http://qtip2.com/static/javascripts/libs/jquery.fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://qtip2.com/static/stylesheets/libs/jquery.fullcalendar.css">
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
you have to include it in head part of your html. or on the bottom of the body tag.
you just need to add you file in head section
<html>
<head><title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="~/js/my.js"></script>
</head>
<body>
<div id="fullcalendar"></div>
</body>
</html>
I have created a simple website and a corresponding javascript file. When I open the site in any browser, it works fine. The script gets executed and there are no errors.
Then I tried to convert my website to a web-app using Electron. For now I didn't change anything, and added only a package.json and a main.js file, as described in Electron's getting started guide.
When opening the app, I can see my website just fine. But there is alsoan error popping up:
ReferenceError: $ is not defined
This comes from my javascript file:
$(document).ready(function() {
setInterval(doStuff, INTERVAL_MS);
});
So my question is:
Why did this code work when I run the site directly in the browser?
And why the error when I run it via Electron?
PS:
This how my index.html's head looks like. As you can see jQuery is included.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Style sheets -->
<link rel="stylesheet" href="style.css" />
<!-- External libraries -->
<script type="text/javascript" src="js/libs/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/libs/knockout-3.4.0.js"></script>
<!-- Internal scripts -->
<script type="text/javascript" src="js/globals.js"></script>
<script type="text/javascript" src="js/viewModel.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/dummyDataProvider.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
Append your index.html with the following script and make sure the path is correct for your case:
<script>
window.$ = window.jQuery = require('./js/libs/jquery-2.2.0.min.js');
</script>
I have one line of JavaScript;
alert('test');
It's included through the following HTML:
<html>
<head>
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>;
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
It fires the alert box twice. All browsers.
Why?
Is this normal?
Please!
More code is needed to be sure (always list the full example) but while using Google Chrome try placing debugger; before your alert('test'); call and you will be able to compare the call stacks from the first and second passes through the code. This should be enough information to help you figure out why.
You import the same script twice in your HTML, thus running it twice. Remove one of the two script tags and you should be groovy.
<html>
<head>
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
</body>
</html>
On a separate note - you don't need that semi-colon after the jQuery import.
Weired because it shouldn't matter how things done in Server side.
Master Page:
<head runat="server>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="PageHeadPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</head>
Content Page:
<asp:Content ContentPlaceHolderID="PageHeadPlaceHolder" Runat="Server">
<link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" />
<script src="prettyPhoto315/js/jquery.prettyPhoto.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
});
});
</script>
</asp:Content>
though client finds jquery-2.0.2.min.js it fails to execute $(document).ready...
saying '$ reference is not defined'.
I Tried:
when i move the <script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script> to the content page... everything works right.
using <script src="~/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
the script is not found at all.
same happens if i move a <link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" /> to the master page, the page does not show the specific style sheet.
when checking the output HTML, it all seem correct in the right order.
i uploaded the output HTML to http://pastebin.com/ULi228BF
please help asap. thanks.
Do it declaratively in the master page by dragging the jQuery files from Solution Explorer window to the code view of the mark-up. Then see if it works and compare the two versions of the paths.
GOT IT! OMG KNEW it is something that shouldn't matter
IrishChieftain post got me to test the pages again, and found the problem!
Apperantly the jquery.magnifier.js library i used is incompatible with jQuery 1.6+
are is breaking jQuery script for some reason overriding
therefore:
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script type="text/javascript"> $(document).ready(); </script>
wont work...
while:
<script src="jquery/jquery-1.3.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(); </script>
does!
hope someone can make use of this info.
and thanks for the help.
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>