Pure-Essence.Net » jQuery

jQuery read only elements

pureessence — Thu, 22 Sep 2011 00:47:40 +0000

There is a business requirement on a project I have at work to only allow a certain number of properties editable at a certain stage of the domain object’s life cycle. And like always, the properties defined to be editable could change in the future.

I already have a page that allows the user to edit all properties of the domain object, I really do not wish to duplicate that code. Please note that if you set an input element on a form as disabled, the value associated with the element will NOT be submitted via form post, that certainly is NOT what I’m looking for. I want the values of the *read only* fields still be submitted by the form but I just don’t want the user to edit the values. So I looked into using the readonly attribute in HTML. It’s complete crap.

For faqs.org:

It’s important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. In checkboxes, for example, you can check them on or off (thus setting the CHECKED state) but you don’t change the value of the field.

Basically it works half-hearted and most browsers (IE, FF) do not indicate (by default) that a field is readonly. So the users will probably be left wondering why they cannot edit the field.

I searched around for an alternative and found this wonderful jQuery plugin readonly. Even though I couldn’t get it to work right for my application, the idea behind it is genius. You basically put overlay layers on top of any input fields you wish to make read only. The plugin seems a bit outdated. Perhaps it doesn’t work well with the newer version of jQuery but the idea still works well. Therefore I implemented my own.

This implementation automatically makes all input fields read only unless the input field has the class excludeMeFromReadOnly. This is just my implementation for demonstration. I do not provide any support for this code. Use where you see fit.

CSS

.readOnlyOverlay { position: absolute; background-color: #666; opacity: 0.3; filter: alpha(opacity=30); padding: 0pt !IMPORTANT; margin: 0pt !IMPORTANT; }

javascript function generateOverlay

function generateOverlay(element) { var dimension = getDimensions($(element)); //console.log('top=' + dimension.top + ' left=' + dimension.left +' width='+ dimension.width + ' height=' + dimension.height); // disassociate corresponding label attributes so the value of the element cannot be changed by clicking on the labels var id = $(element).attr('id'); var label = $('label[for="'+id+'"]'); $(label).removeAttr('for'); // set my tabindex to -1 so tabs will ignore me $(element).attr('tabIndex', -1); $(label).attr('tabIndex', -1); // create a div overlay var overlay = $('

').appendTo('body'); $(overlay).css('top', dimension.top).css('left', dimension.left).css('width', dimension.width).css('height', dimension.height); }

javascript function getDimensions

function getDimensions(element){ var ret = {}; // The multiple acquisitions of the CSS styles are required to cover any border and padding the elements may have. // The Ternary (parseInt(...) || 0) statements fix a bug in IE6 where it returns NaN, // which doesn't play nicely when adding to numbers... ret.width = $(element).width() + (parseInt($(element).css('borderLeftWidth')) || 0) + (parseInt($(element).css('borderRightWidth')) || 0) + (parseInt($(element).css('padding-left')) || 0) + (parseInt($(element).css('padding-right')) || 0); ret.height = $(element).height() + (parseInt($(element).css('borderTopWidth')) || 0) + (parseInt($(element).css('borderBottomWidth')) || 0) + (parseInt($(element).css('padding-bottom')) || 0) + (parseInt($(element).css('padding-bottom')) || 0); var offsets = $(element).offset(); ret.left = offsets.left; ret.top = offsets.top; return ret; }

jQuery selector

// select all input,select elements. I'd wrap my form in a div. $('div#formContent input, div#formContent select, div#formContent textarea').each(function(i, element) { // if the element doesn't have the class named excludeMeFromReadOnly, overlay it to make it look like it's read only if(!$(element).hasClass('excludeMeFromReadOnly')) { generateOverlay($(element)); } });

Please note, the plugin contains a lot more logic including IE hacks etc. Fortunately for me, I really don’t care about IE prior to version 8 in my particular scenario. Therefore I don’t need all of those hacks.

—>Example code (example at jsFiddle)<—

jQuery.each vs Javascript for loop

pureessence — Fri, 02 Sep 2011 21:31:15 +0000

Being a big jQuery fan, I use jQuery.each method a lot in my Javascript code. Until recently I didn’t think too hard what jQuery.each really is.

Its description says it’s an iterator but it certainly is NOT a true iterator.

For example:

Let me know what you expect the code below to return.

var myVars = ['foo1', 'foo2', 'foo3']; function containsValue(myValue, myCollection) { jQuery.each(myCollection, function(i, val) { if(val == myValue) { return true; } }); return false; } $(document).ready(function() { console.log(containsValue('foo2', myVars)); });

Before I know better, I’d expect it to return true. Since myCollection DOES CONTAIN the value ‘foo2′. However the function containsValue WILL ALWAYS RETURN FALSE. That’s because when you return out of jQuery.each, it simply exits out of jQuery.each but not the containing function. In fact, whether you do anything in the callback function at all, jQuery.each ALWAYS RETURNS the collection you pass in.

e.g.

var returnedVar = jQuery.each(myVars, function(i, val) {}); console.log(returnedVar === myVars); // evaluates to true

In my opinion, jQuery.each acts more like a closure than an iterator. Sure you may use it as an iterator as long as you not returning anything. If you are just changing behaviors or collecting information, it will mimic an iterator. But you need to know, it really is not an iterator.

Personally I’m going to start to use Javascript’s native for..in statement instead of jQuery.each for Javascript collection variables. There is also an argument that jQuery.each may never perform faster than the native support for an iterator. Therefore below I will rewrite the function above using for..in.

function containsValueWithFor(myValue, myCollection) { for (index in myCollection) { if(myCollection[index] == myValue) { return true; } } return false; } console.log(containsValueWithFor('foo2', myVars)); // true var myMap = {'lala':'foo1', '2':'foo2', 'b':'foo3'}; console.log(containsValueWithFor('foo2', myMap)); // true as well for an object/map

—>Example code<—

QUnit – test your javascript

pureessence — Sun, 24 Jul 2011 16:28:06 +0000

After over ten years of javascript programming, I’m finally seriously considering writing at least unit tests for my javascript. Since I’m such a big fan of jQuery, QUnit seems like the obvious choice.

It’s sad but better late than never.

The truth is, in my opinion, the fact that javascript test frameworks do not yet maturely work with many of the continuous integration software deters programmers from using them. What’s the point of unit testing if they don’t automatically get run? Based on my research, JSUnit is the only one that integrates with ANT innately. But JSUnit is more of an abandomware now so people are looking for alternatives.

QUnit + CI topics

jQuery tests under CI

Syn instead of Selenium?

QUnit and automated browser tools

>> Run my test suite <<

QUnit simple example:

HTML:

Test Suite
QUnit example

test markup, will be hidden

Source javascript file:

function isEven(val) { return val % 2 === 0; } function startsWith(data, startsWithStr) { data = jQuery.trim(data); startsWithStr = jQuery.trim(startsWithStr); if(data) { return data.toUpperCase().lastIndexOf(startsWithStr.toUpperCase(), 0) === 0; } else if(data === startsWithStr) { return true; } else { return false; } }

Sample test file:

$(document).ready(function(){ module("startsWithTest"); test('startsWith', function() { ok(startsWith("ll-925", "ll-"), 'Starts with ll-'); ok(!startsWith("ll-925", "xl-"), 'Does not start with xl-'); ok(!startsWith("", "xx-"), 'Does not start with xx-'); ok(startsWith(" xx-sdgj ", "xx-"), 'Trimming test: starts with xx-'); ok(startsWith(" xx-sdgj", " xx- "), 'Trimming test 2: starts with xx-'); ok(startsWith("", " "), 'Empty string starts with empty string'); ok(startsWith("Mn-u59", "mN-"), 'Non case sensitive test'); // raises(startsWith(foo, " "), 'Undefined test 1'); // undefined is obviously not considered a normal exception }) });

>> git repo for the source <<

Additional resources:

QUnit tutorials

API documentation

jQuery UI even though you disappointed me, I still figured you out

pureessence — Mon, 06 Jun 2011 22:01:11 +0000

So I upgraded to jQuery UI version 1.8.2 at work and thought that I should instead of using the autocomplete plugin which is deprecated, switch over to use the jQuery UI build-in autocomplete widget.

jQuery UI autocomplete widget is NOTHING like the original jQuery autocomplete plugin!!!

At least by jQuery UI version 1.8.2 it’s not.

The jQuery UI autocomplete widget is crap just like I remembered when it first came out.

Things I found that annoyed the heck out of me:

Highlight doesn’t work. Use this hack instead.

Must match doesn’t work. More info available here.
I ended up using a separate javascript function I wrote.

function jQueryUIAutoCompleteMustMatch(input) { var found = 0; var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( jQuery.trim($(input).val()) ) + "$", "i" ); jQuery.each($('.ui-autocomplete li'), function(i, val) { if(jQuery.trim( $(val).text() ).match( matcher ) ) { found = 1; } }); if (found) { return true; } else { $(input).val(''); return false; } }

inside of your autocomplete setup, do

change: function(event, ui) {jQueryUIAutoCompleteMustMatch($(this));}

To mimic the scrollHeight property on the autocomplete plugin, you will need to use css overrides. More info here (Example).

.ui-autocomplete { max-height: 220px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; /* add padding to account for vertical scrollbar */ padding-right: 20px; } /* IE 6 doesn't support max-height * we use height instead, but this forces the menu to always be this tall */ * html .ui-autocomplete { height: 220px; }

To mimic the behavior of the option formatResult in the original plugin, you may do something like:

$( "#tags" ).autocomplete({ source: availableTags, minLength: 0, delay: 0, close: function(event, ui) { var numberOnly = $(this).val().match(/\d+/); $(this).val(numberOnly); } }) ;

Above is to format the result as number only.

If you want the pop up search results as soon as the user has the focus on the input without entering anything, you will need to bind the search call on the focus event of the input. More info here.
I ended up with

$(input).autocomplete({ source: list }) .focus(function() { $(this).autocomplete("search"); }) ;

I finally recognized that the jQuery UI autocomplete widget has far fewer options you may set. For example, by version 1.8.2, below are the only options

disabled

appendTo

autoFocus

delay

minLength

position

source

If you wish to get your autocomplete working the same as your old one, chances are you will need to add a lot more additional code/hack.

This is the biggest disappointment for me since I started using jQuery.

>>> My Example with everything configured the way I want <<<

Use modal windows for delete confirmations please

pureessence — Tue, 01 Mar 2011 21:00:15 +0000

While reviewing an existing project at work, I notice it has many delete confirmation pages. In my opinion, delete confirmation PAGES should really just retire from the face of the earth. Seriously, why do we need to create a http request & html for the mere purpose of asking

“Are you sure you wish to delete blah?”

Yes, I’m sure | No, go back

Often the URLs for delete confirmation pages are consisted of

some.host/someApplication/deleteConfirmation?toDelete=some+description&id=some+id

Delete confirmation should be an UI client side behavior to prevent the user from accidentally clicking on a delete link/button and forcing a backend change to the data that was not intended.

Preconditions

The delete actions are hyperlinks. There are many examples with delete actions as form submissions. My example expects the delete actions to be links such as delete.php?id=#. I believe this is a more challenging situation than a form submission. I will share my solution. I think ideally it will be nice for the jQuery UI dialog to return a boolean javascript variable but since it currently does not (and I’m not sure it ever will), I’m using window.location to load the delete action link.

View the example of the page without any jQuery

Please have some general knowledge regarding jQuery selectors. I will not go into details how that works.

Assume you have a way of using jQuery selectors to uniquely bind an onclick event to each delete link. For simplicity purpose, in my example, all of my delete links will have the css class deleteConfirmation.

jQuery UI example of a delete confirmation modal window
I will be using links from Google CDN in my example.

Step 1
Create a div with an unique id in your html markup. It doesn’t matter where it exists in your markup, it just need to exist. We will create the jQuery UI dialog off it.

Step 2
When the DOM is loaded, create your jQuery UI dialog and have its autoOpen property set to false. This allows us to reuse this dialog for all delete confirmations.

// create the jQuery modal window and set autoOpen to false $("#jQueryDeleteConfirmationModalWindow").dialog({ title: "Delete Confirmation", autoOpen: false, // set this to false so we can manually open it dialogClass: "jQueryDeleteConfirmationModalWindow", closeOnEscape: false, draggable: false, width: 460, height: 260, modal: true, buttons: { "Yes, I'm sure": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } }, resizable: false, open: function() { // scrollbar fix for IE $('body').css('overflow','hidden'); }, close: function() { // reset overflow $('body').css('overflow','auto'); } }); // end of dialog

Step 3
Bind the onclick events to the delete action links via the css class deleteConfirmation.

$('a.deleteConfirmation').click(function() { var name = $(this).parent().parent().children('td.name').html(); // a.delete -> td -> tr -> td.name name = jQuery.trim(name); $("#jQueryDeleteConfirmationModalWindow").html('Are you sure you wish to delete ' + name + '?'); $("#jQueryDeleteConfirmationModalWindow").dialog('open'); return false; });

Notice I also made it so my confirmation message will contain an unique description via the inner html property of another table cell of the same table row?

Step 4
If the user clicks on “Yes, I’m sure”, we want to execute the delete action. Therefore, my solution is to create a global variable that contains the value of the hyperlink the user clicked on and then set it to the window.location if the “Yes, I’m sure” is clicked on the modal window.

As the first line inside of the script tag, add

var deleteTheSelectedUrl = '';

In the button “Yes, I’m sure”, after dialog close, add

if('' != jQuery.trim(deleteTheSelectedUrl)) { window.location = deleteTheSelectedUrl; }

In the onclick event binding, add as the first line

deleteTheSelectedUrl = $(this).attr('href');

View the final example

github repo

writing an ajax app for Sequence

pureessence — Mon, 02 Aug 2010 12:44:43 +0000

Yesterday I attended Ted Neward‘s game design session at nofluff. It inspired me to begin to implement the game sequence in an ajax app. It will be a private app since I only plan to play it with some friends. But it will be hosted somewhere on my website so it can be accessed from anywhere.

Sequence is a board game my husband and I often played with two of our friends. It’s their favorite game. When I started thinking last night about potentially creating a web version so we don’t need to be physically at their house to play, I became very excited. I believe I may create something that will work with the help of php, mysql + jQuery (ajax).

Why this idea excites me

Before I started as a professional Java developer, I always coded in php & mysql (somewhat a LAMP developer on the side). However most of my old applications and sites are down. I no longer have the desire to maintain them. Now this is a great opportunity and incentive for me to go back to php & mysql and write something I enjoy.

PHP has a special place in my heart. Just a while ago, a coworker asked for my help to create him something to help with the manual text file processing he has to do every month. It only needs to be quick & dirty app. I threw together a php app in half an hour for him. It was super cool. He loved it.

jQuery is my favorite javascript library. You don’t have to look far in my blog to find that out. So the more I get to work with it, the happier I am.

I can also involve my husband on this project. Even though he’s not a programmer but he knows this game as well as I do. Normally he doesn’t have much of stake in my apps but this time he can be my lab rat

With this project, I also get to play with UI. I started as a web designer. So CSS & HTML have been my passion. There will be quite a bit of UI involved in the designing of this game.

It’s fun because it will be very useful. I very much look forward to the day that I can have our friends joining the game.

I can blog about it! I may not share my final product with the public but I will definitely share my progress & experience. Hopefully there will be challenges where I can learn some new stuff.

Last night I started brainstorming with my hushand as how I want the game to work. I started table designing and UI designing. This morning I put together a very prototype version of the UI.

I leveraged jQuery’s “redmond” theme. This way I can use all of the cool jQuery UI widgets and benefit from reusing its css for elements I want to style and create a semi prof looking app in no time.

jQuery session timeout countdown with jQueryUI dialog

pureessence — Sun, 14 Feb 2010 14:24:16 +0000

Very nice jQuery session timeout countdown example with the use of the jQuery idleTimer plugin.

Here’s my example with the jQueryUI dialog as the warning.

var idleTime = 2000; // number of miliseconds until the user is considered idle var initialSessionTimeoutMessage = 'Your session will expire in seconds.

Click on OK to continue your session.'; var sessionTimeoutCountdownId = 'sessionTimeoutCountdown'; var redirectAfter = 10; // number of seconds to wait before redirecting the user var redirectTo = ' http://regretless.com/2010/02/14/jquery-session-timeout-countdown/'; // URL to relocate the user to once they have timed out var keepAliveURL = 'keepAlive.php'; // URL to call to keep the session alive var expiredMessage = 'Your session has expired. You are being logged out for security reasons.'; // message to show user when the countdown reaches 0 var running = false; // var to check if the countdown is running var timer; // reference to the setInterval timer so it can be stopped $(document).ready(function() { // create the warning window and set autoOpen to false var sessionTimeoutWarningDialog = $("#sessionTimeoutWarning"); $(sessionTimeoutWarningDialog).html(initialSessionTimeoutMessage); $(sessionTimeoutWarningDialog).dialog({ title: 'Session Expiration Warning', autoOpen: false, // set this to false so we can manually open it closeOnEscape: false, draggable: false, width: 460, minHeight: 50, modal: true, beforeclose: function() { // bind to beforeclose so if the user clicks on the "X" or escape to close the dialog, it will work too // stop the timer clearInterval(timer); // stop countdown running = false; // ajax call to keep the server-side session alive $.ajax({ url: keepAliveURL, async: false }); }, buttons: { OK: function() { // close dialog $(this).dialog('close'); } }, resizable: false, open: function() { // scrollbar fix for IE $('body').css('overflow','hidden'); }, close: function() { // reset overflow $('body').css('overflow','auto'); } }); // end of dialog // start the idle timer $.idleTimer(idleTime); // bind to idleTimer's idle.idleTimer event $(document).bind("idle.idleTimer", function(){ // if the user is idle and a countdown isn't already running if($.data(document,'idleTimer') === 'idle' && !running){ var counter = redirectAfter; running = true; // intialisze timer $('#'+sessionTimeoutCountdownId).html(redirectAfter); // open dialog $(sessionTimeoutWarningDialog).dialog('open'); // create a timer that runs every second timer = setInterval(function(){ counter -= 1; // if the counter is 0, redirect the user if(counter === 0) { $(sessionTimeoutWarningDialog).html(expiredMessage); $(sessionTimeoutWarningDialog).dialog('disable'); window.location = redirectTo; } else { $('#'+sessionTimeoutCountdownId).html(counter); }; }, 1000); }; }); });

Here’s my example with the jQueryUI dialog as the warning.

Stupid IE does it again

pureessence — Fri, 12 Feb 2010 16:42:12 +0000

I just learned IE does not support jQuery’s new live (event delegation) binding on the change event.

Very nice IE, you did it again.

jQueryUI dialog as loading screen (replace blockUI)

pureessence — Fri, 29 Jan 2010 19:54:52 +0000

I like being able to manually control my loading screen with my ajax calls. Previously I was using the blockUI jQuery plugin. It’s a great plugin. You may turn an overlay on your entire screen or just a layer on or off by simply calling

$(selector).block();

and

$(selector).unblock();

Since at work they are hosting the jQueryUI package, I thought it’s a good idea to use as a few external plugins as possible. So I worked on using the jQueryUI dialog widget as the blockUI plugin. My goal is to replace the $(selector).block() and $(selector).unblock() conveniences. I think I got pretty close.

Click for a jQueryUI dialog as loading screen demonstration.

Step 1:
Create a layer in my html to be used as the loading screen.

Step 2:
Style the loading screen with a nice loading icon. Want more customized loading icons? Check out the ajax loading icons site.

#loadingScreen { background: url(../images/loading.gif) no-repeat 5px 8px; padding-left: 25px; }

Step 3:
Create a js file so I can include on all of the pages where I need the loading screen.

$(document).ready(function() { // create the loading window and set autoOpen to false $("#loadingScreen").dialog({ autoOpen: false, // set this to false so we can manually open it dialogClass: "loadingScreenWindow", closeOnEscape: false, draggable: false, width: 460, minHeight: 50, modal: true, buttons: {}, resizable: false, open: function() { // scrollbar fix for IE $('body').css('overflow','hidden'); }, close: function() { // reset overflow $('body').css('overflow','auto'); } }); // end of dialog }); function waitingDialog(waiting) { // I choose to allow my loading screen dialog to be customizable, you don't have to $("#loadingScreen").html(waiting.message && '' != waiting.message ? waiting.message : 'Please wait...'); $("#loadingScreen").dialog('option', 'title', waiting.title && '' != waiting.title ? waiting.title : 'Loading'); $("#loadingScreen").dialog('open'); } function closeWaitingDialog() { $("#loadingScreen").dialog('close'); }

Step 4:
It’s kind of annoying I think that the dialog widget doesn’t give you a ‘closable’ option. Because I don’t want my loading screen to be closable, the only way I could figure out to get rid of the little ‘X’ on the upper right corner of the title bar is to give your dialog a css class and then hide the ‘X’ using the css below:

/* hide the close x on the loading screen */ .loadingScreenWindow .ui-dialog-titlebar-close { display: none; }

Simply show the loading screen by calling

waitingDialog({});

or with custom title & message

waitingDialog({title: "Hi", message: "I'm loading..."});

Call

closeWaitingDialog();

to hide the loading screen.

Click for a jQueryUI dialog as loading screen demonstration.

Ajax Call
Someone asked for an example of how to utilize the loading screen in an ajax call.

waitingDialog({}); $.ajax({ url: "testAjax.php", success: function(data){ $('#data').html(data); closeWaitingDialog(); } });

Click for a jQueryUI dialog as loading screen demonstration with AJAX call.

jQuery selection copy

pureessence — Fri, 22 Jan 2010 19:43:46 +0000

Here’s a jQuery scenario I encountered today at work. I found the solution interesting.

I have 2 identical selection dropdowns. When I select from the first one I want to copy the selection value into the second. However, I also have a change event attached to the second selection dropdown. In order to make sure I trigger the second dropdown’s change event, instead of doing:

$('#firstSelection').change(function() { $('#secondSelection').val($(this).val()); });

I have to do the following:

$('#firstSelection').change(function() { var selectedIndex = $(this).attr('selectedIndex'); $('#secondSelection').attr('selectedIndex', selectedIndex).change(); });