jQuery library loaded or not validation

Learning AngularJS; Guide for beginners:

• Learning AngularJS Part 1: Introduction to AngularJS

• Learning AngularJS Part 2: Model View Controller

If you are using jQuery on your page, then you should first validate that whether library file loaded or not because if your jQuery file is not loaded when you trying to run your jQuery code it will start throwing exception. So I would suggest you handle this situation instead of breaking page flow show your user a friendly message that required files are not loaded.

The reasons might be possible when your jQuery file not get loaded:

1. Path referencing a jQuery file is not correct.
2.  jQuery file name is renamed
3.  If you are using CDN, and user has blocked your CDN path.
4. Referenced CDN  server is down.

To handle this you should need to put a check before executing jQuery code, that validate whether file is loaded or not. If it is not available then you can prompt user the instructions to check or follow.

There are different ways to validate this:

if (window.jQuery) {  
    // jQuery library loaded  
} else {
    // jQuery library is not loaded
}

another way to check:

if (typeof window.jQuery == 'undefined') {  
    // jQuery library is not loaded
} else {
    // jQuery library is loaded
}

If  jquery.js library is not loaded, you can force to try again to load the file (but make sure you only using JavaScript as jQuery is not available at the time):

if (!window.jQuery || typeof window.jQuery == 'undefined') {
  // create script Element and append in head of HTML
  var jqElement = document.createElement('script'); 
  jqElement.type = 'text/javascript';
  // Path to jquery.js file, eg. Google hosted version
  jqElement.src = '/path-to-your/jquery.min.js'; //or reference an alternate CDN link
  document.getElementsByTagName('head')[0].appendChild(jqElement);
}

You might have noticed that we are only validating jQuery function being defined or not instead of $.

Reason is that this is a safe way to validate for jQuery file being loaded or not because you might using others libraries i.e, mootools.js then $ will conflict with these libraries. But if you are sure that you are not using others libraries that may conflict with jQuery then you can safely validate it by $ like:

if (typeof window.$ == 'undefined'){ 
  //file not loaded 
}

Similarly if you need to validate any jQuery plugin loaded or not you can easily validate it, as jQuery plugins are namespaces on the jQuery scope. Check that namespace for particular plugin exist or not:

if(window.jQuery().pluginName) {
     //run plugin dependent code
 }

If you want to add anything on this post please post your comments.

Kendo-UI Data-Source CRUD (Create,Retrieve,Update and Delete) Operations

You may also like to see:

1. JavaScript : Prototype Property and Inheritance  
2. JavaScript : Closures Concept with examples

Here I am going to create a little application for maintaining to-dos. This demo application allows the user to:

1. Add new To-do 
2. Done the To-do by clicking CheckBox 
3. Remove all Done To-dos 
4. Filter the To-dos for complete, Incomplete or All 

Create a template to render the datasource, It will contain three columns

1. CheckBox to show To-do status 
2.  To-do Id column 
3. To-do description

Here is the code:

Add HTML for taking user input to insert into datasource:

Add A Todo
     Enter a to do item description 
    

Add a button so we can delete item from datasource (It will be used within a table given below):

Create a table in which we going to render the templates datasource also contain a button to filter data(show complete,Incomplete or All To-dos), Delete button in it rows:

          
Done
          
ID
          
Task
       
    

          
       
    

         
Show:
         
   All Complete Incomplete 
       
         
Actions:
         
  
       
 

Get the Datasource template we define in first part:

// To Do Item Template
  // -------------------

  var template = kendo.template($("#template").html());

Add predefined data into datasource so it renders initially:

var tasks = [
    { id: 1, done: false, description: "do stuff"},
    { id: 2, done: false, description: "more stuff"},
    { id: 3, done: true, description: "this stuff to do"},
    { id: 4, done: false, description: "that stuff we need"}
  ];

Now create a datasource:

// Build the data source for the items
  var dataSource = new kendo.data.DataSource({ data: tasks });

Bind the change event to datasource so whenever a new item added to datasource its HTML automatically get refreshed:

// When the data source changes, render the items
  dataSource.bind("change", function(e) { 
    var html = kendo.render(template, this.view());
    $("#todos tbody").html(html);
  });

Load the items from task array to datasource using:

// Initial read of the items in to the data source
  dataSource.read();

Bind the add button so new item gets added to datasource and HTML get refreshed:

// Handle adding a new to do item
  $("#add").click(function(e){
    e.preventDefault();

    var $todo = $("input[name='description']");

    currentId += 1;
    dataSource.add({
      id: currentId,
      done: false,
      description: $todo.val()
    });

    $todo.val("");
    $todo.focus();
  });

Handle the remove button event:

// Handle removing cleared items
  $("#remove-done").click(function(e){
    e.preventDefault();

    var raw = dataSource.data();
    var length = raw.length;

    // iterate and remove "done" items
    var item, i;
    for(i=length-1; i>=0; i--){

      item = raw[i];
      if (item.done){
        dataSource.remove(item);
      }

    }
  });

Removing multiple items from datasource on checking the checkboxes and clicking Remove Done Items

// Handling clicking the "done" checkboxes
  $("#todos").on("change", ".done", function(e){
    var $target = $(e.currentTarget);
    var id = $target.data("id");
    var item = dataSource.get(id);
    item.set("done", $target.prop("checked"));
  });

We can also filter by hiding and showing some values, as we added three option in above table for filtration, so now on the basis of user selection of filter we will pass a value for done column of datasource it will filter the data source accordingly:

// Handle the filters for showing the desired items
  $("#filter").change(function(e){
    //get the dropdown selected value
    var filterValue = $(e.currentTarget).val();
    
    //set the filter for done column with operator equals to
    var filter = {
      field: "done",
      operator: "eq"
    };

    //set the filter value as per user selected dropdown value
    if (filterValue === "done"){
      filter.value = true;
    } else if (filterValue === "not done"){
      filter.value = false;
    } else {
      filter = {};
    }

    //now filter the datasource by passing this filter
    dataSource.filter(filter);
  });

Here is the working JsFiddle demo for reference or you can see Stackoverflow

You may also like to see:

1. JavaScript : Prototype Property and Inheritance  
2. JavaScript : Closures Concept with examples