Category Archives: Jquery

Obtain query string in jquery

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

For example, if you have the URL:



http://www.example.com/?me=myValue&name2=SomeOtherValue


This code will return:    


{
    "me"    : "myValue",
    "name2" : "SomeOtherValue"
}


and you can do:    


var me = getUrlVars()["me"];
var name2 = getUrlVars()["name2"];





			

			
						

	
	


				
					


	

					

							

							
jQuery – Correct way to check if object is null or Empty

			


		

				


jQuery – Correct way to check if object is null or Empty













				
			






Yesterday, I ran into a interesting and frustrating situation where for couple of minutes I was not able to find out what’s wrong with my code. But I learned something new. Let me first give you an idea about what I was working on. I was creating a function, which first checks of div element object. If not found, then create a new div element and insert in DOM otherwise just update the html of div.
Below is the jQuery code.












01
$(document).ready(function () {














02
    function UpdateHTML()














03
    {














04
        var $dvElement = $('#dvElement');














05
        if (!$dvElement)














06
        {














07
            $("<div />", {














08
                id: 'dvElement',














09
                html: 'Added Just now'














10
            }).appendTo('body');














11
        }














12
        else














13
            $dvElement.html('Updated HTML');














14
    }














15
});












When this function is called, it does nothing. In the first call, it should create a div but it was not. When I debugged, I found that it is always going in else part of the condition. The condition (!$dvElement) always returning false. Wooo..Confused…
Every time when we pass a selector to jQuery function, it will always return a jQuery object. So whether the div exist or not, an object is returned. And when we test the jQuery object inside if statement, it will always be TRUE.
To fix the above code, we need to find out whether the object is empty. And there are 2 ways to fix this.


    

  • length property: Returns number of elements in object
    • 

  • $.isEmptyObject(Object): Returns true if the object doesn’t define any methods or properties.
    • 



So fix is,












01
$(document).ready(function () {














02
    function UpdateHTML()














03
    {














04
        var $dvElement = $('#dvElement');














05
        if (!$dvElement.length)  // OR !$.isEmptyObject($dvElement)














06
        {














07
            $("<div />", {














08
                id: 'dvElement',














09
                html: 'Added Just now'














10
            }).appendTo('body');














11
        }














12
        else














13
            $dvElement.html('Updated HTML');














14
    }














15
});

















		
	
			

	
	


				
					


	

					

							

							
Preserve Javasript State of controls after postback asp.net

			


		

				
While working with jquery controls like dynatree, chosen etc, you might have faced problems like once have set init event to controls through jquery and then postback (even in update panel), the control is reset by asp.net .This can be preserved upon postback by using simple jquery of asp.net.
The trick is to add an event ‘endRequest()’ event and initialize the jquery control here.
Below is an example:


    <script type="text/javascript">
        $(function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, e) {
                //initialize your control here
                //example of chosen select
                $(".chosen-select").chosen({ max_selected_options: 5 });
            });
        });
    </script>