Develop Reference

$(document).ready(function () { ... won't fire

I have the following code at the end of one of my Views:
#section Scripts {
<script type="text/JavaScript">
$(document).ready(function () {
alert("!!!");
});
</script>
}
What ever I do, I can't get it to fire. I have checked and further up in the code JQuery is included. Using the suggestion here I changed my code to the following to confirm that jquery was correctly loaded. This gives the 'Yeah!' alert when loading the page.
#section Scripts {
<script type="text/JavaScript">
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
}
The end of the source in my page looks like:
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/breakpoints.js"></script>
<script src="/Plugins/jquery-unveil/jquery.unveil.js"></script>
<script src="/Plugins/jquery-fademenu/jquery.fademenu.js"></script>
<script src="/Plugins/jquery-block-ui/jqueryblockui.js"></script>
<script src="/Plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="/Plugins/bootstrap-select2/select2.js"></script>
<script src="/Plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="/Plugins/dropzone/dropzone.js"></script>
<script src="/Scripts/core.js"></script>
<script type="text/JavaScript">
$(document).ready(function () {
alert("!!!");
});
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"6301d560dc274f4ea5ec24b8e0c2a19f"}
</script>
<script type="text/javascript" src="http://localhost:50280/1cd42285f06243669b1fd5837f1f05c3/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
I can't work out where I am going wrong...

if this coode works properly
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
and this code doesn't :
$(document).ready(function () {
alert("!!!");
});
your likely problem is that there is a conflict with the dollar sign $
I would type out jQuery instead of using the dollar sign , or of course you can do something like this:
var j = jQuery.noConflict();
then you can do use the j where you used to use $
OR... there is simply just an error in the console that you still have not responded about , if that is the case I will update answer
EDIT::
The reasons that you code was not executing was because javascript is weird in the sense that if there is an error anywhere in the block of javascript code then nothing below it will be executed. That is why I asked if there were any console error's. Checking the console is the first step to solving any javascript error.

remove #section Scripts block put script block only and try... if not then remove all js use only jquery and try it will definatly. now add one by one script and find one which is conflicting. .

Calling JQuery function from xhtml in external js file

I have a jquery function defined in an external js file :
myJquery.js
(function($) {
$.fn.test = function (options) {
//Extended default options
var opts = $.extend({
chars: 0
}, options);
...doSomething...
})(jQuery);
Inclding this file in xhtml as:
<script type="text/javascript" src="_/js/myJquery.js"/>
and trying to access as:
$(document).ready(function() {
$("input.testClass").each(function() {
$(this).test({
chars:10
});
});
});
But getting js error saying 'test' function not found.

Your test function is scoped to the external file space, not the global environment. If you are sure that jQuery has command of the $ then append your function without the function($) wrapper.
EDIT: while the above may still be relevant for others ... it does work fine (at least for just showing the alert) with the } in place:
external file inlcuded with <script type="text/javascript" src="testing.js"></script>
(function($) {
$.fn.test = function (options) {
//Extended default options
var opts = $.extend({chars: 0}, options);
alert('boo: '+opts.chars);
}
})(jQuery);
in page:
<script type="text/javascript">
$(document).ready(function() {
$("h1").each(function() {
$(this).test({
chars:10
});
});
});
</script>

Jquery TypeError: $ is not a function

I got this script:
<script>
$(document).ready(function () {
$('a[#href^= ""] img').parent().click(function () {
var linkz = $(this).attr("href");
if(linkz.toLowerCase().indexOf("http: //www.website.com") >= 0) {
window.open($(this).attr("href"));
return false;
} else {
window.open("http://www.website.com/p/img.html?img=" + $(this).attr("href "));
return false;
}
});
});
</script>
To open all images in a new page passing the image url in the new link. but i'm getting
TypeError: $ is not a function.
I've tried to add jQuery(document) instead of the $(document) but then i got the
$('a[#href^=""] img') TypeError: $ is not a function
here.

Either you didn't include jQuery, or else you ran noConflict() and it released control of $.
http://api.jquery.com/jQuery.noConflict/
If you used noConflict, you just need to use jQuery() throughout, including jQuery('a[#href^=""] img').

It looks like you're not including jQuery correctly as the browser doesn't know what $ is. Make sure you include something like this in <head> to include jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

you havent added the jquery add this at <head></head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
if you are testing locally , and you have a llow bandwith , then download the script one time **
http://code.jquery.com/jquery-1.9.1.min.js **to your folder and
use <script src="jquery-1.9.1.min.js"></script>

Try this;
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
</script>
Or in your case:
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
$('a[#href^= ""] img').parent().click(function () {
var linkz = $(this).attr("href");
if(linkz.toLowerCase().indexOf("http: //www.website.com") >= 0) {
window.open($(this).attr("href"));
return false;
} else {
window.open("http://www.website.com/p/img.html?img=" + $(this).attr("href"));
return false;
}
});
}
$(document).ready(readyFn);
})(jQuery);
</script>

How can I delay document.ready until a variable is set?

I am doing QUnit testing in an IFRAME and have a recursive JavaScript function that loads all of the scripts from the parent page into the IFRAME before starting QUnit. This works great. My problem is that some of our scripts use document.ready to make stuff start.
Something such as:
$(document).ready(function () {
// blah
});
to do do their work. I'd prefer to not change production code just to account for tests and I don't want these production scripts to think the IFRAME document is "ready" until every scripts is loaded.
How I can delay "document.ready" itself?
Here is my pseudocode to give you an example to work from:
scripts[0] = "/foo/bar.js";
scripts[1] = "/blah/blah.js";
function RecursiveScriptStart(){
// I want to set document.ready = false right here!
if(scripts.length == 0) {
QUnitStart();
return;
}
RecursiveScriptLoader(0, scripts);
}
function RecursiveScriptLoader(currentScriptID, scripts) {
$.getScript(scripts[currentScriptID], function () {
if (currentScriptID == (scripts.length - 1)) {
QUnitStart();
}
else {
RecursiveScriptLoader(currentScriptID + 1, scripts);
}
});
}
function QUnitStart() {
// I want to set document.ready = true right here!
QUnit.stop();
QUnit.start();
}
The actual code is similar, but involves a jquery selector populating the array "scripts[]" with JavaScript tag "src" properties.
Thanks!

If you're using jQuery 1.6+ then you can use holdReady. Just set $.holdReady(true) at the top of your script and then in the beginning of QUnitStart set $.holdReady(false).

This code worked for me; To invoke $(window).load() inside $(document).ready()
$(document).ready(function() {
$(window).load(function() {
// this code will run after all other $(document).ready() scripts
// have completely finished, AND all page elements are fully loaded.
});
});
This method would preserve execution order in all cases by making sure that your run-last code is not passed to $(window).load() until all $(document).ready() scripts have completed.

If your using jQuery 1.6 or higher you can use holdReady to delay the ready event being fired.
For 1.4.3 or higher you can use $.readyWait property to delay the ready event, Demo Here (not my code)
if your interested in figuring out how jquery handles the ready event search for the line
jQuery( document ).trigger( "ready" ).unbind( "ready" );
in your developer copy of jquery.js

Just to fill in where others left off, you may use this load order in your test.html
<script src="jquery.js"></script>
<script src="qunit.js"></script>
<script>$.holdReady(true);</script>
<script src="theThingIwantToTest.js"></script>
<script src="theTestScript.js"></script>

<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.setInterval(function() {
console.log(document.getElementById('waitForMe'));
}, 500);
</script>
</head>
<body>
Before
<script type="text/javascript" src="/php-with-sleep.php"></script>
After
<div id="waitForMe"></div>
</body>
</html>
Extended test, I have tested RequireJs domReady plugin
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="/vendor/require/require.js"></script>
<script type="text/javascript">
window.setInterval(function() {
console.log(document.getElementById('waitForMe'));
}, 500);
require.config({
baseUrl: '/',
paths: {
domReady: 'vendor/require/plugin/dom-ready',
jQuery: 'vendor/jquery'
},
shim: {
async: {
exports: 'async'
},
jQuery: {
exports: 'jQuery'
}
}
});
require(['domReady', 'jQuery'], function(domReady, $) {
console.log('jQuery loaded');
$(function() {
console.log('jQuery dom ready');
});
domReady(function() {
console.log('domReady requireJs plugin, callback');
})
});
require(['domReady!', 'jQuery'], function(domReady, $) {
console.log('domReady! (no callback)');
});
require(['domReady', 'jQuery'], function(domReady, $) {
console.log('domReady plugin loaded');
});
</script>
</head>
<body>
Before
<script type="text/javascript" src="/php-with-sleep.php"></script>
After
<div id="waitForMe"></div>
</body>
</html>

Java scripts conflict on my home page

<script type="text/javascript" src="jquery-1.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
'2.jpg': { caption: 'A Ceibu tree.' },
'3.jpg': { caption: 'The view from Volcano Maderas.' },
'4.jpg': { caption: 'Beer and ice cream.' }
};
var myShow = new Slideshow('show', data, {controller: true, height: 400, hu: 'images/', thumbnails: true, width: 500});
});
//]]>
</script>
<script type="text/javascript">
$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
});
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

jQuery's no conflict is a great choice. I'd suggest though doing something like this:
<script language=javascript>
var $j = jQuery.noConflict();
</script>
That's going to give you access to jQuery's functionality using $j in place of $. I use this method to include jQuery in most pages via GreaseMonkey. I've got a custom copy of jQuery that includes the above call at the end. I use GreaseMonkey to insert a link to that script into the head of web pages so I can investigate object properties using $j without affecting other libraries that might be present in the page and using $.

After including jQuery, you should call $.noConflict(). This will remove the "$" from the global namespace:
<script type="text/javascript" src="jquery-1.js"></script>
<script>
$.noConflict();
</script>
<script type="text/javascript" src="mootools.js"></script>
At this point, you should use jQuery instead of $ if you want to call jQuery code. Or you could use a trick by wrapping the $ symbol in a closure:
<script type="text/javascript">
jQuery(function($) {
// here you can use $ instead of jQuery
});
</script>