Category Archives: jquery

Test if jQuery is loaded

So to test if jQuery is loaded or not we can use 2 methods.

Method 1:
[javascript]
if (window.jQuery) {
// jQuery is loaded
} else {
// jQuery is not loaded
}
[/javascript]
Method 2:
[javascript]
if (typeof jQuery == ‘undefined’) {
// jQuery is not loaded
} else {
// jQuery is loaded
}
[/javascript]
Load jQuery:
[javascript]
if (!window.jQuery) {
var jq = document.createElement(‘script’); jq.type = ‘text/javascript’;
// Path to jquery.js file, eg. Google hosted version
jq.src = ‘/path-to-your/jquery.min.js’;
document.getElementsByTagName(‘head’)[0].appendChild(jq);
}
[/javascript]
NOTE:
Here we are checking for jQuery function being defined or not. This is a safe way to check for jQuery library being loaded. In case you are not using any other javascript libraries like prototype.js or mootools.js, then you can also check for $ instead of jQuery.

.getSript – jquery loaded event

[javascript]
$(document).ready(function()
{
$(‘.table’).tableAddCounter();
$.getScript(“http://code.jquery.com/ui/1.9.2/jquery-ui.js”).done(function(script, textStatus) {
$(‘tbody’).sortable();
$(“.alert-info”).alert(‘close’);
$(“.alert-success”).show();
});
});
[/javascript]

Disable a Hyperlink using JQuery


$('.my-link').click(function(e) { e.preventDefault(); }); 

You could use:

$('.my-link').click(function(e) { return false; });


$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});


$('.my-link').bind('click', false);

And to unbind / re-enable:

$('.my-link').unbind('click', false);

JQuery Mobile Framework: How to turn off the Ajax processing the links and form

  	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  	
  	    <script type="text/javascript" >

    		$(document).bind("mobileinit", function(){
			$.mobile.ajaxEnabled = false;								
		});

    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

The order of code inserting is important.
The AJAX disabling code must prior to initializing the mobile framework.

How to set div to center of the screen

<div id='div_id'>
Blah! Blah!
</div>

To set the div above to the center we can use next JQuery code.

jQuery.fn.center = function () {
    var w = $(window);
    this.css("position","fixed");
    this.css("top",w.height()/2-this.height()/2 + "px");
    this.css("left",w.width()/2-this.width()/2  + "px");
    return this;
}
$("#div_id").center();

How to determine if checkbox is checked

// First way 
$('#checkBox').attr('checked'); 

// Second way 
$('#edit-checkbox-id').is(':checked'); 

// Third way for jQuery 1.2
$("input[@type=checkbox][@checked]").each( 
    function() { 
       // Insert code here 
    } 
);
// Third way == UPDATE jQuery 1.3
$("input[type=checkbox][checked]").each( 
    function() { 
       // Insert code here 
    } 
);

// In his comment Andy mentions that the 3rd method
// does not work in Firefox 3.5.2 & jQuery 1.3.2