How to redirect a page using JQuery

If you want to redirect from one page to another page when clicking on a button or any other element using JQuery you can do it in the following ways.

You can use

1. window.location.replace("url") or

2. window.location.href = "url"; or

3. $(location).attr('href', url);

Consider you have a button, and when you click on that button, you have to redirect to another page. For this we csn use the below code

<input type="button" id="redirect" value="click to redirect" />

The JQuery code is

1. Using window.location.replace

$(document).ready(function () {
    $("#redirect").click(function () {
    window.location.replace("http://google.com"); //page will redirect to google.com   
 })

2. Using window.location.href

$(document).ready(function () {
      $("#redirect").click(function () {
          window.location.href ="http://google.com";
      })
})

3. Using $(location).attr

 $(document).ready(function () {
        $("#redirect").click(function () {
           var url = "http://google.com"
           $(location).attr('href', url);
         })          
  })

It is better to use window.location.replace than using window.location.href, because replace() does not put the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco. If you want to simulate someone clicking on a link, use location.href. If you want to simulate an HTTP redirect, use location.replace.

In this way you can redirect from one page to another page using JQuery

Hope it helps you.

read our previous post : Check Given Date Greater than Current Date JavaScript/JQuery

For more posts on JQuery see here : JQuery

Read more...

Check Given Date Greater than Current Date JavaScript/JQuery

When you are building any form where user have to enter some date, then you may have requirement to allow only future dates / past dates.

So here i am going to explain how to check whether a user has entered date which is greater than today's date or less than today's date.

Conside you have a TextBox to allow user to enter a date and a Button to submit the data.

Enter Date(in mm-dd-yyyy format) : <input type="text" id="txtdate" />

        <input value="SUBMIT" id="btnsubmit" onclick="checkDate();"/>

The javascript/ JQuery code to validate the date is

 function checkDate() {
            var EnteredDate = document.getElementById("txtdate").value; //for javascript

            var EnteredDate = $("#txtdate").val(); // For JQuery

            var date = EnteredDate.substring(0, 2);
            var month = EnteredDate.substring(3, 5);
            var year = EnteredDate.substring(6, 10);

            var myDate = new Date(year, month - 1, date);

            var today = new Date();

            if (myDate > today) {
                alert("Entered date is greater than today's date ");
            }
            else {
                alert("Entered date is less than today's date ");
            }
        }

In this way you can check wether the entered date is Greater/Less than the current date.

Hope this post helps you.

For more posts regarding JavaScript/JQuery See this: Javascript/JQuery

Read more...

jQuery click event for dynamically created elements:

After scratching my head for 2-3 hours(before searching it on the internet) on this problem, i got to know the reason why this(.click()) doesn't work on dynamically created elements.

If you want to click on any  element(button/span/div/textbox/.....etc) using jQuery, we can do that by using  this code,

$('selector').click(function(){
//your code
})

This works fine if you have created that element already.

But, if you created your elements dynamically(using javascript), then this code doesn't work.
Because, .click() will attach events to elements that already exists. As you are dynamically creating your elements using javascript, it doesn't work.

For this you have to use some other functions which works on dynamically created elements. This can be done in different ways..

Earlier we have .live() function

$('selector').live('click', function()
{
//your code
});

but .live() is deprecated.This can be replaced by other functions.

 Delegate():

Using delegate() function you can click on dynamically generated HTML elements.

Example:

$(document).delegate('selector', 'click', function()
{
//your code
});

ON():

Using on() function you can click on dynamically generated HTML elements.

Example:

$(document).on('click', 'selector', function()
{
// your code
});

In this way you can click on dynamically generated HTML elements..

For more posts on JQuery visit: JQuery

Read more...