I am loading all of the below libraries and files, but for some reasons only the CSS is executing and none of the external js files. The scripts.js file holds all of my jQuery and it seems to be formatted properly. I'm not sure why the CSS would execute, but not the jQuery.
In chrome dev tools, everything below is loaded.
<head>
<!DOCTYPE html>
<meta charset=utf-8 />
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/spectrum.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/scripts.js') }}"></script>
</head>
This is a portion of the scripts.js file:
$("span.output").draggable({
stop: function(event, ui) {}
});
$('input[type=file]').change(
function() {
$('#submitbutton').click();
});
$("#text_submit").submit(
function(event) {
$("#text1").html($("#1").val());
$("#text2").html($("#2").val());
$("#text3").html($("#3").val());
$("#text4").html($("#4").val());
$("#text5").html($("#5").val());
$("#text6").html($("#6").val());
$("#text7").html($("#7").val());
$("#text8").html($("#8").val());
$("#text9").html($("#9").val());
$("#text10").html($("#10").val());
$("#slider1").show();
$("#slider2").show();
$("#slider3").show();
$("#slider4").show();
$("#slider6").show();
$("#slider7").show();
$("#slider8").show();
$("#slider9").show();
event.preventDefault();
});
You need to put your code inside script.js in JQuery's Dom Ready function, like this;
$(document).ready(function(){
// Your code here
});
For more info, http://api.jquery.com/ready/
Try the below, not declaring type="text/javascript" in your jquery loading way might also be an issue.
<head>
<!DOCTYPE html>
<meta charset=utf-8 />
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/spectrum.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
Related
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('js/script.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}" >
<link rel="stylesheet" href="{{asset('css/bootstrap-select.min.css')}}">
<link rel="stylesheet" href="{{asset('css/style.css')}}">
script.js
$('.selectpicker').selectpicker();
There are not errors in the console but options inside select tag are not showing
I've made a project in React and HTML5. Previously, to call my render function I had put my render into a global function like this:
window.shareRenderResetResult = function () {
ReactDOM.render(
<div> hello </div>,
document.getElementById('salut')
);
};
and I called it in my html page like this:
<script>
shareRenderResetResult();
</script>
Today, for an another project, I have do the same things but I now get a warning in my console:
Uncaught ReferenceError: shareRenderResetResult is not defined
at (index):207 (anonymous) # (index):207
I don't know what to do. Ideas?
my html page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>h</title>
<link rel="shortcut icon" href="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script type="text/babel" src="{{ url_for('static', filename='JS/test.js') }}"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/materialize-css/bin/materialize.css') }}">
<script src="{{ url_for('static', filename='node_modules/materialize-css/bin/materialize.js') }}"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://use.fontawesome.com/0b3dc57bca.js"></script>
<link rel="shortcut icon" href="">
</head>
<body>
<div class="row">
<div id="salut">
</div>
</div>
<script>
console.log("what's wrong with you ?");
shareRenderResetResult();
</script>
</body>
</html>
i have put a console.log in my function but nothing appeared.
I have looked around and although I have found similar questions to this one, none of them had any solutions that worked for me.
my fullcalendar.js gets an error : eventElement.resizable is not a function
function resizableSlotEvent(event, eventElement, timeElement) {
var snapDelta, prevSnapDelta;
var snapHeight = getSnapHeight();
var snapMinutes = getSnapMinutes();
eventElement.resizable({ <----get error
handles: {
s: '.ui-resizable-handle'
},
...
my html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"/>
<link href='{% static "css/fullcalendar.css" %}' rel='stylesheet' />
<link href='{% static "css/fullcalendar.print.css" %}' rel='stylesheet' media='print' />
<!-- JS-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
</script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script type="text/javascript" src="{% static 'js/fullcalendar.js'%}"></script>
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
I tried a lot of answers of stackoverflow. But I can't solved the problem. Anyone help?
That custom jqueryui js doesn't seem to include the resizable plugin, and the code you're showing relies on it.
Try it with the full js of a recent jQuery ui instead.
on Chrome and Opera, the website works perfectly. When I open it in Firefox and IE it is not loading the .js files. My php code looks like this:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title id="titlebank">WEBSITE</title>
<link rel="SHORTCUT ICON" href="images/icon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/simple-line-icons.css">
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script type="text/javascript" src="js/progressbar.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/kickstart.js"></script>
<script type="text/javascript" src="chat/chat.js"></script>
<link rel="stylesheet" href="chat/chat.css" type="text/css" />
<script type="text/javascript">
I am using jquery mobile
I have 3 pages and after some clicks between the pages the css are not rendered
LoadCss.js
$(document).on("pageinit",function(event) {
$("#categoriesPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss.css">');
});
$("#wordPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss">');
});
$("#searchPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="myCss">');
});
});
Html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<meta name="viewport" content="width=device-width"/>
<meta charset="UTF-8">
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/rtl.jquery.mobile-1.4.0.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/angular.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/lodash.js"></script>
<!--player-->
<script type="text/javascript" src="scripts/jquery.jplayer.js"></script>
<script type="text/javascript" src="video.js"></script>
<script type="text/javascript" src="mainController.js"></script>
<script type="text/javascript" src="loadCSS.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl" ng-init="data=init()">
<div data-role="page" id="firstPage">
... some logic
</div>
<div data-role="page" id="secondPage">
.. sonle logic
</div>
<div data-role="page" id="thirdage">
..........
</div>
</div>
</body>
</html>
I tried also to put the CSS in the header and not on on event but it still didn't work
<link rel="stylesheet" href="scripts/rtl.jquery.mobile-1.4.0.css"/>
<link rel="stylesheet" href="styles/jplayer.pink.flag.min.css" rel="stylesheet">
Please try this method below, using the attribute method. note the order they are applied.
This will give better compatibility for all browsers too (IE has issues):
To test, don't put your JQuery code in the external LoadCSS.js file - put it into the HTML file. It should work every time. When loading from an external JS file, some events do not always trigger when you expect due to the browser caching the file.
As #nishi says, remember to remove the old CSS before adding the new ones.
$('<link>')
.appendTo('head')
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', '/styles/myfile.css');