I have this weird problem where console.log does not work inside symfony application. Logging works in other sites though, for example:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_output_console
Everytime i refresh that page, the console displays correctly: 11
here is the last part of my code inside the twig template
{% block javascripts %}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
console.log(5 + 6);
});
</script>
{% endblock %}
The dropdown function works correctly, so javascript is working. However the console does not display anything.
You need to end your <script> tags that have an src attribute (like you did with jQuery). When writing JavaScript between tags, they need to be independant to that JavaScript specifically. See the documentation for more information.
Specifically from the docs:
If a script element has a src attribute specified, it should not have a script embedded inside its tags.
Here's your code updated with the fix:
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
console.log(5 + 6);
});
</script>
Related
My JavaScript code only runs when the code is both inside the HTML file and called externally via
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
<script>
var scroller = document.querySelector("#scroller");
...
</script>
I am using Flask and Jinja, with a file structure of:
/app
/static
index.js
/templates
base.html
myfile.html
routes.py
__init__.py
...
The code inside index.js is the exact same code between the <script> tags inside the HTML.
In terms of jinja and using block tags, base.html:
<body>
{% block content %}
<!-- typical HTML stuff here -->
{% endblock %}
<!-- some Bootstrap tags -->
<script ... ></script>
{% block script %}{% endblock %}
</body>
myfile.html:
<body>
...
{% block script %}
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
{% endblock %}
<script>
...
</script>
The code itself works, and it worked not too long ago without this issue; I don't know what I changed to cause this, nor can I even imagine what could cause this. If there is more code that is required, I can easily share it.
Is there something I not understanding?
To note: I have had a similar issue trying to including external JavaScript code inside my HTML; at one point it wouldn't work, then it did, now it behaves the way I have described.
To further note: I have another .html file with its own external .js file that works fine.
Mr.#JakeJackson, Script in externl file never requires the same content to be available inside your inline code.
May be you are trying to process some elements and your script got executed before those elements are mounted to the document object.
A lazy solution to that problem is moving the external file linking tag to the bottom your HTML.Body.
OR
You can use defer attribute to your script element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
OR
If you have some libraries like jQuery included in your page, You can use the document.ready implementations in that
OR
you can implement your own document.ready like below
function myReady() {
return new Promise(function(resolve) {
function checkState() {
if (document.readyState !== 'loading') {
resolve();
}
}
document.addEventListener('readystatechange', checkState);
checkState();
});
};
myReady().then(function() {
// Put your app custom code here
});
Why do I get a javascript error (function not defined) on Internet Explorer when I try to call a function that lives inside a different js file?
I'm using laravel blades, this is my parent template:
<!DOCTYPE html>
<html>
<head>
<!-- METAS -->
<title>#yield('titulo')</title>
#yield('css')
</head>
<body>
#include('navbar')
#yield('content')
#include('footer')
<!-- Here I have jquery and bootstrap js files... -->
<script src="{{ asset('js/sitio/custom.js') }}" type="text/javascript"></script>
#yield('js')
</body>
</html>
So within the extending view I have:
#extends('layouts.template')
#section('content')
<button id="button" type="button">Click me</button>
#endsection
#section('js')
<!-- Here I have a js file that calls a function that lives inside custom.js -->
<script src="{{ asset('js/some-js-file.js') }}"></script>
#endsection
Basically I have a button that when clicked needs to send some data over ajax:
Code inside some-js-file.js:
$(document).ready(function(){
$('#button').on('click', function(){
sendAjax(); //the error is here, I get a 'sendAjax is not defined'
})
});
Code inside custom.js:
//this function is declared inside the global scope
function sendAjax(){
//do things
}
It's also worth mentioning that the code segment that calls the custom.js file's function gets executed inside a $(document).ready().., also, this only happens with internet explorer, in other browsers such as firefox, chrome and safari works always fine.
I've read a suggestion to change the location of my custom.js file and move it inside <head> tag but I would need to also move jquery and bootstrap js libraries because that custom file makes use of them, and according to this answer, it is NOT recommended to move jquery inside <head> tags because of performance. How can I solve this?
I have a web page which does navigation using templates and filling / showing them depending of user interactions.
It works quite well, but the templates contains some JS included with them. This JS code is correctly loaded (in the example below, it provides an alert saying "Hi") when the page is just loaded. However, I don't see the code within the debugger console, either in Chrome or Firefox.
I've provided a minimal example below, where I see in the console > Source, under localhost, only my HTML page and jquery.min.js in the asset/js sub-folder.
Here is my HTML :
<script src="assets/js/jquery.min.js"></script>
<template id="my_screen">
Hello
<script type="application/javascript" src="assets/js/testouille.js"></script>
</template>
<section class="container">
<div class="my_screen hide"></div>
</section>
<script type="application/javascript">
function useTemplate(elem) {
var myTemplate = $('#' + elem),
normalContent = $('.' + elem),
clonedTemplate = myTemplate.html();
normalContent.empty();
normalContent.append(clonedTemplate);
}
$(document).ready(function() {
useTemplate('my_screen');
}
)
</script>
And here is my Javascript :
alert("Hi");
Any idea?
Since testouille.js is in a <template>, it's not loaded automatically by the browser when the page is loaded.
When you clone the template and append it to a regular DIV, jQuery emulates loading the file using $.getScript(). In the Chrome debugger, code that's loaded this way will be shown in a VM:#### filename (where #### is an arbitrary number) in Sources, rather than with its actual filename.
You can make the debugger give this a filename by putting the following comment in testouille.js:
//# sourceURL=testouille.js
So I'm trying to use Scrollify, which is a jQuery plugin for scroll snapping. I have jQuery imported no problem, but no matter how I import the plugin itself, I get the error:
Uncaught TypeError: $.scrollify is not a function
I have the plugin script loading after jQuery itself loads, and the configuration code after both of those load, even to the point where I put the plugin's script tag and configuration code at the very end of the page before </body>.
I've tried hosting the plugin script locally, and I tried using a CDN. Both gave the same issue.
I've had these sort of issues with other scripts and they always were due to the loading order, but I'm stumped here. Any help?
So I am building a custom Theme in OctoberCMS, and I was hopping to use scrollify before running into the same error. After a lot of struggling, switching JQuery versions and moving functions around, I noticed my issue was related to using Laravel Mix/Webpack to import the scrollify code. I had it required at the top of my main.js file, but the code itself was loaded after.
My solution was using some October twig functions to load the code after JQuery manually.
// These get loaded first
<script src="{{ [
'assets/js/app.js', // My JQuery gets loaded here
'assets/js/vue.js' // Other JS for the website
]|theme }}"></script>
// Scripts in here injected into page by the {% scripts %} tag after, having the
// scrollify.js in the array above or outside the {% put scripts %} tag would always throw
// $.scrollify is not a function error
{% put scripts %}
<script src="{{ 'assets/js/scrollify.js'|theme }}"></script>
<script>
$(document).ready(function () {
$.scrollify({
section: ".example-section",
});
});
</script>
{% endput %}
{% scripts %}
The {% scripts %} tag inserts JavaScript file references to scripts
injected by the application.
https://octobercms.com/docs/markup/tag-scripts
As the above answers mentioned, Scrollify needs to be loaded after the page and Jquery loads, but if you are using Webpack or equivalent I would suggest checking the compiled scripts in your browser and making sure they are ordered correctly.
Try putting your script at the bottom of your code.
...
<script>
$(function(){
$.scrollify({
...
});
});
</script>
</body>
Try to use it this way
jQuery(document).ready(function($) {
$.scrollify({
...
});
});
The reason behind the error is, that the Scrollify Script should initialize after the document has finished loading. Thus, the solution is to move it to the end
Move these two lines at the end of the body tag, as shown below:
<body>
..
..
..
<script src="..\js\Scrollify\jquery.scrollify.js"></script>
<script>
$(document).ready(function() {
$.scrollify({
section : ".sectionalScrolling",
});
});
</script>
</body>
Make sure that the script is right before the closing body tag.
I have the following script in my smarty template:
<script src="http://code.jquery.com/jquery-latest.js">
$(document).ready(myBookings);
</script>
However it doesn't work on page load. $(document).ready(myBookings); does work when I run it in Mozilla firebug console though. What am I doing wrong?
script elements can have a src attribute or content, but not both. If they have both, the content is ignored (the content is considered "script documentation," not code).
Use another script block for your document-ready handler
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
$(document).ready(myBookings);
</script>