Critical Developers

Programmers Knowledge Base

jQuery Get Querystring and Make the document readonly with handling undefined querystring

 



// For eg. lets the url be  http://somedomain.com/editpage.html?readmode=yes
// Get QueryString value  from jQuery.parseQuerystring plugin and make all elments in "#container" div disabled or readonly.

    var qstr = $.parseQuerystring();                  // assign nvpair object to qstr variable(Pls refer plugin as below)
    var $data = $("#container");
   // we can access querystring variable in 2 ways:- qstr.readmode OR qstr["readmode"]
    if (qstr.readmode != undefined) {                 // check if querystring is not present or undefined
        if (qstr.readmode.length != 0) {              // check length of querystring value if querystring is present
            $data.find(":input").each(function () { $(this).attr("disabled", true); $(this).addClass("clsreadonly"); });
            $data.find(":button,:submit,:reset").each(function () { $(this).hide(); });
            $data.find("#actiondiv").append("<input type='button' value='Back' onclick='javascript:history.back();' class='buttonclass' style='width:60px;' />");
        }
    }

/* Styles */

.clsreadonly{background:transparent; border:0 none;}
#actiondiv{width:100%; text-align:center;}

/* Styles End */


"#actiondiv" is a div element in which I have kept my submit and reset buttons, and to make the document disabled I am hiding all buttons
on document and finally adding just a "Back" button which will be enabled as it is appending after hiding all buttons.
Note:- we can also use $(this).attr("readonly", true); but it doesn't remove focus from element and we need to add some more script
            like onfocus=blur();

Note:- To hide/show the button element, if possible use server side script as you all know as per today
users/visitors have become very creative by using browsers add-ons like Firebug, Yslow etc.


 /**
* jQuery.parseQuerystring (Plugin)
*
* Utility to dissect the querysting and return a name/value pair object
*
* Copyright (c) 2011 Paul Gueller paul(dot)gueller(at)gmail(dot)
com
* Dual licensed under MIT and GPL.
* Date: 26-April-2011
*
* @author Paul Gueller
* @version 1.0.2
*
* @id jQuery.parseQuerystring
* @param null
* @return object name/value pairs
*
* @example
*  url: http://somedomain.com/index.html?id=5&sort=asc
*    - $.parseQuerystring().id == 5
*  - var qs = $.parseQuerystring();
*  - qs.sort == "asc"
*
*/

jQuery.extend({
    parseQuerystring: function () {
        var nvpair = {};                    // Declare Object
        var qs = window.location.search.replace('?', '');
        var pairs = qs.split('&');
        $.each(pairs, function (i, v) {
            var pair = v.split('=');
            nvpair[pair[0]] = pair[1];
        });
        return nvpair;
    }
});

Recommendation:- Use  jQuery.parseQuerystring (Plugin)
 jQuery.parseQuerystring (Plugin) Link:-
http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/

 

Make the html div element clickable without any 1px spacer image

Make the html div element clickable without any 1px spacer image

HTMLIZATION:-

<div class="clickme" rel="targetpage.aspx">
    <h3>I am a Clickable Div</h3>
</div>

I am using the “rel” attribute of div for target page url which will be used in script onclick of div.

CSS:-

.clickme
{
background:#ffffff;
border:solid 1px #b5b5b5;
width:350px;
height:180px;
margin:4px;
padding:4px;
overflow:hidden;
cursor:pointer;   /* to show that it has some link */
}

JavaScript/jQuery:-

Make sure you are using jQuery otherwise convert the below script into javascript.

        <script type="text/javascript">
            $(".clickme").click(function () {
                window.location = $(this).attr("rel");
                return false;
            });   
        </script>

Hope it helps you to grow your creativity… :-)