|
Creating a pop up floating div with JQuery |
||||||||
2
3<a href="javascript:void(0);" id="help">Pop me up</a>
4<div>stuff</div>
2 $(function() {
3 $("#help").live('click', function(event) {
4 $(this).addClass("selected").parent().append('<div class="messagepop pop">Content<p><a class="close" href="/">Cancel</a></p></div>');
5 $(".pop").slideFadeToggle()
6 return false;
7 });
8
9 $(".close").live('click', function() {
10 $(".pop").slideFadeToggle();
11 $("#contact").removeClass("selected");
12 return false;
13 });
14 });
15
16 $.fn.slideFadeToggle = function(easing, callback) {
17 return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
18 };
19</script>
2a.selected {
3 background-color:#1F75CC;
4 color:white;
5 z-index:100;
6}
7
8.messagepop {
9 background-color:#FFFFFF;
10 border:1px solid #999999;
11 cursor:default;
12 display:none;
13 margin-top: 15px;
14 position:absolute;
15 text-align:left;
16 width:394px;
17 z-index:50;
18 padding: 25px 25px 20px;
19 top: 0px;
20 left: 0px;
21}
22}
23
24label {
25 display: block;
26 margin-bottom: 3px;
27 padding-left: 15px;
28 text-indent: -15px;
29}
30
31.messagepop p, .messagepop.div {
32 border-bottom: 1px solid #EFEFEF;
33 margin: 8px 0;
34 padding-bottom: 8px;
35}
36</style>
|
Controlling show() hide() Divs with a JQuery powered Select field |
||||||||
There are many ways of hiding all your page elements then only showing specific areas based on user selection. One old school way of changing the displayed page content was with a select field that had an onchange event that posted to the same page, but with a URL variable.
I have been testing out a variation on this using the JQuery show() / hide() functions.
We attach an event to the select field, and pass the selected option to a JQuery function, as in the example code below.
2
3<select name="field_data_loc[key]" class="form-select required" id="edit-field-data-loc-key" onChange="showHide(this.value)" >
4<option value="didnotchoose" selected="selected">Choose</option>
5<option value="web">Website</option>
6<option value="file">File to upload</option>
7<option value="url">Url</option>
8</select>
We have a series of DIV's that are named the same as the select field options. All these DIV's will be hidden by default, apart from the "start" div.
2
3<div id="url">url</div>
4
5<div id= "file">file</div>
6
7<div id= "web">web</div>
Lastly we have our JQuery script. Here we have our showHide function. This accepts a DIV id, which is then shown. All other DIV's are hidden.
The last piece of script here simply hides all the DIV's on the page load, so that they are all hidden by default.
2
3 function showHide(obj)
4 {
5 var showDiv = "#"+obj;
6 $("div").hide();
7 $(showDiv).show();
8 }
9
10 // hide all the divs on start up
11 $('#web').hide();
12 $('#file').hide();
13 $('#url').hide();
14
15</script>
Putting it all together, and making it dynamic based on a list, it looks like this:
2
3<s/cript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
4
5<cfoutput>
6<select name="field_data_loc[key]" class="form-select required" id="edit-field-data-loc-key" onChange="showHide(this.value)" >
7<option value="didnotchoose" selected="selected">Choose</option>
8
9 <cfloop list="#variables.mylist#" index="variables.index">
10 <option value="#variables.index#">#variables.index#</option>
11 </cfloop>
12
13</select>
14
15<div id="start">Starting div</div>
16
17<cfloop list="#variables.mylist#" index="variables.index">
18 <div id="#variables.index#">#variables.index#</div>
19</cfloop>
20
21<s/cript language="javascript">
22
23 function showHide(obj)
24 {
25 var showDiv = "##"+obj;
26
27 <cfloop list="#variables.mylist#" index="variables.index">
28 $('###variables.index#').hide();
29 </cfloop>
30 $('##start').hide();
31
32 //$("div").hide();
33 $(showDiv).show();
34 }
35
36<cfloop list="#variables.mylist#" index="variables.index">
37 $('###variables.index#').hide();
38</cfloop>
39
40</script>
41</cfoutput>
An example is here.
|
Emulating the mySql limit function in MS SQL |
||||||||
There are pro's and con's to both mySql and MS SQL, one of the pro's of mySql is the limit function. This allows you to set a starting record number, and select N number of records from there. But how can we do that in MS SQL?
This is usually used for pagination functions, IE SELECT the next N records from the current count.
Firstly declare two variables, a "rows per page" and a start record.
2<cfset rowsperpage = 15>
3
4DECLARE @rowsperpage INT
5
6 DECLARE @start INT
7
8 SET @start = #startpos#
9 SET @rowsperpage = #rows#
Next we need to write the query we want, but wrap it in a parent select. Remember at this point to do all your conditional processing on the query inside the parenthesis.
2
3 (SELECT row_number() OVER (ORDER BY [intId]) AS rownum, *
4
5 FROM [table]
6 Where [table].intId = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.intId#">) AS tempQuery
Next we can apply a where clause that filters down the results based on the two variables declared at the top of the script. This means we will only get back the required number of records, starting at our defined record number.
2Order by rownum
The whole script looks like this:
2<cfset rowsperpage = 15>
3
4DECLARE @rowsperpage INT
5
6 DECLARE @start INT
7
8 SET @start = #startpos#
9 SET @rowsperpage = #rows#
10
11SELECT * FROM
12
13 (SELECT row_number() OVER (ORDER BY [intId]) AS rownum, *
14
15 FROM [table]
16 Where [table].intId = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.intId#">) AS tempQuery
17
18Where tempQuery.rownum BETWEEN (@start) AND (@start + @rowsperpage)
19Order by rownum
I am selecting *, but I recommend that you actually list your fields here, I tweaked it for this entry.
Not quite as nice as the mySql version tho is it:
2From table
3Limit 0,100
|
Displaying and sorting/paging tabular data using the JQuery tablesorter plugin, and query objects |
||||||||
One of the more repetitive tasks a server side developer encounters is displaying the results from a query. This is traditionally in the format of a table that displays the rows of data, along with any other functionality, such as paging controls and sortable headers.
I was recently commissioned to look into building a generic table display "engine", and thought I'd investigate if there were any JQuery plugins that could do the bulk of the work for me. Ideally I didn't want to have to write a whole load of script to parse sorting variables, and detect if a limit was set on the returned record set for paging.
After some investigation I ended out using the table sorter JQuery plugin http://tablesorter.com/docs/.
This plugin allows for sortable results that you can page through, and it does not keep posting the values back and forth to the server.
Start by including the references to the JQuery libraries. I've also included references to the paging plugin, and the blue theme stylesheet.
2
3<s/cript type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
4
5<s/cript type="text/javascript" src="/path/to/ /jquery.tablesorter.pager.js"></script>
6
7<link rel="stylesheet" href="css/blue.css" type="text/css" />
Next we will create a fake query, so that we have some records to display.
2<cfset variables.qOptions = QueryNew( "id, name, color" ) />
3
4<cfset QueryAddRow( variables.qOptions ) />
5<cfset variables.qOptions[ "id" ][ variables.qOptions.RecordCount ] = "1" />
6<cfset variables.qOptions[ "name" ][ variables.qOptions.RecordCount ] = "Value 1" />
7<cfset variables.qOptions[ "color" ][ variables.qOptions.RecordCount ] = "Red" />
8
9<cfset QueryAddRow( variables.qOptions ) />
10<cfset variables.qOptions[ "id" ][ variables.qOptions.RecordCount ] = "2" />
11<cfset variables.qOptions[ "name" ][ variables.qOptions.RecordCount ] = "Value 2" />
12<cfset variables.qOptions[ "color" ][ variables.qOptions.RecordCount ] = "Green" />
13
14<cfset QueryAddRow( variables.qOptions ) />
15<cfset variables.qOptions[ "id" ][ variables.qOptions.RecordCount ] = "3" />
16<cfset variables.qOptions[ "name" ][ variables.qOptions.RecordCount ] = "Value 3" />
17<cfset variables.qOptions[ "color" ][ variables.qOptions.RecordCount ] = "Blue" />
18
19<cfset QueryAddRow( variables.qOptions ) />
20<cfset variables.qOptions[ "id" ][ variables.qOptions.RecordCount ] = "4" />
21<cfset variables.qOptions[ "name" ][ variables.qOptions.RecordCount ] = "Value 4" />
22<cfset variables.qOptions[ "color" ][ variables.qOptions.RecordCount ] = "White" />
We have to change the way we build the table code slightly, as the JQuery plugin is expecting certain field naming conventions. Give your table a class name of tablesorter. This is the style that the JQuery is watching for.
2 <thead>
3 <tr>
4 <cfoutput>
5 <cfloop list="#variables.qOptions.columnlist#" delimiters="," index="variables.index">
6 <th>#variables.index#</th>
7 </cfloop>
8 </cfoutput>
9 </tr>
10 </thead>
In the code above I am looping over the columnlist of the query to generate headings. I've had to change the headings to 'th' tags which I never normally use.
Next we can generate the table content, making sure it is inside a 'tbody' html tag. Simply loop over the query displaying all the results within td tags.
2 <cfoutput query="variables.qOptions">
3 <tr>
4 <td>#variables.qOptions.id#</td>
5 <td>#variables.qOptions.name#</td>
6 <td>#variables.qOptions.color#</td>
7 </tr>
8 </cfoutput>
9 </tbody>
10</table>
Lastly the pager plugin is looking for a div with a class of pager. Inside this div you place your paging controls, and the value of the page recordsets that you want to offset by.
2 <form>
3 <img src="addons/pager/icons/first.png" class="first"/>
4 <img src="addons/pager/icons/prev.png" class="prev"/>
5 <input type="text" class="pagedisplay"/>
6 <img src="addons/pager/icons/next.png" class="next"/>
7 <img src="addons/pager/icons/last.png" class="last"/>
8 <select class="pagesize">
9 <option selected="selected" value="10">10</option>
10
11 <option value="20">20</option>
12 <option value="30">30</option>
13 <option value="40">40</option>
14 </select>
15 </form>
16</div>
This builds a one page table display that can paginate and sort with a single refresh.
A full example of this is here.
