Easy Content Rearrangement With Javascript

With Content Management Systems currently such a hot topic, here's an easy addition to a custom-built solution which enables any administrator to re-order content using only a browser. One serious strength is that knowledge of HTML is not required by the administrator in question. If you can click some arrow buttons, and whack "update", you can manage this once it's in place.

This is an idea for anyone to use in any way. You may like to implement this to allow your clients to reorder their own links, or to allow ANY visitor to your site to modify the order of a listing, or submit their top 10 books, etc. If you use this code to do something interesting, or have already done something similar in the past, be sure to submit a comment at the bottom of the article.

(Stay tuned for a working example of this...)

Let's imagine a set of links:

• Home
• About Us
• Services
• Products
• Testimonials
• Contact

Add a client who wants things reordered. Say, throwing "Services" below "Products", or "Testimonials" above "Services". If this is included in your site shell via a display template, then such a simple change would require editing and uploading of the revised template. Personally, I think this is somewhat of an unnecessary pain. This is a task, however, that can be easily undertaken by the client themselves.

In a simple content module of a database-driven web site, your database table CONTENT might have the columns contentid, contenttitle, contentlinkname, contentbody, contentdate, etc. You'd probably pull the data with SQL like this:

select contentid, contentname

from content;

And if you were using ColdFusion, for example, your output code would look something like this:

<cfoutput query="queryname">

<a href="#attributes.scriptname#/#contentid#/"
title="#contentname#">#contentname#</a><br>

</cfoutput>

and your output itself might resemble this:

<a href="index.cfm/4/ title="Home">Home</a>

<a href=" index.cfm/3/ title="About Us">About Us</a>

<a href=" index.cfm/5/ title="Services">Services</a>

<a href=" index.cfm/2/ title="Products">Products</a>

Adding a numeric column contentseq to your CONTENT table gives you the chance to enable rearrangement from the browser. The contentid column remains as your primary key, and the contentseq is changed with each rearrangement to order your content (1 being the first, perhaps 6 being your last). Your SQL select would have two small changes - adding contentseq to the select part, and adding an order by statement:

select contentid, contentname, contentseq

from content

order by contentseq;

Then you'd need some templates - a section to grab the current content and its ordering from the database, and display it in a select box manipulated by JavaScript, and another section to update the database with the revised values. Download this zip file which includes the files and code you'll need to get started.

The select box section can be found in rearrange.cfm (the JavaScript is by r937 - you can thank him by reading some of his articles). You can see a simple demonstration of this JavaScript online (doesn't read from or write to a database).

<script>
function move(foo,way) { j=-1; menuLen=foo.length; 
if (way=='up') { lim=0; m=-1 } else { lim=menuLen-1; m=1 };
for (i=0;i<menuLen;i++) if (foo.options[i].selected) { j=i; i=menuLen; }
if (j==-1) alert('You have nothing selected.'); else if (j==lim) alert('You can't go '+way+' any further.') 
else { k=j+m; tempt=foo.options[k].text; tempv=foo.options[k].value; 
foo.options[k].text=foo.options[j].text
foo.options[k].value=foo.options[j].value
foo.options[j].text=tempt;   foo.options[j].value=tempv; 
foo.options[j].selected=false; 
foo.options[k].selected=true; } }
function showMenu(foo) { temp=''; menuLen=foo.length; comma=''
for (i=0;i<menuLen;i++) { j=i+1; temp += comma + foo.options[i].value; comma=',' }
document.theForm.theResults.value=temp
}
</script>
<cfoutput><form name=theForm 
 action="change.cfm" method="post"
 onSubmit="showMenu(document.theForm.theMenu)"></cfoutput>
<p><a href="javascript:move(document.theForm.theMenu,'up')">up</a></p>
<cfoutput><input type=hidden name=theCount value="#getcontent.recordcount#"></cfoutput>
<input type=hidden name=theResults value="">
<p><cfoutput><select name="theMenu" size="#getcontent.recordcount#"></cfoutput>
<cfoutput query=getcontent>
<option value="#contentid#">#contentseq# - #contentname#</option>
</cfoutput></select></p>
<p><a href="javascript:move(document.theForm.theMenu,'down')">down</a></p>
<p><input type=submit name=submit value="rearrange"></p>
</form>

And the code to update the database is in change.cfm:

<cfloop index="loopitem" from="1" to="#form.thecount#" step="1">
<cfquery name=changesequence datasource="#db#">
update content
set contentseq = #loopitem#
where contentid = #listgetat(theresults, loopitem)#
</cfquery>
</cfloop>

Once a system similar to this is in place, a client could make the aforementioned changes themselves. It'd just be a matter of logging in with appropriate privileges, perhaps choosing "Rearrange Content", use the arrow buttons to relocate content, and then click "rearrange".

An alternative use for this concept could be within a portfolio. Login and rearrange your projects to place the better ones at the top where they are more likely to be seen.

If you've got any other ideas, revised code, etc, I encourage you to add your thoughts to this article via a comment.

isaac