I am trying to update the DOM with some HTML and scripts that use jQuery. The section of the DOM that is being updated is BEFORE the jQuery code is called (within the DOM), but since the jQuery is what places this code the code is placed after the jQuery is called.
Can this work? I cannot get it to right now.
Here's my HTML:
<div id="readThisData">
Some data
</div>
<div id="addScript">
No script yet
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
$('#addScript').html(console.log($('#readThisData').html()));
}
</script>
First of all, console.log() display things on the console, it does not run code.
Second, jQuery has a very nice method to run scripts more info here : http://api.jquery.com/jquery.getscript/
It's just because console.log return undefined, try this:
$('#addScript').html($('#readThisData').html());
Related
I have a layout file where i included Jquery just before closing tag.
//layout.handlebars
<!DOCTYPE html>
<html>
<head></head>
<body>
{{{body}}} // renders the body content
<script src='/js/jquery-2.2.4.min.js'></script>
</body>
</html>
I also have a page specific javascript(helper.js) that makes an Ajax call.
<div>Some sample data</div>
<script src="/js/helper.js"></script>
but the problem here is jquery is loaded at the end of the page but i am referring to it in the external javascript before jquery is loaded. which shows me '$' is not defined and i know that is obvious.
One solution to this will be like adding jquery to the head section but that is not what i want.
Is there any approach that i can apply to make an ajax call from external file without moving Jquery to head section.
Any help is much appreciated!!
Is there any approach that i can apply to make an ajax call from external file without moving Jquery to head section.
Yes, I assume you already understand the cause of the issue. As you see below the final content is ..
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>Some sample data</div>
<script src="/js/helper.js"></script> <!--Jquery is not loaded yet, and hence $ is undefined -->
<script src='/js/jquery-2.2.4.min.js'></script>
</body>
</html>
As you already know one option is to move jquery anywhere in the HTML but make sure its loaded before any other jquery dependent files. Now since you don't want to take this option. we have another option.
Solution:
Our only aim is to make sure the jquery library is loaded prior to any other jquery dependent files.
We can get the files on document.ready using $.getScript()
$(function(){
$.getScript( "/js/helper.js", function( data, textStatus, jqxhr ) {
console.log( "Load was performed." );
});
});
Extras: If you feel this is a overhead and you cannot add this code to all the files in your page (since there can be too many files ), You can write a generic function and a global array variable , This function will check for file paths in the array and execute each one synchronously and remove from the array. Make sure this generic function is called in every document.ready event.
One Solution is that You can put the jquery script at the start of body tag before {{{body}}} section .. In this way your helper script will be rendered after jquery and your problem will be solved .....
Well its not pretty but you could use some kind of test and wait loop something like
<script>
(function test(){
if( window.jQuery ){
//your jQuery code
} else {
setTimeout(function(){ test(); }, 200);
}
})
</script>
As my website has only one page, and the index.html was getting really long and impossible to read. So I decided to put each section in a different HTML file and use jQuery to included it.
I used jQuery's include in the way as it has been mentioned here to include a external HTML file but apparently it doesn't work for my website. I really don't know what is the problem.
Here is the link of my workspace.
Here is what I am doing in index.html file to include other sections
<script src="./js/jquery-1.11.1.min"></script>
<script>
$(function() {
$("#includedContent").load("./page1.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page2.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page3.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page4.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page5.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page6.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page7.html");
});
</script>
I also used this method to make sure the file is accessible and everything was fine. So the problem is not the accessibility of the files
You are overwriting the contents of #includedContent seven times (see documentation of jQuery.load). With AJAX, there is no guarantee which request will complete first so you will end up with random page content inside the container.
The solution is to create containers for each page and load each page inside its dedicated container, something like this:
<div id="includedContent">
<div class="page1"></div>
<div class="page2"></div>
<div class="page3"></div>
</div>
$(document).ready(function() {
$("#includedContent .page1").load("page1.html");
$("#includedContent .page2").load("page2.html");
$("#includedContent .page3").load("page3.html");
});
NB: Having said all that, I do not understand how AJAX solves the problem of the page being too long/impossible to read.
There are several things that look odd to me:
all your load functions run at document ready, which is weird while having all the same target. load replaces (not adds) the content of the selected element with what is being loaded, you probably are trying to add all the html contents, but your current setup would actually just load page7.html into #includedContent
the paths look strange to me, i guess ./ may cause errors, try to leave out ./ everywhere.
rather than loading an entire html page, you might just want to load a piece of that file (i dont know how pageX.html looks), for example you would not want to load the <html> node entirely, rather the content only: .load('page1.html #content')
are you including jquery correctly? there is no .js in your inclusion
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 am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. I am learning the following code dealing with javascript, my confusion is for $(function(){...} part of code, when it will be called and what is its function? I did not see any code invokes this function.
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<link type="text/css" href="tabcontrol/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="tabs-1">
<p>tab1 info</p>
</div>
<div id="tabs-2">
<p>tab2 info</p>
</div>
</div>
</div>
</body>
</html>
thanks in advance,
George
It comes from the jQuery library you're including:
<script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>
$ is an alias for the jQuery function.
See jQuery(callback) reference documentation:
A shorthand for $(document).ready().
Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on your page that depend on the DOM being ready to be operated on. While this function is, technically, chainable - there really isn't much use for chaining against it.
For more information, have a look at Tutorials:Introducing $(document).ready()
It will be called when the document is ready. It is equivalent to:
$(document).ready(function() {
...
});
Document.ready indicates that the page is fully loaded on the client. WebParts are serverside controls and will be processed first in order to produce the html document sent to the client. Thus webparts will be processed before the document.ready client-side event fires.
From the Gecko docs:
The load event fires at the end of the document
loading process. At this point, all of
the objects in the document are in the
DOM, and all the images and sub-frames
have finished loading.
$(function(){
});
is jQuery (a Javascript library) shorthand for:
$(document).ready(function(){
});
It is what you use to do with <body onload="xxx"> but more sophisticated. You can get a fuller explanation here.
I'm not sure why you tagged your post "SharePoint" but note that this is not suported on SharePoint pages.
You need to push scripts that run on page load on a stack and SharePoint will execute them. The syntax is:
_spBodyOnLoadFunctionNames.push("myOnloadFunction");
This will require the javascript fu:
function myOnloadFunction()
{
$("#tabs").tabs();
}
to be available, which can execute your onload code.
That's a shorthand used in jQuery and one that is absolutely unclear and unnecessary in my opinion. Not too long ago, we used to write:
$(document).ready(function() {
$("#tabs").tabs();
});
Now we can also write this to do the above:
$(function() {
$("#tabs").tabs();
});
The function that is passed to $(document).ready is executed when the page is loaded and the DOM is ready, in other words the document has been loaded in memory. This code is written in jQuery, a Javascript library that makes DOM operations easier.
This is how the above code translates to plain Javascript:
window.onload = function() {
$("#tabs").tabs();
};
where window is a global object that represents the page window, of course.
This is a jQuery call and it gets called when a document gets loaded.
more info at http://docs.jquery.com/Core/jQuery#callback
That syntax is an alias for
$(document).ready(function(){});
This event is used in jQuery to invoke a script as soon as the DOM is ready. It's like window.onload, but doesn't wait for all the images to fully load before firing.