Welcome to Simon Philp's Blog

jQuery Plugin – Fun with Query String Object

I have been working on an internal application which uses ajax and modal popups so that the user/manager/administrator doesn’t need to navigate to different pages to do different actions.  While this looked the part and done everything it said on the tin I ran into a problem. When a user acknowledged an event that needs authorisation a email is sent to the appropriate manager asking for action.  This email needed to contain a link that when the manager clicked it, the appropriate section was shown.

No point in re-inventing the wheel and writing individual pages so I had an idea about using querystrings to show the appropriate modal popup.  I found a nice little jQuery plugin called query object.  As you can see from the documentation it’s very easy to use.

If the link in the email is showing the manager a listing of say New Contacts added

http://app/view/manager/?showModal=LoadNewContacts

Within the document ready we could do the following:

   1:   $(document).ready(function() {

   2:         var section = $.query.get('showModal');       

   3:             var allowedFunctionsArray = ['LoadNewContacts()', 'AlertMe()'];           

   4:             if ($.inArray(section, allowedFunctionsArray) != -1) {

   5:                 eval(section);

   6:            }

   7:        });

   8:   

   9:        function AlertMe() {

  10:            alert('this is an alert');

  11:         }   

  12:         function LoadNewContacts() {           

  13:             $('#Contacts').toggle();

  14:         }

Line 2 assigns the local variable section with the value of the querystring “showModal”.  Notice live 5 with the eval(section).

“The eval() function evaluates a string and executes it as if it was script code.” – w3 Schools

The querystring value is the name of the function we want to call and the eval function makes this possible.  However, using the eval() function can lead to cross site scripting(XSS). I have added a check to only allow what I want to run, in this case only the following two functions can be called “LoadNewContacts” and “AlertMe”. What you’re not seeing is the fact that the files that have these functions are served via a secure http handler based on windows authentication and that checks are in place to make sure managers can only see/action what they’re meant to. Is simple and effective.

View demo of running different functions via querystring

• Normal blank page
• Demo of showing a div
• Alert the user

If you would like to see more posts in relation to jQuery please use the following link: View jQuery post listing

In my previous post I outlined how easy it was to grab text from a label tag associated to a form input element.

• jQuery – Fun with Radio Button lists, checkboxes and labels

I have quickly thrown together a demo page that shows a “tra la” aspect.

All I have done here is added in a couple of styles, a new radio list for the colour selection and an express delivery option.  The green div shown above the colour radio button list has it’s background colour controlled by whatever colour the user selects.

Change Background colour

Add an onclick event that captures the value in this case colour and passes it into a simple function:

   1:   $("input[name*='grpColour']").click(function() {

   2:              SetTShirtDivColour($(this).val());

   3:          });

The function is is very straight forward:

   1:  function SetTShirtDivColour(colour) {

   2:          $('#tshirtColour').css("background-color", colour).text(colour).css("color", "white").css("font-weight", "bold");

   3:          var border = "2px solid " + colour;

   4:          $('#ColourHolder').css("border",border);

   5:       }        

The above adds styles to the tshirtColour and ColourHolder div using jquerys ability to chain methods.  As you can see on line 2 the colour passed into this function is used when setting the background colour.

Adding a popup div

To add a quick popup I have attached an onclick event to the Yes radio item Express delivery.

   1:    $('#RadioDelYes').click(function() {

   2:              ShowHideDisclaimer();

   3:          });

Along with some css we can do the below. The ShowHideDisclaimer method just toggles the visibility of the background black div “transp” and the disclaimer div “ExpressDelivery”. I could of added a “you clicked Yes/No” to the disclaimer div but I wanted to show that you can attach the onclick event to a single item within a list.

  function ShowHideDisclaimer() {
        $('#transp').toggle();
        $('#ExpressDelivery').toggle();
        
    }

View live demo and see full source code.

Previously I have written about how to attach an onclick client event to a radio button list on databound and adding some flare to show what the user has selected.

• Add a javascript onclick event to a radio button list on databound
• Adding a Javascript onclick event to a Radio Button List Item on DataBound Pt 2

In this post I am going to use jQuery to attach the onclick events to a radio button list and to a group of checkboxes. 

Looking at the picture above. When the user selects one of the radio list items the message at the top is created outlining the items value and the text in associated label control. In this case “Glasgow Item” is in the label and “Glasgow” is the value of the control. With the checkboxes, everytime a user checks an item an unordered list item is created with the text within the associated label and the value of the item. As shown above 3 items have been selected that are shown in the listing.

The messages/list could be styled and used in many occasions giving any web form more “tra la”. In my next post I’ll put together a mock page that is styled up. A live demo of above picture can be seen here. Onto the code:

HTML:

   1:  <div id="Message"></div>

   2:  <ul id="listM"></ul>

   3:  <input id="grpLocation_0" type="radio" name="grpLocation" value="Edinburgh" />

   4:  <label for="grpLocation_0">Edinburgh Item</label>

   5:  <input id="grpLocation_1" type="radio" name="grpLocation" value="Glasgow" />

   6:  <label for="grpLocation_1">Glasgow Item</label>

   7:  <input id="grpLocation_2" type="radio" name="grpLocation" value="Aberdeen" />

   8:  <label for="grpLocation_2">Aberdeen Item</label>

   9:  <input id="grpLocation_3" type="radio" name="grpLocation" value="Scotland" />

  10:  <label for="grpLocation_3">Scotland Item</label>

  11:  <hr />

  12:  <input id="Radio1" type="checkbox" name="Location2" value="Edinburgh" />

  13:  <label for="Radio1">Edinburgh Item</label>

  14:  <input id="Radio2" type="checkbox" name="Location2" value="Glasgow" />

  15:  <label for="Radio2">Glasgow Item</label>

  16:  <input id="Radio3" type="checkbox" name="Location2" value="Aberdeen" />

  17:  <label for="Radio3">Aberdeen Item</label>

  18:  <input id="Radio4" type="checkbox" name="Location2" value="Scotland" />

  19:  <label for="Radio4">Scotland Item</label>

Script:

   1:  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

   2:  <script type="text/javascript">

   3:      $(document).ready(function() {

   4:          $("input[name*='grpLocation']").click(function() {

   5:              var defaultValue = $("label[for*='" + this.id + "']").html();

   6:              var defaultm = "You have chosen : ";

   7:              $('#Message').html('').html(defaultm + defaultValue + ' | Value is : ' + $(this).val());

   8:          });

   9:   

  10:          $("input[name*='Location2']").click(function() {        

  11:              GetCheckedValues();

  12:          });

  13:      

  14:      });

  15:   

  16:      function GetCheckedValues() {

  17:          $('#listM').html('');

  18:          $("input[name*='Location2']").each(function() {

  19:          if (this.checked == true) {

  20:              var defaultValue = $("label[for*='" + this.id + "']").html();

  21:                  $('#listM').append('<li>'+ defaultValue + ' | Value is : ' + $(this).val() + '</li>');

  22:              }

  23:          });

  24:       

  25:      }

  26:  </script>

Breaking down the script.

When the page is loaded jQuery adds the onclick events to the group of radio buttons. When a radio item is selected the script  finds the associated label (line 5) and grabs the text. Next couple of lines sets up the message div by displaying the text from the label and the items value $(this.).val().

The checkbox functionality differs as more than one item can be selected. When the page is loaded jQuery finds the checkboxes(line 10) and attaches “GetCheckedValues()” function to the onclick event. When the user checks/unchecks an item this function is called.  The function goes through each appropriate checkbox object (line 18) and if the checkbox is checked the label text and the value is added to the unordered list (listM).

I would thoroughly recommend the following book if your looking to learn jQuery : jQuery in Action by Bear Bibeault and Yehuda Katz.

UPDATE: New Post - jQuery – Revisit - Fun with Radio Button lists, checkboxes and labels

Technorati Tags: jquery