I have build a web site and for one of my pages I have some jQuery elements [start button, progress bar]. I'm implementing a javascript timer into the page and when I place the javascript info into the header, the jQuery no longer works. How do I avoid this problem? Thanks
jQuery Works/Javascript Doesn't Work
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="{% static 'livestream/jquery- timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<html>
<head>
<style>
.progressInfo {
margin-left: leftmargin;
}
</style>
<meta charset="utf-8" />
<title>Main</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />
jQuery Doesn't Work/Javascript Works
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<html>
<head>
<style>
.progressInfo {
margin-left: leftmargin;
}
</style>
<meta charset="utf-8" />
<title>Main</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />
First I'd get your basic <html> in order. I try to always use something like...
<!DOCTYPE html>
<html>
<head>
<meta>
<title>
<script></script>
<link>
</head>
<body>
</body>
</html>
Then, load jQuery and then any jQuery scripts (don't forget to use minifed versions). Make sure you are loading only one version of jQuery and if a script you are using does not comply with the version you are currently running then upgrade jQuery or the script (whichever is older.) As #Antti Happala mentioned, multiple instances of jQuery will surely cause issues.
The other thing I do while in development is use local versions of .js and .css files until I know everything is working properly then I transition to hosted versions, retest then go live.
So, I would try something like (from your first example)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Main</title>
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.timer.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/newCustomCSSFileForYourSpecificCSS.css" />
</head>
<body>
<!-- Your good stuff here -->
</body>
</html>
http://html5boilerplate.com/ is a good place to look for examples
All of the .js files would be downloaded into a local js folder and all of the .css files would be kept locally in a css folder (again, you can change to hosted version when going live.) Make sure you only reference any .js or .css file once and combine and minify when/where possible.
Finally, make sure your .js files all work off of the same version of jQuery. If that does not work start checking firebug/chrome dev tools, etc for errors.
You are loading 2 jqueries on the same page, and possibly different versions, so surely things will go silly; also the script tags should be in head and certainly not before the <!DOCTYPE>
Related
I am not sure if it is possible or not.
I have a bunch of javascript files, all are dependent on each other.
I want to bundle all of them but I can't add require and module.exports in every file since they are so many files.
So my question is, can I bundle all these files while keeping the dependencies intact.
This is how my HTML looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
<meta http-equiv="Expires" content="3600">
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3D BAT</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/w2ui-1.5.rc1.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/jspanel.css" rel="stylesheet" type="text/css">
<script src="js/lib/three.js"></script>
<script src="js/lib/controls/MapControls.js"></script>
<script type="text/javascript" src="js/lib/renderer/CSS2DRenderer.js"></script>
<script src="js/lib/jquery-2.2.4.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/raphael.js"></script>
<script src="js/lib/Toast.js"></script>
<script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/WebGL.js"></script>
<link href="css/main.css" rel="stylesheet">
<link href="css/label_tool.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="wrapper">
<div id="label-tool-wrapper"></div>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/SceneUtils.js"></script>
<script src="js/lib/PCDLoader.js"></script>
<script src="js/lib/OBJLoader.js"></script>
<script src="js/lib/controls/OrbitControls.js"></script>
<script src="js/lib/controls/TransformControls.js"></script>
<script src='js/lib/controls/PointerLockControls.js'></script>
<script src='js/lib/controls/KeyboardState.js'></script>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/Detector.js"></script>
<script src="js/lib/stats.min.js"></script>
<script src='js/lib/dat.gui.js'></script>
<script src='js/lib/Projector.js'></script>
<script type="text/javascript" src="node_modules/jszip/dist/jszip.js"></script>
<script type="text/javascript" src="node_modules/file-saver/dist/FileSaver.js"></script>
<script src="js/lib/html2canvas.js?ver=1.0"></script>
<script src="js/lib/base64-binary.js?ver=1.0"></script>
<script src="js/util/math.js?ver=1.0"></script>
<script src='js/util/classesBoundingBox.js?ver=1.0'></script>
<script src='js/util/boundingbox.js?ver=1.0'></script>
<script src='js/base_label_tool.js?ver=1.0'></script>
<script src='js/pcd_label_tool.js?ver=1.0'></script>
<script src="js/image_label_tool.js?ver=1.0"></script>
<script src='js/util/ajax_wrapper.js?ver=1.0'></script>
<script src='js/lib/w2ui-1.5.rc1.min.js?ver=1.0'></script>
<script src="node_modules/dragscroll/dragscroll.js"></script>
</div>
<div class="frame-selector">
<div class="current">1/900</div>
<div class="list-wrapper">
<div class="frame-selector__frames"></div>
</div>
</div>
<img id="left-btn" src="assets/textures/left.png" onClick="labelTool.previousFrame()" alt="left"/>
<img id="right-btn" src="assets/textures/right.png" onClick="labelTool.nextFrame()" alt="right"/>
<div id="time-elapsed"></div>
<ul class="toasts"></ul>
</body>
<script type="text/javascript">
labelTool.start();
</script>
</html>
in the above code script tag order is important since files are dependent on each other.
Can I bundle all these files into one without making any change into the current js files?
If the JS is written to certain standards, you can just combine them into to a single file with simple concatenation (e.g. with the standard unix tool [cat].)
This is quite fragile though, since semicolon insertion rules can break things when you just stick two JS files together.
e.g. if you have a couple of files that use IIFEs to scope variables, then putting them next to each other will cause the parenthesis around the second to act as a function call containing arguments for the first.
So you need a tool to do this. Last time I had cause to build a system in JS that didn't use Node.js or ES6 modules I used UglifyJS which can take care of that problem (while also shrinking the file size of the JS).
uglifyjs input.js other-input.js more-input.js --output combined.js -c
I am currently working on a project using Django, and I am having a weird problem with my script tags.
I have a layout.html file in which I have included Jquery and Bootstrap in the head. Using jinja, I am extending layout.html for my new file, main.html. In my new file I am now including a new script because this script is peculiar to this page.
The problem I am having is that this new script does not work in main.html unless I again include Jquery in inside main.html. Please, I would like to know if there is an explanation for this? or maybe I am missing something?
layout.html file
<html>
<head>
// script to include jquery here, version 3.3.1
// other scripts include, bootstrap.js, popper.js, knockout.js
</head>
<body>
{ block content % }
{ % endblock % }
</body>
</html>
Sample of main.html
main.html
{ % extends "layout.html" %} {% block content %}
// This new script below only works if jquery is included here
// new script here
<div> </div>
{% endblock %}
I am also using knockout.js, from which I am calling functions in new script on document load. The new script requires Jquery, But I don't understand why it's not finding the jquery unless its included in the same file. The I also get and error when I include JS in the main.html file because jquery should be included before bootstrap.js.
Please, I would be happy if anyone has encountered similar problems or if anyone can explain this to me.
This is the head for layout.html:
<head>
<title>Suggesto</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- font awesome-->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
/>
<!-- Js-cookie-->
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
<!-- Popper.js-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<!-- Bootstrap.js-->
<script src="/static/bootstrap/js/bootstrap.js"></script>
<!-- Font -->
<link
href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Open+Sans|Quicksand|Montserrat"
rel="stylesheet"
/>
<!--Knockout.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
{% load staticfiles %}
<link
rel="stylesheet"
href="/static/bootstrap/css/bootstrap.css"
type="text/css"
/>
<link rel="stylesheet" href="/static/css/mainpage.css" type="text/css" />
</head>
The main.html starts like this
{%extends "mainpage/layout.html" %} {% block content %}
<script src="/static/js/jquery.session.js"></script>
<link
rel="stylesheet"
href="/static/css/star-rating.min.css"
media="all"
type="text/css"
/>
<script src="/static/js/star-rating.min.js"></script>
<script src="/static/js/suggest.js"></script>
<link rel="stylesheet" href="/static/css/suggest.css" type="text/css" />
<!-- Start -->
<div class="container" id="Page">
It ended up being a function from Knockoutjs:
ko.cleanNode( )
I don't know what this function does under the hood, something to look at. Feel free to provide more details if you know more.
I got a little problem with jQuery here.
Basically, I include my pages in the index.php page. However, SOME jQuery is not working, while others are okay. All scripts used in all pages are loaded in the tag of index.php.
<head>
<meta charset="utf-8">
<title>Shy Shop</title>
<!--js-->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/light_box.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){jQuery(".inline").colorbox({inline:true, width:"50%"});});
</script>
<!--end js-->
<!-- Mobile Specific Metas ================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS ================================================== -->
<link rel="shortcut icon" href="Images/icons/favicon.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/ddsmoothmenu.css"/>
<link rel="stylesheet" href="css/elastislide.css"/>
<link rel="stylesheet" href="css/home_flexslider.css"/>
<link rel="stylesheet" href="css/light_box.css"/>
<link href="../../../html5shiv.googlecode.com/svn/trunk/html5.js">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
And this is how I include the rest of the files in index.php.
<?php
if(!isset($_REQUEST['pg']))
{
$pg = "home";
}
else
$pg = $_REQUEST['pg'];
if($pg=="shopguide")
include("faqs.php");
elseif($pg=="aboutus")
include("aboutus.php");
elseif($pg=="contactus")
include("contactus.php");
elseif($pg=="home")
include("home.php");
elseif($pg=="shop")
include("shop.php");
elseif($pg=="sitemap")
include("sitemap.php");
elseif($pg=="product")
include("product.php");
elseif($pg=="shoppingcart")
include("shoppingcart.php");
elseif($pg=="profile")
include("account.php");
elseif($pg=="orders")
include("orders.php");
elseif($pg=="wishlist")
include("mywishlist.php");
elseif($pg=="changepassword")
include("changepassword.php");
elseif($pg=="newmessage")
include("newmessage.php");
elseif($pg=="receivedmessages")
include("receivedmessages.php");
elseif($pg=="ordersummary")
include("ordersummary.php");
elseif($pg=="test")
include("test.php");
elseif($pg=="viewmessage")
include("viewmessage.php");
elseif($pg=="register")
include("register.php");
elseif($pg=="login")
include("login.php");
elseif($pg=="reseller")
include("reseller.php");
elseif($pg=="myaccount")
include("orders.php");
?>
An example of a working js in the included files is the jcarousel.min.js.
The accordion.js and light_box.js does not work with the included files, but they work when they are used in a single file.
Console says: Uncaught TypeError: undefined is not a function.
This issue may happen when you have same plugin/jquery files included
in other php files too. e.g. in index.php, you have some JS files, you
are including other PHP files which may also have same JS again. In
such cases, jQuery behaves like this. To check this, just check the
view source of generated html.
I created default ASP.NET MVC 3 web application. Then I added three css and three js files to \Views\Shared_Layout.cshtml view:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet1.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet2.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript2.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
....
when I run the application, I html code is
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet1.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/JScript1.js" type="text/javascript"></script>
<script src="/Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
Is it possible to have a handler in MVC to change my output html to like:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<script src="js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js" type="text/javascript"></script>
<link href="css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
So the link js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js
will return content of all these js files to the browser, and link css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css will return content of all css files.
I did something before in ASP.NET by IHttpHandler, but can't figure out how to do that in MVC, since I'm just starter in MVC.
Any help and code samples will appreciate.
Thank you!
You can use bundle and minification nuget package. Bundling and Minification
At the NuGet console type: "Install-Package Microsoft.AspNet.Web.Optimization"
Example here:
Using Web Optimization with MVC 3
I use cassette in my own projects. Also, this list here contains top 20 in Nuget.
I'm just posting my entire page to prevent confusion. I've stared at each link and checked the folder for the files. it all seems to be there. what's not working? very frustrated, could use a fresh pair of eyes. all my page displays is the content of the pre, but without any formatting. again, thanks for the help
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--SYNTAX HIGHLIGHTER-->
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushPhp.js"></script>
<!--JQUERY and PROCESSING SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="text/javascript">
SyntaxHighlighter.HighlightAll();
</script>
</body>
</html>
Four things:
SYNTAX HIGHLIGHTER - put the .js files AFTER the jquery, jQueryUI, etc. scripts. The order is important!
use $(document).ready to make sure that all the js files are loaded before the body content tries to use it.
Are you using firebug or some such tool to check for script errors in the browser?
Are you getting any errors at all or just not seeing the highlighting effect?
By replacing:
SyntaxHighlighter.HighlightAll();
with
SyntaxHighlighter.all();
your sample code works for me.