can't include js file in pyramid project - javascript

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.

Related

Calling javascript function from js file does not works

I have a simple javascript function on my page that works well, but I decided to move it away from index.html to a seperate js file.
The problem is that I cannot get it to execute from that seperate file.
This has been asked many many times here and the solution is always the same, but it just wont work for me. Also on google I can find lots of examples but they simply do not work for me. I tried many of them but with no luck.
So I must be missing something obvious I guess.
This is the header of my index.html
<?php session_start(); ?>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css">
<script src="gttJSFunctions.js" type="text/javascript"></script>
</head>
<body>
...
The function in gttJSFunctions.js is called Logout()
As I said it works perfect when I put it inside my index.html, but I cant get it to execute from the seperate js file
this is the entire content of gttJSFunctions.js
<script language='JavaScript'>
function Logout()
{
conf = confirm("Are you sure you want to logout?");
if (conf)
{
window.open("logout.php", "_self");
}
}
Can someone please point out what I am doing wrong.
Your external JavaScript file should contain only JavaScript. No tags.
Just remove the <script language='JavaScript'> from your file and you are good to go.
Remove <script language='JavaScript'> from your gttJSFunctions.js file because it's already a Javascript file, you don't have to specify it.
Best practice: put <script ... /> tags at the bottom of your code, just before the </body> tag. It will improve your page speed and also, as Archer told, avoid you to deal with the DOM ready common mistake.

toastr Notification not showing up

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?

Highlighting selected list item using javascript

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.

Referencing JQuery correctly

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.

Group of CSS and JS files import at HTML?

I have a group of CSS imports as like:
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
and some JavaScript code imports as like:
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
Is it possible to put all CSS import lines into a file i.e. cssImports.css and put all JS import lines into a file i.e. jsImports.js. So when I want to import that CSS and JS group files I will write something like:
<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>
so all the files listed above will be imported?
PS: I don't want to write any code belongs to web server specific.
Javascript imports: no.
CSS import: yes, but you shouldn't because it breaks parallel downloading of stylesheets.
Your best bet is to use a local build script (such as the Ant script included with the HTML5 Boilerplate) to concatenate your stylesheets and scripts before uploading them to the server, then linking to the 'master' resources in your HTML:
<link rel="stylesheet" href="/css/master.css">
<script src="/js/master.js"></script>
There is a tutorial on using the Ant script.
Go with LazyLoad! https://github.com/rgrove/lazyload/
It's a very small js (less than 1kb) that takes care of resource loading for you.
Download the package and save on your js folder. Then you would probably want to do this:
<script src="js/lazyload-min.js"></script>
Then for javascript files:
<script>
LazyLoad.js(["/js/excanvas.js", "/js/jquery.js", "/js/jquery.livesearch.js", "/js/jquery.visualize.js"], function () {
alert('all js files have been loaded');
});
</script>
Css:
<script>
LazyLoad.css(["/css/reset.css", "/css/visualize.css", "/css/datatables.css"], function () {
alert('all css files have been loaded');
});
</script>
This will also boost the performance of your page, enabling parallel css and js loading (the latter on firefox opera only).
You can Import CSS like this:
Create a new CSS cssImports.css and add there lines
#import url('/css/reset.css');
#import url('/css/visualize.css');
#import url('/css/datatables.css');
and relate it in your homepage as:
<link rel="stylesheet" href="/css/cssImports.css"/>
For Javascript import doesn't work. But you can create a single JS file and include the javascript code of each file after one another. But this is not recommended. It is better to have separate <script> tag for each js file.
for css:
<style>
#import url('/css/styles.css');
</style>
for js you could try something like
document.write("<script type='text/javascript' src='otherScript.js'></script>");
but i dont see a reason to do either of theese...
Yes just copy all the code and place in into a new file in the order than you would like it to run.
I know there are some javascript libraries that can do this for you but I dont have an experience of using them. I think Yahoo compiler/ YUI has one.
I'm not recommend do that because performance issue, but if you want the way, you can do that:
For CSS yes its possible, in cssImports.css you can put:
#import url(/css/reset.css);
#import url(/css/visualize.css);
#import url(/css/datatables.css);
But for JS, I think no way as much as CSS, but you can do this (adding JS files) from one JS file (ex jsImports.js), by write code create script element and add this element to page, like that :
var jsE = document.createElement('script');
var url = 'JS LINK HERE';
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
Do this for each link of JS that you want to put, I have and idea, using Arracy contains JS links like this:
var jsLinks = new Array(
"/js/excanvas.js",
"/js/jquery.js",
"/js/jquery.livesearch.js",
"/js/jquery.visualize.js"
);
then a loop read a link each time and put this, like :
for (i = 0; i < jsLinks.length; i++)
{
var jsE = document.createElement('script');
var url = jsLinks[i];
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
}
I didn't test my code, But I hope my idea is explained well.
Best
Edit 1: yes you can use Gatekeeper solution for JS (Very Simple), but it use "write" but "for me" I don't like that way :)
This is now possible as follows with HTML Imports which are in W3C draft
<link rel="import" href="import.html">
import.html
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
At this time only Chrome, Android and Opera support HTML Imports natively, but WebComponents provides a very mature polyfill script called webcomponents-lite.js to support all modern browsers

Categories