jquery.redirect

v1.2.0

Published

a year ago

jQuery Redirect Plugin

Downloads

4,458

0High
0Medium
0Low

mgalante

jQuery.redirect

A simple HTTP POST and GET Redirection Plugin for jQuery

Easy to use
GET and POST requests
Compatible with jQuery, jQlite and Zepto.js
Supports nested objects and arrays

How does it work?

The function jQuery.redirect will create a form and populate it with the data (it supports nested values).

Installation

Using Bower

bower install jquery.redirect

Using NPM

npm install --save jquery.redirect

Using Yarn

yarn add jquery.redirect

Manual Installation

Just download jquery.redirect.js and include it in your html after jquery.js

<html>
<head>
    <!-- other headers -->
    <script src="jquery-XXX.js"></script>
    <script src="jquery.redirect.js"></script>
</head>
<body>
    <!-- your content -->
</body>
</html>

CDN

If you prefer, you can use RawGit CDN hosted version

Usage

/**
* jQuery Redirect
* @param {string} url - Url of the redirection
* @param {Object} values - (optional) An object with the data to send. If not present it will look for values as QueryString in the target url.
* @param {string} method - (optional) The HTTP verb can be GET or POST (defaults to POST)
* @param {string} target - (optional) The target of the form. If you set "_blank" will open the url in a new window.
* @param {boolean} traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array.  This allows arrays to work with MVC.net among others.
* @param {boolean} redirectTop - (optional) If its called from a iframe, force to navigate the top window.
* @param {boolean} shouldKeepBlankFields - (optional) If shouldKeepBlankFields is false, blank fields will be removed.
*/
$.redirect(url, [values, [method, [target, [traditional, [redirectTop, [shouldKeepBlankFields]]]]]])

/**
* jQuery Redirect
* @param {string} opts - Options object
* @param {string} opts.url - Url of the redirection
* @param {Object} opts.values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
* @param {string} opts.method - (optional) The HTTP verb can be GET or POST (defaults to POST)
* @param {string} opts.target - (optional) The target of the form. "_blank" will open the url in a new window.
* @param {boolean} opts.traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array.  This allows arrays to work with MVC.net among others.
* @param {boolean} opts.redirectTop - (optional) If its called from a iframe, force to navigate the top window.
* @param {boolean} opts.shouldKeepBlankFields - (optional) If shouldKeepBlankFields is false, blank fields will be removed.
*/
$.redirect(opts)

Example of use with Object

<html>
<head>
    <!-- other headers -->
    <script src="jquery-XXX.js"></script>
    <script src="jquery.redirect.js"></script>
    <script>
     jQuery(function($){
     //OnClick testButton do a POST to a login.php with user and pasword
      $("#testButton").click(function(){
       $.redirect("/login.php", {user: "johnDoe", password: "12345"}, "POST", "_blank");
      });
     });
    </script>
</head>
<body>
   <button id="testButton">Test Redirect</button>
</body>
</html>

Example of use with links

<html>
<head>
    <!-- other headers -->
    <script src="jquery-XXX.js"></script>
    <script src="jquery.redirect.js"></script>
    <script>
     jQuery(function($){
     //OnClick link do a POST to a login.php with query string
     // data (user and pasword in this case)
      $("body").on("click",".post-redirect", function(){
        $.redirect($(this).attr("href"));
      });
     });
    </script>
</head>
<body>
   <a href="/login.php?user=johnDoe&password=12345" class="post-redirect">Test redirect</a>
</body>
</html>

Running Tests with Yarn

yarn install
yarn test