Views in play-framework 2.1 not handling javascript - javascript

I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.

Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js

May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers

Related

jQuery load file not working, blank page?

I'm trying to import the contents of a file (the file itself dosen't matter, html, php, text) - in all cases, I am unable to get any content loaded in. I've even used direct copy past off tutorials and it does not load or work?. I guess I'm missing something, or there is a version conflict maybe?.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#new").load("new.html);
});
</script>
</head>
<body>
<div id="new"></div>
</body>
</html>
This code is taken directly from jQuery website, I've only changed the file being loaded to "new.html" and yes, I have that named file in the same directoy. I've tried both referencing the source from online, and using local jquery file, tried different browsers as well.
When testing, the browser shows a blank page, it's not displaying the text?.
Any ideas what I'm doing wrong?
Thanks,
You should do this instead of JQuery
$(document).ready(function(){
$("#new").load("new.html");
});
// OR
$(function(){
$("#new").load("new.html");
)};
And I would recommend using
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
The reason this wasn't working is that JQuery is deprecated (meaning it shouldn't be used and will error most of the time) you should use $ since it is not deprecated and is the new way to do it. Also you did load("new.html) you missed a extra "

How to Assemble HTML,CSS and JS with EachOther

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

Is it possible to hide include part in view source of html

I have searched many on this forum to hide some information in view source like script include and css, I didn't find any working solution
this is what I am doing in my php script
<html>
<head><?php include('mylibrary/my_include.php');?></head>
<body>
<div></div>
</body>
</html>
in view source I am getting like this
<html>
<head>
<!-- My function -->
<script type='text/javascript' src='Library/My_fun.js'></script>
<!-- Index -->
<link type="text/css" rel="stylesheet" href="Index/Index.css" />
<link type="text/css" rel="stylesheet" href="JS/jquery-ui.css" />
</head>
<body>
<div></div>
</body>
</html>
I would like to hide js and css in view source which are in 'mylibrary/my_include.php', Is it possible to do so ? or any alternate solution displaying only following in viewsource or any other
<head><?php include('mylibrary/my_include.php');?></head>
No.
You can't give something to the browser without giving it to the user. The user controls the browser, you do not.
I would like to hide js and css in view source which are in
'mylibrary/my_include.php', Is it possible to do so ? or any alternate
solution displaying only following in viewsource or any other
No, it is impossible to render your page without these references due to the fact using these references, the web browser knows from where to download, parse and load your resources (css, js).
But:
You can obscure/compress/minify your JS & CSS files in such a way that it would be very hard for the users to identify it correctly.
UPDATE:
Per the OP request, here is how to compress resource files:
http://refresh-sf.com/yui/
This is not possible. The browser needs to see it. Thus, the user is able to see it too.
There are methods you could use like obfuscating, disabling right clicks, etc., but these only work to prevent a small number of users from viewing it.
You can not hide the source html / javascript as they are run on client. You can obfuscate at max still one would be able to get to the source.
Yo'll have to switch to some kind of compiled application, like one in C++ instead of web application if you want to avoid people reading your sources.

Windows store app - jQuery error

I'm trying to import jQuery into blank javascript app, but keep getting same error: JavaScript runtime error: 'jQuery' is undefined. I don know the reason for this.
My whole procedure:
Create new Blank app project
Add existing item jquery-1.8.2-win8-1.0 in js folder
Drag and drop added item into default.html head
Add some jquery code in default.js
and now, i'm getting this error: JavaScript runtime error: '$' is undefined.
But if I delete added jQuery code(didn't notice before) it throw's me another error:JavaScript critical error at line 4, column 1 in ms-appx://8cce31f0-7793-41f7-875e-c41dd9ade2c7/js/jquery-1.8.2-win8-1.0.js.
I'm trying to get jquery to work for last several hours, but without success.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- jquery references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
jQuery code:
$("*").on("click", function () { });
Error's:
Video:
Error - jQuery
First of all, thank you for the video - this would have been nearly impossible to solve without it.
I noticed your jQuery file was 2.0mb; this didn't look right. And then the error message took us into its contents to point out a syntax error, where we saw a slew of HTML tags — you appear to have downloaded from the GitHub viewer page, rather than from the source file itself. You should instead download the RAW file.
Please note also that this is an older version of jQuery, and not a fully-supported version. I am the primary developer behind the appendTo repo, and am excited to announce that jQuery 2.0 (pre-release builds available) should work really well on its own in a Windows Store App.
I wrote about this recently over on nettuts: Building Windows Store Applications With jQuery 2.0
Try to put:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
after:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
This error is probably because you're not include jQuery library before writting jQuery code and make sure the path to your file is correct
Try rearranging the scripts you added. Include jQuery js file before your default.js file. Something like this:
<script src="js/jquery-1.8.2-win8-1.0.js"></script>
<script src="/js/default.js"></script>
Default.js tries to use jQuery which is not yet added. So rearranging might help.

Updating vsDoc to 1.5 breaks all javascript

I'm having some difficulty with what seems to be the simplest of operations.
In visual studio, when I change vsDoc from 1.4.1 to 1.5, javascript on the page no longer works. (Visual Studio 2010)
The original (that works) is like this:
<head runat="server">
<title></title>
<link type="text/css" href="css/excite-bike/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
And everything is fine, intellisense is fine, javascript is fine. Everything is good to go.
However, when I reference the newer vsDoc file (obtained from ajax.aspnetcdn.com )
<head runat="server">
<title></title>
<link type="text/css" href="css/excite-bike/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.5-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
The page doesn't load properly and firebug shows the following errors:
class2type is not defined
rootjQuery is not defined
Both errors are apparently stemming from the vsdoc file line 67
I feel like I'm missing something terribly obvious and I hope someone can fill me in.
Thanks!
The -vsdoc is not intended to be included in your actual page, just in the files you need intellisense in. For your use, just rename:
Scripts/jquery-1.5-vsdoc.js
to
Scripts/jquery-1.5.1-vsdoc.js
and then remove that -vsdoc.js <script> block from the page. Visual studio will automatically search for the -vsdoc.js of any local JavaScript file you're including default. It need not be included in the page explicitly...that'll actually lead to issues like you're seeing, since it defines the same empty functions (and not all the needed variables).

Categories