Is there any way to load these snippets after full load of html?
I'd be very happy if loading the snippets after the js file (set to ASYNC load) or even set a timer.
<script>$(document).ready(function(){var modals = ['#bookings', '#studios', '#mygallery', '#social', '#reviews', '#articles', '#contactme', '#credits', '#pagemap', '#tsandcs', '#events'];if (window.location.hash && ~modals.indexOf(window.location.hash)) {$(window.location.hash).modal();}})</script>
<script>$(document).ready(function(){$("#myModal11").modal('show');});</script>
<script>$(".modal:not(.noclose) a").click(function(){$(this).closest(".modal").modal("hide");});</script>
You can try this Behaviour
Hope this helps !
<html>
<head>
</head>
<body>
// My Html Here
<script>
$(document).ready(function(){
var modals = ['#bookings', '#studios', '#mygallery', '#social', '#reviews', '#articles', '#contactme', '#credits', '#pagemap', '#tsandcs', '#events'];
if (window.location.hash && ~modals.indexOf(window.location.hash)) {
$(window.location.hash).modal();
}
$("#myModal11").modal('show');
$(".modal:not(.noclose) a").click(function(){
$(this).closest(".modal").modal("hide");
});
});
</script>
</body>
// And Remove this click function and use .on instead of it for single handler
$(".modal:not(.noclose)").on("click","a",function(){
$(this).closest(".modal").modal("hide");
});
});
You are putting them in a document on ready function,
$(document).ready(function(){$("#myModal11").modal('show');});
Just put the last one in that same on ready function and you're good to go
Although you could just put in them in one of those functions too:
$(document).ready(function(){
// put all code here...
});
Related
I've looked all around stack overflow for answers to this same problem. Usually it's simple syntax errors like omitting a closing tag or not writing the src attribute properly.
I could've sworn, though, that my html and js is correct, but I still can't get the jQuery working.
The normal javascript (function test()) works perfectly as it's linked with an html button using onclick. The $('#click') jQuery simply will not work, though.
<head>
<script type='text/javascript' src='jquery-3.2.1.min.js'></script>
<script type='text/javascript' src='test.js'></script>
</head>
<body>
<button type='button' style='margin: 1em;' id='click'>CLICK</button>
<button type='button' style='margin: 1em;' id='testButton' onclick='test()'>TEST LINKING</button>
</body>
Both js files and the html are in the same folder.
And here's the js.test:
$('#click').click(function () {
alert('jQuery Works!');
}); //NOT WORKING!
function test() {
alert('Okay!');
} //WORKING!
The problem isn't linking jQuery, it's about scope and DOM loading.
When you create a function globally it becomes a global reference that you can access whenever you want afterward.
When you call a function, or change the value of a variable, it needs a scope to know when to be called. It's generally the global scope but, when you use jQuery functions, you cannot know if your libraries are already loaded and therefore if you'll be able to access the functions they provide.
Therefore, wrap your EH in a document.ready function that is executed by jQuery itelf when the DOM is fully loaded. You can do it this way :
$(document).ready(function(){
$('#click').click(function () {
alert('jQuery Works!');
});
});
Or in a shorter way :
$(function(){
$('#click').click(function () {
alert('jQuery Works!');
});
});
Ahh, the problem here is that when you load the JS and jQuery file, browser starts going through you code, finds that it should now bind a click handler for #click, but when it actually goes to find #click on the page it doesn't get it. Because it has not been added to the dom yet !
You have three ways to deal with this :
Use the defer attribute of the script tag. It is used to define script that will not run until after the page has loaded
<script type='text/javascript' src='test.js' defer></script>
Just load your JS for the event handler after the divs like :
<head>
<script type='text/javascript' src='jquery-3.2.1.min.js'></script>
</head>
<body>
<button type='button' style='margin: 1em;' id='click'>CLICK</button>
<button type='button' style='margin: 1em;' id='testButton' onclick='test()'>TEST LINKING</button>
<script type='text/javascript' src='test.js'></script>
</body>
This is why you normally see the line
Place CSS includes in the head and JS include just before the close of the body tag
That's because without CSS your page would look ugly untill it has been loaded, and placing JS in the end would make sure that the DOM is in place for any action to be performed on it
You can use the $(document).ready(function(){ ... }) event handler. This event is triggered when the document is ready or essentially when the dom has been created. Binding you click handler here makes sure that the elem is actually available for your JS to bind to
You cant define a function in a way like this. you need to do this
$(document).ready(function() {
$('#click').click(function() {
alert('jQuery Works!');
//declare other function
});
});
`
I want to clear my code a little bit and I want to run my jquery code without any function call in the html file. My actual code is :
HTML:
<head>
<script src="js/colorpick.js"></script>
<script>
$(document).ready(function() {
colorpick_start();
});
</script>
</head>
JS:
function colorpick_start() {
...
}
But if I write for example an alert in the first row of the js without any function call, that works.
alert('test');
function colorpick_start() {
...
}
But this is not working for jquery selectors or something. Is there any solution to get my jquery working without code in the html file?
I want my html file to look like this, if this is possible:
<head>
<script src="js/colorpick.js"></script>
</head>
The
$(document).ready(function() {
Waits until the DOM is ready for selectors etc.
If you add the
$(document).ready(function() {
to your colorpick.js file it will wait for the DOM to be ready and then execute colorpick_start().
And believe me this catches out most people when they start using JQuery.
In order to achieve this:
<head>
<script src="js/colorpick.js"></script>
</head>
Move the document ready call to the js file you are referencing in your HTML file and make sure that the method called is present.
$(document).ready(function() {
colorpick_start();
});
This should so it.
Put your script
<script src="js/colorpick.js"></script>
before </body> tag. This will ensure that your page is loaded fully before script starts.
$(document).ready(function() {
colorpick_start();
});
this code is working because you are calling your function after document is loaded. document load is event. you can put your function on any event you want, but it wont start if you just define your function. You have to somehow call your function. example would be on click (or on document load)
<div id="example"></div>
$("#example").on('click', function () {
your function here
});
Use that code:
$(function(){
$('.colorpicker').val("colorpicker"); //or whatever you like
});
Plnkr example code
I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });
I'm using head.js (http://headjs.com) to do async loading of my javascripts.
I have problem with jquery.validate.unobtrusive and custom validators
All custom validations should be loaded after jquery.validate and jquery.validate.unobtrusive, and I do it like following:
<head>
<script src="#Url.Script("jquery")"></script>
<script src="#Url.Script("head.load")"></script>
</head>
<body>
<!-- entire markup -->
<script>
head.js("#Url.Script("jquery.validate")", function () {
head.js("#Url.Script("jquery.validate.unobtrusive")", function () {
head.js("#Url.Script("custom-validations")");
});
});
</script>
</body>
The problem is that custom-validations script should be loaded after jquery.validate.unobtrusive but before document.onready event, because jquery.validate.unobtrusive uses document.onready to do it's black magic. But, when I'm using head.js document.onready event fired before scripts starts to load, and my custom validation does not work.
Is there any common solutions/workarounds to solve this kind of problems with async script loading?
Another problem that my customer does not want to see jquery.validate/jquery.validate.onubtrusive in <head> tag.
#Url.Script - helper method for locating js files.
I've found solution by myself. Need to use jQuery.holdReady() to hold 'document.ready' while all scripts depend on jquery.validate.unobtrusive will not load.
<head>
<script src="#Url.Script("jquery")"></script>
<script src="#Url.Script("head.load")"></script>
</head>
<body>
<!-- entire markup -->
<script>
head.js("#Url.Script("jquery.validate")", function () {
$.holdReady(true); // set semaphore for dom ready.
head.js("#Url.Script("jquery.validate.unobtrusive")", function () {
head.js("#Url.Script("custom-validations")", function () { //fires when all provided scripts are loaded
$.holdReady(false); // release semaphore and fire event
});
});
});
</script>
</body>
Try $.validator.unobtrusive.parse('#the_form_in_question') after the load.
This should work:
head.ready("#Url.Script("jquery.validate")", function () {
head.ready("#Url.Script("jquery.validate.unobtrusive")", function () {
head.ready("#Url.Script("custom-validations")",function(){
// your code here
});
});
});
If you use jquery, you could add the scripts via getScript method which fires a callback when the script is loaded, so that can help :
$(document).ready(function(){
$.getScript("#Url.Script("jquery.validate")",function(){
$.getScript("#Url.Script("jquery.validate.unobtrusive")",function(){
$.getScript("#Url.Script("custom-validations")",function(){
// do your stuff here
});
});
});
});
I would like to ask is someone could help me out with this doubt:
I got an external .js file with all the functions I use in some website. There are also different html docs with different content, of course, and I want to invoke a function to update some content (the header and the selected items in some select fields within a form which aren't the same).
I know I can do this just using the onload event in the html body tag and calling different functions of the js file but I've read that's not the best approach, so my question is: how can I invoke different functions of the same js file from different html docs?
Thanks in advance!
file1.html:
<!doctype html>
<body>
....
<script src=file.js></script>
<script>
// some code
</script>
</body>
file2.html:
<!doctype html>
<body>
....
<script src=file.js></script>
<script>
// different code
</script>
</body>
You can also check the location or the DOM in your JavaScript but the above is as simple as it gets.
Other ways, in file.js:
if (location.href == 'something') {
// do something
} else {
// do something else
}
Or, using jQuery:
jQuery(document).ready(function($) {
if ( $('h1').text() == 'Main Page' ) {
$('nav').hide();
$('#welcome').show();
} else {
// something ...
}
});
Page type 1:
<html>
<body class="one">
...Markup...
</body>
</html>
Page type 2:
<html>
<body class="two">
...Markup...
</body>
</html>
jQuery:
$().ready(function()
{
...code for all pages...
if($('body').hasClass('one'))
{
...code for pages of type 1...
}
else if($('body').hasClass('two'))
{
...code for pages of type 2...
}
...code for all pages...
});
I'm far from being a JavaScript guru, so I don't know how you might do this in pure JS.
As rsp says, you could also split your code into separate files - one for code that will be needed in all pages, and files with page specific code which are only loaded on the page where they're required.