Douglas on Web Applications

Incredibly Simple Tabs with jQuery

Whenever I need inline tabs, I find myself traveling down the same well trod paths. There are dozens of plugins but where they usually fail is in simplifying skinning. Solution:

1. Create each tab row as a graphic (so all tabs but the selected one in a row would look the same
2. Add images to page surrounding each as a DIV
3. Add a bit of jQuery to hide show appropriate tab & content on click

Here's the CSS:

 
<div id="tabs">
<div id="speakers"><img src="img/tabs-speakers.gif" width="724" height="41" alt="Speakers" /></div>
<div id="events"><img src="img/tabs-events.gif" width="724" height="41" alt="Speakers" /></div>
<div id="tabs-content">
<div id="speakers-content" class="tab-content">
 
Content for speakers
</div>
<div id="events-content" class="tab-content">
 
Content for events
</div>
</div>
</div>
 

Next, add the javascript:

var tabArray=new Array("speakers","events");
$(document).ready(function() {
   $('#events').hide();
   $('#events-content').hide();
   $('#tabs').click(function() {
	   $.each(tabArray, function(index, value) {
		   $('#'+value).toggle();
		   $('#'+value+'-content').toggle();
	   });
   });
});

Passing Arrays to PHP via AJAX

I've written on processing AJAX queries before but neglected discussing how to pass an array to PHP for processing. This is an example of getting all checked rows in an EXTJS grid and posting them to an awaiting PHP script.

First we have the users confirm they really want to process all checked records:

 
Ext.MessageBox.confirm('Confirm', 'Are you sure your want to email login info to all selected users?', confirmEmailUsers);
 

Now the jQuery method:

 
function confirmEmailUsers(btn){
   if(btn=='yes'){
	   var recArray=new Array();
	   var ids=new Array();
	   var recArray = mailqueueGrid.getSelectionModel().getSelections();
	   for (var i = 0 ; i < recArray.length ;i++) {
		  ids[i] = recArray[i].get('id');
	   }
	  $.ajax({
		type: "POST",
		dataType: 'json',
		url: '/cpsia/?c=form&m=processqueue',
		data: 'ids='+ids,
		success: function(msg){
			alert(msg)
		}
	  });
   }
}
 

Finally, the PHP script to processes it:

 
$ids = explode(",",$_POST['ids']);
foreach ($ids as $id) {
   echo $id .'';
}
 

Random Photo on Page Load (jQuery)

 
function randomPhoto(){
  var photoArray=new Array()
  photoArray[1]="imgs/photo_video_guitar.jpg"
  photoArray[2]="imgs/photo_video_girl.jpg"
  photoArray[3]="imgs/photo_video_boy.jpg"
  var imagePosInArray=Math.floor(Math.random()*photoArray.length)
  if (imagePosInArray==0)
    imagePosInArray=1;
    $("div.tab-content#case-study img").attr("src",photoArray[imagePosInArray]);
}
 

Dropdown (Pulldown) Selectors & Manipulation

Clear a current dropdown selection

    $("#some-id-on-option option").attr({ selected: "selected" }).removeAttr("selected");

Now, select an option

    $("#some-id-on-option option:first").attr("selected");

That selects the first option. Or you can specify an option by index:

    $("#some-id-on-option eq:(2)").attr("selected");

However, that only selects the item but doesn't execute if there is an action (via listener) associated with that particular dropdown. To do so, use the following:

    $("#some-id-on-option").change();

Here's a real-world example. Let's say you have 3 dropdown menus. The first selects between two states and depending on the selection, one of two location dropdown menus will be displayed. The location dropdowns allow a user to select specific store in that state. By default, on page load one location dropdown will be hidden. Here is the code for the State dropdown menu:

$("#select-state").change( function () {
  //alert($(this).val())
  $("#locations-az").toggle();
  $("#locations-ca").toggle();
  $(".sLocations option").removeAttr("selected")
  if($(this).val()==1){ //cal
    $("#locations-ca option:eq(0)").attr("selected","selected");
	$("#select-locations-ca").change();
  }else{
    $("#locations-az option:eq(0)").attr("selected","selected");
	$("#select-locations-az").change();
  }
});

This ensures that the location dropdowns always revert back to the first option when the state dropdown is toggled. Notice the last line "$(this).change()". This executes the following listener on the active locations pulldown:

  $(".sLocations").change( function () { //we're using class in this case
      var newSrc =$(this).val();
      $('iframe#replace-iframe').replaceWith(newSrc);
  });

This takes the value on the location dropdown and replaces the current iFrame on the page with it. Because we are inserting Google Maps, we'll replace the whole iFrame rather than just trying to update it in order to avoid caching issues. Here's the HTML:

 
<select id="select-state" name="state">
    <option value="1">California</option>
    <option value="2">Arizona</option>
 </select>
<select id="select-locations-az" class="sLocations" name="selectlocations-az">
<option value="&lt;iframe  class=&quot;def-selection&quot; id=&quot;replace-iframe&quot; width=&quot;878&quot; height=&quot;600&quot;
 frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;  src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=4623+E+Elliot+Rd,+Ahwatukee,
+AZ&amp;mrt=all&amp;sll=35.224939,-114.036363&amp;sspn=0.013707,0.017231&amp;ie=UTF8&amp;hq=&amp;hnear=4623+E+
Elliot+Rd,+Phoenix,+Maricopa,+Arizona+85044&amp;ll=33.358707,-111.979523&amp;spn=0.014017,0.017231&amp;t=h&amp;z=14&amp;output=embed&quot; mce_src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=4623+E+Elliot+Rd,+Ahwatukee,
+AZ&amp;mrt=all&amp;sll=35.224939,-114.036363&amp;sspn=0.013707,0.017231&amp;ie=UTF8&amp;hq=&amp;hnear=4623+E+
Elliot+Rd,+Phoenix,+Maricopa,+Arizona+85044&amp;ll=33.358707,-111.979523&amp;spn=0.014017,0.017231&amp;t=h&amp;z=14&amp;output=embed&quot;&gt;&lt;/iframe&gt;">Ahwatukee - 4623 E. Elliot Rd.</option>...(cont)
</select>
 

jQuery Basics

jQuery is a popular javascript framework simplifying cross-browser development. To get started, include the jQuery:

<script src="jquery.js" type="text/javascript"></script>

Since you will likely be manipulating the DOM, we need to wait until the page is fully loaded before executing our code. So we start by creating a statement to this affect:

$(document).ready(function(){
  //code goes here
});

jQuery is useful for applying CSS to elements on the page. This is useful when you would like to change an existing style. Here's a basic example.
First, create CSS:

 
<style type="text/css">
    .warning{ border:red 1px solid;padding: 8px; }
</style>
 

Now, we can apply it when a specific event occurs:

$(document).ready(function(){ $("a").click(function(){ $("#results").addClass("warning"); }); });

In the real world, clicking a link will cause the browser to navigate away from the page before the warning could be displayed. jQuery offers an easy solution to prevent this from occurring:

$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    $("#results").addClass("warning");
  )};
});

Notice how we passed the event as an argument. Now this is all fine and dandy but what good is a warning without any explanation? So let's add some text within the results div:

$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    $("#results").addClass("warning").html("Warning! You clicked a link!");
  }
});

jQuery adds a simple way to chain events by passing around the actual query object. This makes coding simpler and more compact.

Forms - Radio Groups with jQuery

An easy way to select a radio button using jQuery:

 
$('input[name=packages]:radio')[0].checked = true; //first
 

Getting the value of the selected radio button in a group:

 
var checkedValue = $('input[name=packages]:radio:checked').val();
 

Loading JSON via jQuery

 
$(document).ready(function(){
  $('#id-to-be-clicked' .class-name').click(function(){
    $.getJSON('file-name.json', function(data){
      $('#id-to-insert-html').empty();
      $.each(data, function(entryIndex,entry){
        var html = '
<div class="entry">';
        html += '
<h2 class="main-title">' + entry['title'] + '</h3>
 
';
        html += ...(cont.);
        $('#id-to-insert-html').append(html);
      });
    });
  });
});

Text Resizing with jQuery

 
$(document).ready(function(){
    // reset size
    var defaultSize = $('html').css('font-size');
    $(".resetSize").click(function(){ //button or link class
        $('html').css('font-size', defaultSize);
    });
 
    // increase size
    $(".increaseSize").click(function(){ //button or link class
        var current = $('html').css('font-size');
        var currentSize = parseFloat(current, 10);
        var newSize = currentSize*1.2;
        $('html').css('font-size', newSize);
        return false;
    });
});
 

Multiple File Upload with jQuery

Source: Tutorials:Multiple_File_Upload_Magic

Javascript:

$(document).ready(function(){
    var fileMax = 3;
    $('#asdf').after('
<div id="files_list" style="border:1px solid  black;padding:5px;background:#fff;
font-size:x-small;"><strong>Files (maximum '+fileMax+'):</strong></div>
 
');
    $("input.upload").change(function(){
        doIt(this, fileMax);
   });
});	
 
function doIt(obj, fm) {
    if($('input.upload').size() &gt; fm) {alert('Max files is '+fm); obj.value='';return true;}
    $(obj).hide();
    $(obj).parent().prepend('
<input class="upload" name="fileX[]" type="file" />').find("input").change(function() {
doIt(this, fm)});
    var v = obj.value;
    if(v != '') {
        $("div#files_list").append('
<div>'+v+'
<input class="remove" type="button" value="Delete" /></div>
 
')
        .find("input").click(function(){
            $(this).parent().remove();
            $(obj).remove();
            return true;
        });
    }
};

HTML:
<h1>Multiple File Upload</h1>
<form action="test.php" method="post" enctype="multipart/form-data" name="asdf" id="asdf">
    <div id="mUpload">
        <input type="file" id="element_input" class="upload" name="fileX[]" /><br />
        <input type="button" name="Submit" value="Submit" id="send" />
    </div>
</form>

Add Javascript before closing BODY tag:

$('#send').click(function(){
   alert('Demonstration Only: file upload disabled');
});

Rounded Corners with Images using jQuery

Source: http://docs.jquery.com/Tutorials:Rounded_Corners

Javascript:

 
$(document).ready(function(){ $("div.roundbox") .wrap('
<div class="dialog">'+
'
<div class="bd">'+
'
<div class="c">'+
'
<div class="s">'+
'</div>
 
'+
'</div>
 
'+
'</div>
 
'+
'</div>
 
');
$('div.dialog').prepend('
<div class="hd">'+
'
<div class="c"></div>
 
'+
'</div>
 
')
.append('
<div class="ft">'+
'
<div class="c"></div>
 
'+
'</div>
 
');
});
 

HTML:

 
<div class="roundbox">
</div>
 

CSS:

 
body {
 font:normal 76% georgia,helvetica,verdana,tahoma,arial,"sans serif";
 background: #fff;
}
a { color: white; text-decoration: none;}
a:hover { border-bottom: 1px dashed #fff;}
.dialog {
 width:67%;
 margin:0px auto;
 min-width:20em;
 color:#fff;
}
 
.dialog .hd .c,
.dialog .ft .c {
 font-size:1px; /* ensure minimum height */
 height:13px;
}
 
.dialog .ft .c {
 height:14px;
}
 
.dialog .hd {
 background:transparent url(tl.gif) no-repeat 0px 0px;
}
 
.dialog .hd .c {
 background:transparent url(tr.gif) no-repeat right 0px;
}
 
.dialog .bd {
 background:transparent url(ml.gif) repeat-y 0px 0px;
}
 
.dialog .bd .c {
 background:transparent url(mr.gif) repeat-y right 0px;
}
 
.dialog .bd .c .s {
 margin:0px 8px 0px 4px;
 background:#000 url(ms.jpg) repeat-x 0px 0px;
 padding:1em;
}
 
.dialog .ft {
 background:transparent url(bl.gif) no-repeat 0px 0px;
}
 
.dialog .ft .c {
 background:transparent url(br.gif) no-repeat right 0px;
}
 
/* content-specific */
 
.dialog h1 {
 /* header */
 font-size:2em;
 margin:0px;
 padding:0px;
 margin-top:-0.6em;
}
 
.dialog p {
 margin:0.5em 0px 0px 0px;
 padding:0px;
 font:0.95em/1.5em arial,tahoma,"sans serif";
}
 
html>body .dialog pre {
 font-size:1.1em;
}