Nice file upload interface using Jquery

We all know how to upload a file using html form. But I thought to improve that interface a bit using JQuery (Of course I used CSS but i'm writing about JQuery part).

So here is the usual html file uploading interface

I wanted to show a button to choose file and After choosing display a button to upload that file. Chosen file name also displayed in a nice way. As follows

Adding a partial view with JQuery get() method

When we want to add partial views there are a lot of ways to implement. One easy way is using get method provided by JQuery.

Here is a simple script written in JavaScript to change partial views according to user inputs.

             document.getElementById("GetViewsbyPageId").onchange = function () {
                var pageId = $("#GetViewsbyPageId").val();
                if (pageId != 0) {
                    $("#LoadViewsbyPageId").show();
                  //sending a get request
                    $.get('page'+pageId+".html",function (data) {
                        /* data is the pure html returned from get method, load it to your page */
                        $('#LoadViewsbyPageId').html(data);      

                    });
                } else {
                    $("#LoadViewsbyPageId").hide();

                }
             }        

Pop up window with JQuery-UI Dialog() method

Some times it is better to offer popup windows rather than changing the whole page in our web applications. But It is quite difficult to implement it with pure JavaScript, HTML and CSS.

Pop up windows can be easily implemented using JQuery-UI library. Most interesting thing is,
it is..

• Movable
• Re-sizable

JQuery : Adding DateTime picker for your form

Adding a date picker to your web form is a handy way instead of just typing dates.

It is simple.

1. Loading necessary JavaScript and CSS files
   

   
   <!-- Load jQuery from Google's CDN -->
       <!-- Load jQuery UI CSS  -->
       <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
       
       <!-- Load jQuery JS -->
       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
       <!-- Load jQuery UI Main JS  -->
       <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
   

How to use JQuery Form Filters : Examples

JQuery Form filters let you deal with form elements in the DOM easily. For more information and usage about JQuery form filters please refer this post.

This post written by me has more about jquery form filters in details.
In this tutorial we will demonstrate how to select form elements with Jquery filters and apply some CSS changes for it.

Usage of JQuery Form Filters

selecting form elements can be done with JQuery form filters easily. They work like other selectors but starts with colon(:) like regular filters. There are 5 more types of filters and please refer this post about Jquery basic filters for details about other filters.

Here is a list of usage of JQuery Form Filters

JQuery Child Filters

Child filters are one type of filters among 6 different types of filters That provide by JQuery. Please refer this post for details about other JQuery Filters.

With JQuery child filters you can refine by examining the relationship each element has with its parent elements.

Here is the list of usage of child filters.

JQuery Content Filters Visibility Filters

There are 6 different types of filters in JQuery to provide more control over selecting elements. Usage about content filters and visible filters will be discussed in this post.

These filters provide ability to examine the content of selected elements or their visibility property to determine whether they should be included or excluded from the final set.

How to use JQuery attribute filters : Examples

JQuery filters make our work easy by providing a great control over selecting DOM elements.
In this post, examples for using JQuery attribute filters will be demonstrated.
Refer this post for get more details about JQuery attribute filters and their usage.

Lets see some examples of how to select elements with JQuery attribute filters.

Usage of JQuery attribute filters

Filters work with selectors and provide a great control for selecting the elements in DOM. So basically it makes easy our work for selecting elements in DOM.

JQuery filters fall in to six different categories. 

1. Basic filters
2. Content filters
3. Visibility filters
4. Attribute filters
5. Child filters
6. Form filters

In this post is about Attribute filters.

How to use Jquery Basic filters

JQuery filters provide a great control for selecting the elements in DOM as we discussed in earlier post.
For get a better understand about filters read more about JQuery flters from this link.

In this post lets see how to select elements using JQuery filters and applying simple CSS on them

Same HTML file used in previous tutorial for JQuery selectors will be used in this tutorial as well.

Lets get in to work.

here are the JQuery code snippets for filtering DOM elements

1. Get the first element from a returned set
   $("p:first").css("border","3px solid red");
   This will get the first paragraph element and put a red border around it


2. Get the last element from a returned set
   $("p:last").css("border","3px solid red");
   This will get the last paragraph element and put a red border around it


3. Get the odd elements from a returned set
   $("p:odd").css("border","3px solid red");
   This will get the odd paragraph elements and put red borders around them


4. Get the even elements from a returned set
   $("p:even").css("border","3px solid red");
   This will get the even paragraph elements and put red borders around them


5. Get the elements past an index from a returned set
   $("p:gt(1)").css("border","3px solid red");
   This will get the paragraph elements indexed as greater than 1 and put red borders around them


6. Get the element equal to an index from a returned set
   $("p:eq(1)").css("border","3px solid red");
   This will get the paragraph element indexed as equal to 1 and put red borders around it


7. Get the element not equal to an index from a returned set
   $("p:not(p:eq(1))").css("border","3px solid red");
   This will get all the paragraph elements not indexed as 1 and put red borders around them

Try these simple JQuery selectors and make easy manipulating your DOM.

Please add a comment if you have some thing to add or you are not clear with something.

Basic JQuery filters

Filters work with selectors and provide a great control for selecting the elements in DOM. So basically it makes easy our work for selecting elements in DOM.

JQuery filters fall in to six different categories. 

1. Basic filters
2. Content filters
3. Visibility filters
4. Attribute filters
5. Child filters
6. Form filters

In this post I'm going to discuss about Basic JQuery filters. It provides basic filtering like getting first, last and even and odd numbered items in a returned set.

A List of usage of JQuery filters.

Filter	Purpose
:first	selects only the first instance of the selector's returned set
:last	selects only the last instance of the selector's returned set
:even	selects only even numbered elements of the selector's returned set
:odd	selects only odd numbered elements of the selector's returned set
:eq(n)	filters out elements that are positioned at the given index
:gt(n)	include elements that are past the given index
:lt(n)	include elements that are before the given index
:header	select all header elements (H1, H2, H3 etc)
:animated	selects all elements that are currently being animated in some way
:not(selector)	includes elements that do not match the given selector

This is just a list of what can be done with JQuery filters.

Please refer this post for practical examples of usage of JQuery basic selectors.

How to use JQuery Scroll() method for detect scroll

It is easy to detect scroll events using JQuery scroll() method.

from this link you can find another way of achieving this task.

Completed project can be download from here.

Here is the JavaScript method for detect scroll of page and do some tasks according to the scrolling position and scrolling movements.


    $(window).scroll(function() {
        if($(window).scrollTop() > 0) {
           $('#maincontent').css("background","gray");
        } else {
            $('#maincontent').css("background","white");
            alert("Now you are in the top");
        }
    });


In this code it will change the color of div that has a ID of "maincontent" when user scrolled and in the bottom of the page.

It will alert a message when user comes to the top of the page.

Scroll detection can be used to enhance user experience with your web page in numerous ways.
feel free to add a comment if you have anything unclear of something to add.

How to detect scroll action using JavaScript

To fire up different actions in a web page when someone scroll on it we need to detect scroll events on the page.

Completed project can be Download from here.
In this tutorial color of a div(div with ID "maincontent") is changed when a user is scrolling the page,

Here is how it can be done.

1. Add onscroll attribute in the element which you need to detect scroll on.
   ex:<body onscroll="bodyScroll();"></body>


2. Declare a JavaScript variable to -1. (In this tutorial scrollTimer)


3. Implement the bodyScroll() function
      function bodyScroll() {        
        $('#maincontent').css('background-color','lightGrey'); 
        
        if (scrollTimer != -1)
            clearTimeout(scrollTimer);

        scrollTimer = window.setTimeout("scrollFinished()", 300);
    }


4. Implement the scrollFinished() method.
       function scrollFinished() {
       $('#maincontent').css("background","white");
    }

Note: In the project I have added extra reference to bootstrap  for easiness of making the UI.

This post shows hot do this using JQuery scroll() method.

Please add a comment if this was useful to you or you have something to add

How to use basic JQuery selectors - Part II

This is  the part II of basic JQuery selectors tutorial. You can read Part 1 get example test html file from previous post.
In this post I'm going to talk about retrieve elements with hierarchical relationships using JQuery selectors.

JQuery heirarchical selectors

• $("p, li.b").css("border","3px solid red");
  This will get the paragraph elements and List elements that has class attribute "b" and putt a red border around them


• $("ul li.a").css("border","3px solid red");
  this is called descendent selector (for more details). This will get all the list elements has class "a" with in <ul> elements.


• $("ul+p").css("border","3px solid red");
  This will get the paragraph element next to <ul> element


• $("#list1 ~ p").css("border","3px solid red");
  This is called sibling selector(for more details). This will get the every paragraph element after element with ID of "list1"

Please feel free to add a comment if you have any problem or some thing to add.

How to use basic JQuery selectors

JQuery selectors are a great way to retrieve content form a page and manipulate the DOM. Its is far more easy to use than using plain browser DOM.

First lets see how to use JQuery selectors to retrieve content from a page and manipulate it.

Examples

<!DOCTYPE html >
<html>
<head>
 <title>Document</title>
 <script type="text/javascript" src="Scripts/jquery-1.11.3.js"></script>
 <script >
  $("document").ready(function(){
   //Your jquery code run when document is ready
  });
 </script>
 <style type="text/css">
  .a { color: Navy; }
  .b { color: Maroon; }
 </style>
</head>
<body>
 <ul id="list1">
 <li class="a">item 1</li>
 <li class="a">item 2</li>
 <li class="b">item 3</li>
 <li class="b">item 4</li>
 </ul>
 <p class="a">This is paragraph 1</p>
 <p>This is paragraph 2</p>
 <p class="b">This is paragraph 3</p>
 <p>This is paragraph 4</p>
</body>
</html> 

This is the code for the html file
In this tutorial we select the elements and put a red border around that element. lets see how to select elements with JQuery. Test following select methods by using codes in place where"Your jquery code run when document is ready" comment appears.

1. Get elements by type
   $("p").css("border","3px solid red");
   This will get all elements type of  "p" that is paragraph elements and put a red border around it. 


2. Get elements by ID name
   $("#list1").css("border","3px solid red"); This will get all elements that has ID of "list1" and put a red border around it


3. Get elements by class attribute
   $(".a").css("border","3px solid red");
   This will get all elements that has class name "a" and put a red border around it.


4. Get one type type of elements which has a particular class name
   $("p.b").css("border","3px solid red");
   this will get all the paragraph elements which has class attribute of "b".

NOTE:
You need to make sure that you have given correct path to your jquery.js file

Here is a more comprehensive list of JQuery selectors

Selectors and their uses. 

• tagname - Finds all elements that have type "tagname"
• #identified - Finds all elements that have ID of "identifier"
• .className - Finds all elements that have a class attribute of "className"
• tag.className - Finds all elements that have the type "tag" and a class attribute of "className"
• tag#id.className -  Finds all elements type of "tag" that has ID of "id" and a class attribute of "className"
• * - Finds all the elements on the page

For more JQuery Selectors refer this post as well

please add a comment if you have any questions or some thing to add to this post

How to make a simple AJAX call with JQuery

AJAX Stands for "Asynchronous JavaScript and XML".

Basically we use AJAX to change parts of our web page with loaded data from the server  without reloading the whole page. Google, YouTube, Facebook all use AJAX to display changing data.

What happen in AJAX is we can request HTML,TEXT, XML results from a server using HTTP GET or POST requests and load the response to selected HTML elements in our web page.
JQuery load() method can be easily used to make a AJAX call to server.

HTML code.

<!DOCTYPE html>
<html>
<head>
    <script src="Scripts/jquery-1.11.3.js"> </script>      
</head>
<body>
<div id="div1"> <h2> Let jQuery AJAX Change This Text </h2> </div>
<button>Get External Content</button>         
    <script>   
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").load("demo_test.txt");
            });
        });                    
    </script>     
</body>
</html>

When you click the button JQuery load() method will load the content of the file demo_test.txt to div element which has ID div1.

NOTE:

1. If your txt file need to load is not in the same directory as html file you have to give a relative path to the file in to the load method (eg: "Files/demo_test.txt")
2. If you don't have have a internet connection when you run this example you have  to manually download the JQuery and give the path to JQuery path.