Head.js weird action - javascript

I'm trying to use head.js. Getting some weird action. Below works but if I comment out "alert('hi')" in the script in the BODY, then the head.js doesn't seem to work.
So I tried commenting out all the head.js stuff and used a standard tag for each JS library. And it works as expected. But when using Head.js, it fails if the "alert('hi')" is commented out. Obviously, for production, I want to remove this alert but then I get this error message: "ReferenceError: $ is not defined" ... ??? But if I uncomment out the alert, then it all works and pulls data from the DB ???
Any thoughts?
<head>
<title></title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js">
</script>
<script type="text/javascript">
head.js(
/* root level */
"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
"/assets/scripts/external/_references.js",
"../../assets/scripts/external/jquery.unobtrusive-ajax.min.js",
"../../assets/scripts/external/jquery.validate-vsdoc.js",
"../../assets/scripts/external/jquery.validate.min.js",
"../../assets/scripts/external/jquery.validate.unobtrusive.min.js",
"../../assets/scripts/external/knockout-2.3.0.js",
"../../assets/scripts/external/modernizr-2.6.2.js",
"/assets/css/Index.css",
"assets/css/OrangeCounty.css"
);
</script>
</head>
<body>
<div id="list"></div>
<script>
alert('hi');
$.getJSON("http://localhost/webapi/api/ccc", function (result) {
$.each(result, function (i, field) {
$("div").append(field.Code + " " + field.Country1 + "<br/>");
});
});
</script>
</body>

The alert() stalls the script execution enough for jQuery to actually load. Head.js loads the scripts in parallel and doesn't block, so you have to use it with a callback:
head.js(..., function() {
// Your code
});
Or put that code into a separate script file and put it after jQuery in your head.js call.

Related

Uncaught ReferenceError: onOpenCvReady is not defined

I tried openCVjs tutorial in my local and everytime I load it I get error on console
What I have tried ?
Loading without a file server, because the openCV.js library is around 11mb. So thought that could be an issue.
Loaded with simpleHTTPserver using python even then I got the same error. Attached below screenshot of the network requests.
Please note that test.js resides in the same path as that of openCV.js but test.js works because I tried console.log from it.
You should load opencv.js asynchronously.
Add this into your index.html
<script>
function onOpenCvReady() {
console.log( 'OpenCV Ready', cv);
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript">
</script>
In my case, it only works when the onOpenCvReady() function is declarated in an HTML page.
When the function is loaded from an external test.js file, I have to refresh the index page two times, then it suddenly works without any errors.
I embedded it into my HTML page like this:
<p id="status">OpenCV.js is loading...</p>
<!-- <script async src="js/main.js" type="text/javascript"></script> -->
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
<script>
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>

Access a Function From Another File

I have two file:
html2canvas.js
function html2canvas(){
}
myid_print.js
(function ($) {
$(document).ready(function() {
//I want to call html2canvas function here
html2canvas();
});
})(jQuery);
I already included both files in my html but after running the code above, the console shows an error saying:
Uncaught ReferenceError: html2canvas is not defined
How will I call the function from inside my second file?
Try implementing your Client side code as :
<head>
....
<script src="html2canvas.js" type="text/javascript"></script>
<script src="myid_print.js" type="text/javascript"></script>
....
<head>
<body>
...
<script type="text/javascript">
function_from_myid_print();
</script>
...
</body>
Inside which you can call html2canvas();
This will surely help you.
For more details refer links:
https://stackoverflow.com/a/3809896/4763053 and https://stackoverflow.com/a/25963012/4763053
Try put your JS script at the bottom of your HTML page.

Sometimes jQuery plugin is not loaded

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(){ ... });

head js + jquery.validate.unobtrusive + custom validators

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
});
});
});
});

'Function not defined' error in script w/jQuery

I'm getting a "function not defined" Javascript error with the following code, which uses jQuery:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
function log_in() {
document.write('Logging in ... ');
$.post('process_ajax.php', { 'action' : 'log in' }, function(data) {
document.write(data);
create_new_story();
});
}
function create_new_story() {
document.write('Creating new story ... ');
$.post('process_ajax.php', { 'action' : 'create story' }, function(data) {
document.write(data);
});
}
</script>
</head>
<body onload="log_in()">
Processing...<br>
</body>
</html>
Here's the PHP script it's calling (for testing purposes):
<?
die("Page opened.<br>");
?>
The first function called -- log_in() -- works fine, but I get this error:
"Error: create_new_story is not defined"
And that function never gets executed.
I'm sure I'm missing something simple. Can I get a new pair of eyes to find it?
You can only call document.write while the page is still loading.
You cannot call it later, or it will blow away the existing page.
Instead, you should use jQuery's .append method.
When you call document.write() after the DOM is ready then it actually replaces the entire page with the argument to document.write().
See DEMO.

Categories

Resources