I am building Reacts based application, I have a few jquery elements on the page such a the JqueryUI date picker and bootstraps tooltip.
The problem is these elects do not work until i reload the page.
So its like the jQuery scripts are not be loaded the first time around.
I have looked through the console and cannot see any errors related to jQuery/javascript.
Any help would be much appreciated. here is my index.html page
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<title>ICETEA</title>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- JQuery UI JS - Used for the datepicker -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Bootstrap theme -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- JQuery UI CSS - Theme: Blitzer, used for the datepicker -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/blitzer/jquery-ui.css">
</head>
<body>
<div id="app"></div>
<script src="/js/main.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", "DD d MM" );
});
});
</script>
</body>
</html>
What's probably happening is that your initial page load attempts to load everything from the network, while the second load retrieves assets from browser cache. You could verify this by using your developer tools to always load without cache; if my hypothesis is correct, then you would see a higher prevalence of your errors, even when you reload the page.
As #vanburen pointed out in their comment, the likely explanation is that you're not ordering your scripts correctly. jQuery should always be loaded first, but right now you've got it after Bootstrap. This is supported by the console error you'll see when you attempt to load the page as-is with your developer tools open:
Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.min.js:6
As an additional optimization, you can consider putting your CSS before your synchronous scripts, so the browser can be loading and parsing them while it's simultaneously loading your JavaScript.
Bottom line: Be sure to get familiar with your developer tools. They should always be your first resource when you face an unexpected behavior.
Related
I'm working on a simple cms app but I can't get the Full Calendar plugin to display the calendar. I've followed the steps that I found online and nothing has worked. I've been trying to solve this problem for a week and can't figure it out. I've checked the console for errors and it looks good.
So I wanted to reach out. My app is built in PHP, my code is included below. I've linked to everything and the jquery is working.
The code for the calendar I've included in the head section.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="css/admin-main.css">
<title>CMS</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekends: true
});
});
</script>
</head>
In the HTML on the calendar page I have this included.
<div id="calendar"></div>
Any help would be greatly appreciated! Thanks!
I know this question is old and you may have already found the solution, however, i will give my answer to help anyone else that may be running into the same issue.
I found that when the console is giving you the error that fullcalendar is not a function and your code seems to be correct, its for the following reason.
If you are using bootstrap, you need to remove the Jquery link provided in the bootstrap starter template. You have already loaded jquery in the header, by doing it again in the body, it is creating the error.. I hope it helps!
You have an extra ) on .fullCalendar(), should be:
$('#calendar').fullCalendar({
//options
});
Example below:
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
weekends: true
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div id="calendar"></div>
I have a page that uses jquery and is working perfectly. The JQuery is located inside two files: control.js and lightgallery.js. The minute I add in AngularJS all of my jquery stops working. I need to find a way to have my jquery work without learning how to rewrite all of the functions in angular. Any suggestions?
None of the html I've added with the ngInclude is using angular. It's just simple html.
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>H</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="/assets/common/css/split.css">
<link rel="stylesheet" href="/assets/common/css/control.css">
<!-- JQUERY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/assets/common/js/bootstrap.min.js" type="text/javascript"> </script>
<script src="/assets/common/js/control.js" type="text/javascript"></script>
<!-- ANGULAR -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body id="home">
<div ng-include="'../assets/includes/left-panel.html'"></div>
<!-- / START TEMPLATE -->
<div ng-include="'../assets/includes/template.html'"></div>
</body>
</html>
Here is what is happening:
Your jQuery code probably runs on document ready:
$(function(){
//your initialization code here
});
The problem is that the elements in your templates that your jQuery plugins are targeting are not yet added to the DOM when this function runs. This is because Angular has not yet inserted these templates into the DOM.
You can verify this by removing the ng-includes and replacing them with the markup contained in the templates themselves (bypassing ng-include).
This is a classic "mistake" when using Angular along with jQuery plugins.
The only "correct" way to integrate jQuery plugins with Angular is to wrap the plugins in a directive.
i'm using sublime text 3 and i've tested other jQuery UI elements but decided to try using date picker today with a small project i'm putting together. I notice that when I wanted to try it out I first saved the default code from the example on jQuery's site locally in it's own .html file, then I tried to load it up.
default code from example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
unfortunately, this brings up an input field but, on clicking into the field, i get no ability to select a date. In fact the date selection dropdown doesn't show up at all but I can tell that the input field has been selected. I thought perhaps I had left something out when copying the code over to my test file so I loaded up JSBin and pasted the code there. Magically, it works. JSBin exampleI'm assuming i'm somehow not linking to the appropriate style sheet or the CDN for the jQuery UI. Is that assumption correct or why isn't this working locally?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
P.S- I have removed link to css file as it might have been your local css file. You can add that back.
I've made my web application and did hardwork to make this almost lost 180 days to make this. All my application is made into JAvascript. But i could see, many smart persons still can steal my codes. Can you please help me? How to encrypt in such a way that my code will never show into Inspect element and View Source? Is there any Algorithm?
Here is my code When i see into inspect Element and View Source:
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="js/jplayer.flat.css" type="text/css" />
<link rel="stylesheet" href="css/app.v1.css" type="text/css" />
<link rel="stylesheet" href="css/load_bar.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/load_bar.js"></script>
<script src="js/app.v1.js"></script>
<script src="js/app.plugin.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/music_list.js">
</script>
--------
--------
--------
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js"></script> <script src="js/ie/respond.min.js"></script> <script src="js/ie/excanvas.js"></script> <![endif]-->
</head>
<body class="some-content-related-div" id="inner-content-div">
<section class="vbox">
PLEASE HELP, How to Encrypt it?
HELP WOULD BE APPRECIATED!
The Javascript code is executed in the browser, i.e. on the client side, which means it must be available not-encrypted on the client side.
The "best" you can do is probably to minify it, which will make it harder to understand it -- and a bit of obfuscation might do too -- even if someone really motivated will still be able to read it.
See for instance the YUI Compressor , which can both minify and obfuscate JS code.
Simple answer: You can't.
The only thing you can do is to uglify everything so it's not easy to read anymore, but anything that is sent to the browser is also theoretically visible to the user.
It is not possible but you can minify it using many compressors which are available online.
You can surely do this. You can disable the inspect element functionality by adding the code snippet below :-
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
$(document).keydown(function(e){
if(e.which === 123){
return false;
}
});
I am building out a site. I built out the backend, and now I am doing the front-end. On the front end I have bootstrap, various font awesome icons, and angular. It should also be noted this is a rails app.
I want to add 1 page scroll feature using jQuery & jQuery easing, that is powered by a font-awesome arrow. I am obviously not doing something right, because when used it turns blue (thought maybe it was an "active state" because of the href?), and turns all of the font (everything) on my page blue.
When in chrome's console, I get the error;
Uncaught TypeError: undefined is not a function
Which is referring to this line (might be arbitrary) in jQuery;
this.pos = eased = jQuery.easing[ this.easing ](
Here is the rest of my code;
index.html.erb
<div class="page-scroll" id="arrow"><a href="#clients"><i class="fa fa-chevron-down"></i><a></div>
styles.css
#arrow {
font-size: 25px;
color: grey;
}
main.js
$(function() {
$('.page-scroll a').bind('click', function(event){
$('html, body').animate({
scrollTop: $("#clients").offset().top
}, 1500);
event.preventDefault();
});
});
application.html.erb (thanks to another SO question, jQuery & jQuery Easing placed under style sheets)
<!-- Easing for Page Scroll -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
When I comment out the div in index, all font goes back to normal (it's blue when it's active). When I click on the button, it takes me to the element I want, but it drops you there, it doesn't have the easing aspect (which is why I am adding easing).
I have searched a fair amount, and I am baffled about this (especially the changing of the text). Any help would be very appreciated.
I have since figured out what causes this.
When this happens, your page cannot find jQuery even though it is being called. To fix this, make sure your page content looks something like this (for rails, all of this would be in application.html.erb);
head
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Good SEO.">
<meta name="author" content="">
<title>Your Title</title>
<!-- Bootstrap Core CSS for smaller projects/single page I'll use a CDN -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet" type='text/css'>
<!-- CSS or in assets/stylesheets-->
<link href="/assets/styles.css" media="screen" rel="stylesheet">
</head>
after closing body & html tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">
</body>
</html>
I've noticed the order has to be jQuery, bootstrap (if you're using it), then jquery.easing.