adnnor

Showing posts with label JQuery. Show all posts

Monday, April 7, 2014

Possible reasons of jQuery library failed to load

Possible reasons of this error is one of the following

Path is incorrect or make sure you are typing the extension of file .js, did you ignored .js in the last as there is already dot before min (minify) so some peoples type jquery-1.7.min instead jquery-1.7.min.js. Or check that file is exists with the same name, it is jquery.js or jquery.min.js. As well as check the version of the file. One time I faced the same problem, mentioning jquery-1.2.min.js instead jquery-1.3.min.js.

If you are using CDN (Content Delivery Network), make sure the server of content provider is up and running.

Your jQuery library is not conflicting with other javascript libraries. Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's $ is an alias for jQuery. So try with jQuery instead $ sign or use jQuery.noConflict() or $.noConflict() before initializing ready() function. Go here to know how .noConflict() works.

Are you validating jQuery library or jQuery plugin with certain jQuery version, if so, then remember plugins developed for older jQuery versions might not function properly with latest version of jQuery. If you are somewhat depending on old jQuery plugin then use jQuery migrate plugin. Get detailed information about jQuery migrate plugin here, or pass comments to ask if you failed to get pie.

Check typography. Copy and past following lines into notepad, save as html and run, if it works (prompts with "hurray") it mean one of above solutions will work for you otherwise hmmm ,, seems annoying in modern era but i suggest you to check your browser's javascript settings, is it enabled.

<title>Validating jQuery</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
alert("hurray");
});
</script></head><body></body>

Wednesday, March 26, 2014

Uncaught TypeError: Property '$' of object [object Object] is not a function

If you are getting this error in WordPress then remember that WordPress loads jQuery with noConflict mode or any other application which loads with noConflict mode cause this error, you will no longer able to use jQuery shortcut ($) any more in this mode. On this point you have to use jQuery (case sensitive) instead jQuery shortcut $ (dollar sign) and if you want to use $ sign in code block than must pass $ (dollar sign) as function parameters;

jQuery(function($) {

// now are able to use $ sign or jQuery

});

Tuesday, March 25, 2014

Use other libraries with jQuery using $.noConflict()

Just like jQuery, many other Javascript libraries uses $ (dollar sign) as a function. Using other Javascript library on the same page might cause error. So on the safe side, jQuery offers jQuery.noConflict() or $.noConflict; it restores all old references which are saved during jQuery initialization.

How to use it? Well, simply put jQuery.noConflict() at the top of your script. If you are experiencing "Uncaught TypeError: Property '$' of object [object Object] is not a function" error in console; its mean $ (dollar sign) is conflicting with other javascript library, put $.noConflict() on the top of the script. Still same error? no problem, in noConflict mode you cannot use shortcut of jQuery ($) use jQuery and pass $ (dollar sign) as function parameter. By including the $ in parenthesis after the function call you can then use this jQuery shortcut ($) within the code block.

jQuery(document).ready(function($) {
// your code here with $ sign
});

or

jQuery(function($) {
// your code here with $ sign
});

Wednesday, July 4, 2012

Restrict file extension using JQuery

$(function() {
$("input[type=button]").click(function() {
if (!$("input[type=file]").val()) {
alert("Select file to Upload !");
return false;
}
var allowedTypes = ["jpg", "jpeg", "gif", "png"];

var path = $("input[type=file]").val();
var ext = path.substring(path.lastIndexOf('.') + 1).toLowerCase();

if (allowedTypes.lastIndexOf(ext) == -1) {
alert("Select valid file i.e.\n" + allowedTypes);
}
alert("Valid file selected");
});
});

Sunday, July 1, 2012

JQuery checkboxes implementation

I found many queries about "how we will make multiple check/unchecked button using JQuery, as well as how to count selected check boxes and then delete the selected records?". Its too easy!

Before working on this example I want to say, always follow the documentation of the product because you will found answers for many questions. Searching on internet not just take your a lot of time but you make yourself addicted of copy and paste.

$(function() {
$("input[rel=main]").click(function() {
$("input[rel=records]").attr("checked", this.checked);
var c = $("input[rel=records]:checked").length;
$("div > span").text((c > 1) ? c + " records are selected" : c + " record selected");
});

$("input[rel=records]").click(function() {
var c = $("input[rel=records]:checked").length;
$("div > span").text((c > 1) ? c + " records are selected" : c + " record selected");

if ($("input[rel=records]").length == $("input[rel=records]:checked").length) {
$("input[rel=main]").attr("checked", "checked");
} else {
$("input[rel=main]").removeAttr("checked");
}
});

$("input[type=button]").click(function() {
var n = $("input[rel=records]:checked").length;
if (n <= 0) {
alert("Select at least one record to delete");
} else if (n >= 1) {
var answer = confirm("Are you sure you want to delete " + n + " record(s)?");
if (answer) {
$("input[rel=records]:checked").parent().hide();
$("input[type=button]").after((n > 1) ? " " + n + " records are deleted :)" : " " + n + " record deleted :)");
$("input:checkbox").removeAttr("checked");
$("div > span").text("");
}
}
});
});

Friday, June 29, 2012

Multiple checkbox selection using JQuery

JQuery multiple checkbox selection is quite easy, simply put the following code and amend according to your choice

$("#maincheckbox").click(function() {
    $("input[type=checkbox]").attr("checked", this.checked);
});
 
$("input[rel=default]").click(function(){
    if($("input[rel=default]").length == $(".case:checked").length) {
        $("#maincheckbox").attr("checked", "checked");
    } else {
        $("#maincheckbox").removeAttr("checked");
    }
});

Wednesday, June 27, 2012

JQuery remove classes using wildcard

Normally you can remove class by giving its name like

$("element").removeClass("className");

... you can provide more than one class like

$("element").removeClass("className otherClass thirdClass");

but there is no built-in function in JQuery to remove classes using wildcards.

you have three classes color-red, color-blue, color-green you want to remove all three classes without providing the name of all.

Try following technique

$("element").attr("class",
      function(pos, classes){
      return classes.replace(/\bbox-\S+/g, "");
});