I always forget how to do break out of the each() method when iterating through a jQuery object.
<script type="text/javascript">
/* <![CDATA[ */
$('#rates-frm').submit(function(){
var bValid = true;
$('#rates-frm input[@type="text"]‘).each(function(i, o){
alert(’index: ‘ + i + ‘ object id: ‘ + o.id);
if (i > 5) {
return false;
}
});
});
/* ]]> */
</script>
I posted a drag and drop example of sorting and saving a list using the jQuery sortables plugin. I was asked how this could be done with table rows. The jQuery TableDnD plugin comes to the rescue!
It doesn’t have serialize method so you need to get the new order yourself which can be done easily by looping through the rows and building a list in the correct order.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.js"></script>
<script type="text/javascript">
<!-- <![CDATA[
$(function(){
$("#sortable-tbl").tableDnD();
$('#frm-sort').submit(function(){
var sRowOrder = "";
$("#sortable-tbl tr").each(function(i,o){
if (sRowOrder.length) {
sRowOrder += "," + o.id;
} else {
sRowOrder = o.id;
}
});
$('#sort_order').val(sRowOrder);
});
});
// ]]> –>
</script>
</head>
<body>
<table id=”sortable-tbl”>
<tr id=”section_id_1″>
<td>One</td>
<td>Row A</td>
</tr>
<tr id=”section_id_2″>
<td>Two</td>
<td>Row B</td>
</tr>
<tr id=”section_id_3″>
<td>Three</td>
<td>Row C</td>
</tr>
<tr id=”section_id_4″>
<td>Four</td>
<td>Row D</td>
</tr>
</table>
<form id=”frm-sort”>
<input type=”submit” name=”save” id=”save” value=”save” />
<input type=”hidden” name=”sort_order” id=”sort_order” value=”" />
</form>
</body>
</html>
Someone asked how to update the database using ColdFusion, so here is the code:
<!--- strip the 'section_id_' from the list, so that we only have a list of ids --->
<cfset form.sort_order = ReplaceNoCase(form.sort_order, "section_id_", "", "all") />
<cfloop from="1" to="#ListLen(form.sort_order)#" index="ndx">
<cfquery name="qryOrder" datasource="#Request.Datasource#">
update [Sections] set
section_order = <cfqueryparam value=”#ndx#” cfsqltype=”cf_sql_integer” />
where section_id = <cfqueryparam value=”#ListGetAt(form.sort_order, ndx)#” cfsqltype=”cf_sql_integer” />
</cfquery>
</cfloop>
jQuery has a really nice plugin called “sortable” that lets you reorder a list using drag and drop. It’s really easy to get it up and running. In your display page you would have:
<cfoutput>
<ul id="sortable">
<cfloop query="qrySections">
<li id="section_id_#qrySections.section_id#">#qrySections.section_title#</li>
</cfloop>
</ul>
<form action="#CGI.SCRIPT_NAME#" method="post" id="frm-sort">
<input type="submit" name="save" id="save" value="save" />
<input type="hidden" name="sort_serialized" id="sort_serialized" value="" />
</form>
</cfoutput>
<script type="text/javascript">
<!-- <![CDATA[
$(function(){
$.getScript("js/jquery.dimensions.js", function(){
$.getScript("js/ui.mouse.js", function(){
$.getScript("js/ui.draggable.js", function(){
$.getScript("js/ui.droppable.js", function(){
$.getScript("js/ui.sortable.js", function(){
// required plugins have all loaded
$("#sortable").sortable({});
});
});
});
});
});
});
$('#frm-sort').submit(function(){
$('#sort_serialized').val($('#sortable').sortable('serialize'));
});
// ]]> –>
</script>
<noscript>Please enable javascript to sort sections</noscript>
Then in your Coldfusion script that handles the form submission:
<cfif StructKeyExists(attributes, "sort_serialized")>
<cfset variables.lst_section_id = ReReplaceNoCase(attributes.sort_serialized, "(&){0,1}section_id\[\]=”, “,”, “all”) />
<cfloop from=”1″ to=”#ListLen(variables.lst_section_id)#” index=”index”>
<cfquery name=”qryOrder” datasource=”#Application.Datasource#”>
update [Sections] set
section_order = <cfqueryparam value=”#index#” cfsqltype=”cf_sql_integer” />
where section_id = <cfqueryparam value=”#ListGetAt(variables.lst_section_id, index)#” cfsqltype=”cf_sql_integer” />
</cfquery>
</cfloop>
</cfif>
That’s it. To get the jQuery files visit http://ui.jquery.com/
I’ve noticed a few people reading my post about table sorting and paging with jQuery. If that’s what you’re interested in and don’t want to write any code then I suggest you take a look at jQuery UI, which includes the tablesorter plugin amongst many other things. It’s currently in beta but seems to be pretty stable.
The demo for the table sorter can be found at: http://dev.jquery.com/view/trunk/ui/demos/ui.tablesorter.html
Now that IE7, Firefox 2 and Safari 3 all support CSS selectors, it’s time to put all that power to good use! In the past forms have been a pain to style as you had to assign classes to each form field, so you’d end up with something like this:
<form>
<table summary="User form">
<tr>
<th scope="row"><label for="username">Username</label></th>
<td><input type=”text” name=”username” id=”username” value=”" class=”textField” /></td>
</tr>
<tr>
<th scope=”row”><label for=”password”>Password</label></th>
<td><input type=”password” name=”password” id=”password” value=”" class=”textField” /></td>
</tr>
<tr>
<th scope=”row”><label for=”remember”>Remember Login</label></th>
<td><input type=”checkbox” name=”remember” id=”remember” value=”1″ class=”checkbox” /></td>
</tr>
<tr>
<th scope=”row”>Status</label></th>
<td>
<input type=”radio” name=”status” id=”status_1″ value=”1″ class=”radioButton” />
<label for=”status_1″>Happy</label>
<input type=”radio” name=”status” id=”status_2″ value=”2″ class=”radioButton” />
<label for=”status_2″>Sad</label>
<input type=”radio” name=”status” id=”status_3″ value=”3″ class=”radioButton” />
<label for=”status_3″>Angry</label>
</td>
</tr>
<tr>
<td colspan=”2″><input type=”submit” name=”submit_form” id=”submit_form” value=”Login” class=”submitButton” /></td>
</tr>
</table>
</form>
With the corresponding classes in your stylesheet.
input.textField {border:1px solid blue;}
input.checkbox {width:50px;}
input.radioButton {width:50px;}
input.submitButton {background-color:yellow;}
By using selectors you can get rid of the classes in the HTML and just have the following in your stylesheet:
input[type="text"], input[type="password"] {border:1px solid blue;}
input[type="checkbox"] {width:50px;}
input[type="radio"] {width:50px;}
input[type="submit"] {background-color:yellow;}
Much better, and it also separates the code (HTML) and presentation (CSS) layers.
To support older browsers, then a bit of jQuery magic can help you out:
$(function(){
$('input[type="text"].addClass(’oldbrowser-textField’));
$(’input[type="password"].addClass(’oldbrowser-textField’));
$(’input[type="checkbox"].addClass(’oldbrowser-checkBox’));
$(’input[type="radio"].addClass(’oldbrowser-radioButton’));
$(’input[type="submit"].addClass(’oldbrowser-submitButton’));
});
You’ll need to add the corresponding classes to your CSS, so you’ll end up with:
input[type="text"], input[type="password"], input.oldbrowser-textField {border:1px solid blue;}
input[type="checkbox"], input.oldbrowser-checkBox {width:50px;}
input[type="radio"], input.oldbrowser-radioButton {width:50px;}
input[type="submit"], input.oldbrowser-submitButton {background-color:yellow;}
Of course you can reduce the jQuery, by using the filter method, but I’ve kept things simple for clarity.
corfield.org carehart ugtv Fusebox 5 group Riaforge jQuery BBC Football
