I am having a problem with a new OpenCart site I am building...
I spliced a Html theme with an opencart theme.... The Html theme uses prototype as a library and OpenCart uses the jQuery library. So I went in and used: jQuery.noConflict(); in all my OpenCart files that use the jQuery library (which is all OpenCart JS)
It fixed everything on my site except this: http://beta.justicejewelers.com/index.php?route=product/category&path=79 - If you click on "add to cart" from this screen its fine... However if you click "add to cart" on the sample product 1 for example its going to take you to the product page to select a size.... hit add to cart there and nothing happens.... Also happens to products without options....
Any ideas?
Also here is what I am calling in the header:
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script type="text/javascript" src="js/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape('%3Cscript src="catalog/view/theme/sellegance/js/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
<script src="catalog/view/theme/sellegance/js/modernizr.full.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript" src="catalog/view/theme/sellegance/js/jquery.elastislide.js"></script>
<script type="text/javascript" src="catalog/view/theme/sellegance/js/jquery.cycle.js"></script>
<!-- NEW SCRIPTS -->
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/banner_pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mix.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
TypeError: Cannot call method 'after' of null [http://beta.justicejewelers.com/index.php?route=product/product&product_id=50:1111]
At the line 1111:
$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
replace $ with jQuery.
P.S. You should invoke jQuery.noConflict() only once after jquery is included.
P.P.S. Include your CSS files before any JS files - this will speedup page loading.
Related
I'm struggling with deploying Angular 4 project built with cli to a Spring boot server.
In the .angular-cli.json I added outdir property, which points to a custom folder inside Spring webapp folder, which is accessible directly in the server (webapp/main).
The cli build command I'm using is:
ng build --base-href /main/ -a main
Which creates the main folder in the webapp, with the index.html containing the following script tags:
<base href="/main/">
...
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script></body>
which means that these files will be requested with /main prefix, e.g localhost:8080/main/inline.bundle.js
Which is fine for a basic app, but becomes an issue when routes are added to the angular app (In Spring, I'm serving the index.html for all paths with /main, to allow the angular routes to work properly, which cause a redirect loop for the bundles, as they are starting with /main as well.
How can I force the generated script tags to use a custom location? Or at least specifiy the absolute location, and not relay on the base href (so I can change the outDir property to main-app, and problem solved).
The desired solution would be something like this:
<script type="text/javascript" src="/main-app/main.bundle.js"></script>
I thought of maybe adding a script that will execute after the ng build which will modify the script tags, but it's a dirty solution, and also won't work with ng build --watch, which is crucial for development...
For reference, here is the Spring controller function that maps the /main requests:
#RequestMapping("main/**")
public String mainRoute(HttpServletRequest request) {
return "/main/index.html";
}
Thanks!
Here is ng build wiki: https://github.com/angular/angular-cli/wiki/build
please use --deploy-url="/main-app/" option. this will generate:
<script type="text/javascript" src="/main-app/inline.bundle.js"></script>
<script type="text/javascript" src="/main-app/polyfills.bundle.js"></script>
<script type="text/javascript" src="/main-app/scripts.bundle.js"></script>
<script type="text/javascript" src="/main-app/styles.bundle.js"></script>
<script type="text/javascript" src="/main-app/vendor.bundle.js"></script>
<script type="text/javascript" src="/main-app/main.bundle.js"></script>
I am running into a similar issue where I used ng build and it generates files(index.html, main.js, polufills.js , styles.js etc) in output path(have set this path in angular.json) - resource/static/. But I can't see any UI when starting tomcat on localhost:8080/ . I believe it's not able to load any of the static files, not sure what I missed or how can we make deployment easier.
I made a controller to serve the front-end part:
#GetMapping("/")
public String index() {
return "forward:/index.html";
}
My index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
But still no user interface when tomcat is running. Even though I used ng build --deploy-url="/" it created scripts in index.html as
<script type="text/javascript" src="/runtime.js"></script>
<script type="text/javascript" src="/polyfills.js"></script>
<script type="text/javascript" src="/styles.js"></script>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/main.js"></script>
Still no luck in getting it to show any UI content on http://localhost:8080/
I'm sorry but I spent long time but can't figure out what is wrong to pop-up the other html file with the Featherlight. The manual says nothing additional so I will be happy if you will guide me what's wrong:
<link href="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
Open Ajax Content
<br>
Ver2
<br>
Open Ajax Content
You need to specify the class in your target html page
So within http://www.htmliseasy.com/popup/popup1.html
there should be a content here
(you can rename "jQuery-Selector" whatever you wish...)
Can Mathjax be used with https?
This script renders latex if the page is called http:..., but not https:...
<script type='text/javascript' src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&ver=3.5.1'>
</script>
Yes, see http://docs.mathjax.org/en/latest/start.html#mathjax-cdn. Use the script
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
Actually i used to bind my data-source using kendo Grid.
I checked kendo.all.min.js is working fine but i dont want unwanted js files while loading so include the Grid dependency files in my code but it does not works...
It shows an error in console. This is my js
<script src="#Href("~/Scripts/libs/kendo.grid.min.js")" type="text/javascript"></script>
<script src="#Href("~/Scripts/libs/kendo.core.min.js")" type="text/javascript"></script>
<script src="#Href("~/Scripts/libs/kendo.data.min.js")" type="text/javascript"></script>
The files are not included in the right order. For example kendo.core.js should be first. Here is the documentation which lists the proper order of dependencies: http://docs.kendoui.com/getting-started/javascript-dependencies#grid
<script src="/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>
<script src="/Scripts/kendo/2012.2.710/kendo.core.min.js"></script>
<script src="/Scripts/kendo/2012.2.710/kendo.data.min.js"></script>
<script src="/Scripts/kendo/2012.2.710/kendo.grid.min.js"></script>
Put like this it's working...
I'm trying to embed a Vimeo video using fancyBox 2. I'm able to make the lightbox pop up, but all I get is a spinning loading icon that lasts forever.
I did a bunch of searching on similar Vimeo questions here on StackExchange, but implementing things others suggested has not solved the issue.
I've now even created a fresh test site (plain HTML doc with linked files in local directory), and then used the code listed in the fancyBox documentation section on using Media Helpers (Extended Functionality) line-for-line, but that's not working either. Same loading spinner, stuck forever.
Does anyone have any ideas why this is not working? Testing in both Safari 7 and Chrome. In Safari I get the stuck loading spinner. In Chrome I get an error page within the lightbox that says "The file or directory could not be found."
Here's my code:
<!DOCTYPE HTML>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Add fancyBox media helpers -->
<script type="text/javascript" src="js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
<a class="fancybox-media" href="https://vimeo.com/78112273">Video</a>
</body>
All I get with that is a stuck spinner and an error page.
Any help and suggestions are greatly appreciated! Thank you!
Ensure your page has a valid DOCTYPE and most importantly, note that the case seems to impact on whether the video actually gets loaded when the popup is displayed. (You need lowercase 'html' in the doctype declaration)
ie. Using:
<!DOCTYPE html>
<html>
<head>
fixed it for me... This is probably why your example works in jsfiddle.