I've included toaster.css, toaster.js and jquery like that:
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/toaster.js"></script>
<link rel="stylesheet" type="text/css" href="QtApp/Notifications/toaster.css" />
and i am sure that the paths are correct. But when I try to call toaster.pop(..) or toaster.error(..) the respective functions are called and executed but no popup is shown. Any idea why that happens?
The js file you are referencing looks like it has a typo
<script src="Scripts/toaster.js"></script>
should be
<script src="Scripts/toastr.js"></script>
The same with your css.
When you go to the 'sources' tab in the browser dev tools are you able to navigate to the js and css files?
Related
I know, this question is asked like milion times, but I cant get it to work.
All my html,css and js files are located in same folder.
Below - my code, but I also mad jsfiddle here .
The code works fine in JSfiddle, but doesnt work on my computer, so i thought it might be something with my html head and linking to javascript file, but it seems to be right.
header of my html file :
<head>
<title>Nacionālie dārgumi</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
This is my html:
<div class="menu">
<ul class="main-menu">
<li><a class = "main_men_links" href="about.html">PAR PROJEKTU</a></li>
<li><a class = "main_men_links" href="">NACIONĀLIE DĀRGUMI</a></li>
<li><a class = "main_men_links" href="">SASNIEGUMI</a></li>
<li><a class = "main_men_links" href="">SĀKUMS</a></li>
</ul>
</div>
This is my script.js:
$(function(){
console.log('ready');
$('.main-menu li').click(function(e) {
e.preventDefault()
$that = $(this);
$that.parent().find('li').removeClass('active');
$that.addClass('active');
});
})
This is my style.css :
.active {
background: black;
}
Any help will be highly appreciated!
I think you don't have jquery library on html head section.
like this using CDN <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Try to add before your main script declaration.
This link only works if you are connected to internet, or download the file so you can use it locally.
Please check whether you have included the reference of Jquery.js in your Header part of HTML or not. As , your script file will not run if you haven't use jquery.js before the script.js load .
Header should be loading jquery.
You can try as below :
<head>
<title>Nacionalie dargumi</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
or download jquery.min.js and load it.
You're using jQuery, so you need to provide the link to the library to get your script.js work. Make sure that the CDN library and your local script.js are added in this order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="script.js"></script>
in your browser Press F12 and check the tab Sources (in Chrome) or
Debugger (in Firefox) to make sure script.js is loaded.
You must also see a 'ready' message in your browser console.
I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.
I'm trying to use an external js file to use in my pyramid project.
I found this solution but i can't seem to get it work.
The js files i want to include are in C:\env\uza\uza\static\js
project name = uza.
In my template i use this to call the script:
<script type="text/js" src="${request.static_url('uza:static/js/fabtabulous.js')}" />
<script type="text/js" src="${request.static_url('uza:static/js/tablekit.js')}" />
my init.py looks like this:
config.add_static_view('static', 'static', cache_max_age=3600)
When i navigate to the page in my browser it just gives me the pyramid sidebar in raw html code. I know it's a stupid mistake i made somewhere but i can't seem to find it. Is annyone able to help me with this.
EDIT:
I uploaded a pdf to give a better understanding of the problem i'm having.
ps: there are no errors in console.
https://dl.dropboxusercontent.com/u/6752022/problem.pdf
EDIT:
I made a new project using the sqlalchemy scaffold.
The changes I made are:
- include this line in the mytemplate.pt
<script type="text/js" src="${request.static_url('javascript:static/js/tette.js')}" />
<input type="button" onclick="popup()" value="Click Me!">
- i didn't change annything else because i don't think anny other changes need to be made in the scaffold.
my tette.js file looks like this:
function popup() {
alert("Hello World")
}
This is the output i have before including the js file. (deleted a few divs)
And this is after.
what am I doing wrong ? thanks in advance.
Can you back it out to a point to where the pyramid sidebar looks and works correctly, and isn't raw HTML?
Your init.py line looks correct. Then in your templates you can get at whatever is in the 'static' folder like so:
<link rel="stylesheet" href="${request.static_url('myproject:static/style.css')}">
<!--[if lte IE 6]>
<link rel="stylesheet" href="${request.static_url('myproject:static/ie6.css')}" type="text/css" media="screen"
charset="utf-8"/>
<![endif]-->
<script type="text/javascript"
src="${request.static_url('myproject:static/tinymce/jscripts/tiny_mce/tiny_mce.js')}"></script>
it's as Peter Tirrell says.
I didn't say the type was javascript.
I've included Jquery & Jquery mobiles latest versions.
I'm basically trying to use a mobile button to call a JavaScript function but having issues.
This works fine in chrome but not in webworks on the playbook (this is where i get the errors)
<script type="text/javascript" src="js/personSearch.js" ></script>
Including my custom JavaScript code
Within that file i have the folllowing code
function testme()
{
alert("tet");
}
I've tried all the following ways:
<input type="button" onclick="testme();" value="Button" />
<a id="psClear" href="javascript:testme();" data-role="button" data-inline="true">Clear</a>
For them all I get the error:
mainMenu.html:1ReferenceError: Can't find variable: testme
I think its something to do with the way J query Mobile renders buttons but not sure...
UPDATE
If i add rel="external" to the page before it loads in the javascript and works fine, but reloads all the scripts again, and doesnt work without rel="exnteral"
<link rel="stylesheet" type="text/css" href="css/jqueryMobileCSS.css">
<link rel="stylesheet" type="text/css" href="css/customStyle.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jqueryMobile.js"></script>
<script src="js/eBar.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/ain.js"></script>
<script src="js/tleBar.js"></script>
<script type="text/javascript" src="js/ps.js" ></script>
So without rel="external" js/ps.js doesnt seem to load...
The scripts located on both pages are the exact same but the new page has js/ps,js loaded in aswell..
Thanks
Don't use inline Javascript (read why here) to call functions. It looks like the error you're having is related to the fact that your personSearch.js file hasn't loaded and therefore the function may not exist exist. Use the Chrome/Firebug JS console to check whether the function is definitely defined and then create another script with something resembling the following inside:
$(document).bind('pageinit',function () {
$("#psClear").on('click',function(){
testme();
});
});
This will make sure that the DOM is loaded and ready before binding the click event to your button. Make sure this script is loaded after your personSearch.js script.
This is my JSP Page , where i am using the below JS Files
<link rel="stylesheet" type="text/css" href="/html/js/graph/finance.css"/>
<link rel="stylesheet" type="text/css" href="/html/js/graph/excanvas.js"/>
<script type="text/javascript" src="/html/js/graph/canvastext.js"></script>
<script type="text/javascript" src="/html/js/graph/prototype.js"></script>
<script type="text/javascript" src="/html/js/graph/scriptaculous.js"></script>
<script type="text/javascript" src="/html/js/graph/flotr.js"></script>
<script type="text/javascript" src="/html/js/graph/HumbleFinanceReal.js"></script>
<script type="text/javascript" src="/html/js/graph/canvas2image.js"></script>
The Page works fine under Mozilla , but when i run the same page under IE , it shows
A Runtime Error has Occured
Line 629
The JSP is of only 10 Lines of code .
Hw can i know where is the Error in IE ??
Have you tried F12 developers tools (just press F12)?
Right click on page and select view source, then you will be able to see 629th line.
The line number displayed in error considers all included js and dynamically
generated code so it's showing error on line 625 though your jsp is of 10 line only.
I suggest you try the IE Developer Tools (F12). This might give some more information. You could also try to remove all your JS scripts and add one at a time to see what triggers the error.