Need help fixing ColdFusion/JQuery based drag n' drop reordering of items : ColdFusion, JQuery, Javascript, XHTML, CSS

Experts Exchange

	[x] Posted via EE Mobile
	Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

08/26/2009 at 10:14AM PDT, ID: 24683919

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

9.2

Need help fixing ColdFusion/JQuery based drag n' drop reordering of items

Asked by egoselfaxis in Cold Fusion Markup Language, JavaScript, Asynchronous Javascript and XML (AJAX)

Tags: ColdFusion, JQuery, Javascript, XHTML, CSS

I'm trying to get a ColdFusion/JQuery based example of drag n' drop reordering of items working, but am encountering some difficulty. A non-working example (and the underlying source code) can be viewed at the following url:

http://www.carolinegleason.com/test.cfm?add=true&cat=men&ID=18&thumb

Additionally -- the non-rendered source code is attached (see code snippet below)

Can anywhere here identify specifically why my list items aren't drag n' droppable?

Thanks,
- Yvan

View the Solution FREE for 30 Days

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:

           
           
             <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
<head>
 
<title>TITLE</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<cfajaxproxy cfc="reorder" jsclassname="myProxy">  
 
<link type="text/css" href="admin/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
 
<script type="text/javascript" src="admin/js/jquery-1.3.2.min.js"></script>
 
<script type="text/javascript" src="admin/js/jquery-ui-1.7.2.custom.min.js"></script>
 
<script type="text/javascript">
// this creates an instance of the js proxy to cfc which we created with cfajaxproxy //
var p = new myProxy();
 
// this jQuery function executes after page DOM is loaded
$(document).ready(function(){
  $("ul.items").disableSelection(); // this disables selection of item name text. not necessary, but a nice touch when you use Sortable
  var $items = $("ul.menuitems"); // this is jQuery object of our items' container
  initSortablesArray($items, 'li', '#tabs', 'y', 'updateItemsOrder'); //initialize Sortable for our items container
});
 
// this function creates the Sortable for items
var initSortablesArray = function($arrEl, sortItems, sortContainer, sortAxis, fnCallback) {
  $arrEl.each(function() {
    var $el = $(this);
    $el.sortable({
      items: sortItems, // element to be dragged, <li> in this example
      containment: sortContainer, // element dragging is contained to, div id="tabs" in this example
      axis: sortAxis, // axis to allow dragging along, Y in this example
      update: function(event, ui){ // this function fires after an item changes its position/order after drag
        var arrOrder = $el.sortable('toArray'); //serialize the items into array
        console.log(arrOrder); //debug: will display the serialized array of item in Firebug console - remove when everything is working
        var fnToExecute = fnCallback+"('"+arrOrder+"')";
        setTimeout(fnToExecute, 0); //execute callback fucntion (updateItemsOrder in this example)
      }
    });
  });
};
 
/*
this function is called on update event in Sortable list.
i use cfajaxproxy to create a js proxy to a remote cfc function which updates the items order in the db.
see the CFC section above for the function code.
*/
var updateItemsOrder = function(arrOrder) {
  p.setCallbackHandler(updateOrderCB); //js function to execute after items order is updated in db
  p.setErrorHandler(jsProxyError);//js function to execute on cfc/proxy error
  p.updateOrder(arrOrder);// cfc function to execute
};
 
//success handler
var updateOrderCB = function(result) {
  if(result) {
    alert("Items order updated!");//change to whatever you want to do after items order has been updated
  } else {
    jsProxyError('n/a', 'Could not update items order...');// change to whatever else you want to do on error in updating items order
  }
};
 
// error handler
var jsProxyError = function(code, msg) {
  alert("ERROR: "+msg+" (err code: "+code+")");//change to whatever you do to show errors
};
</script>
 
</head>
 
<body>    
 
<!--- QUERY DATABASE TO RETRIEVE PHOTOS //--->
          
<cfquery datasource="#application.datasource#" name="get_photos">
    SELECT * 
    FROM photos  
    WHERE category = 'men' AND request_ID = #URL.ID# 
    ORDER BY priority ASC
</cfquery>        
 
<!--- QUERY DATABASE TO RETRIEVE PHOTOS //--->  
 
<cfset i = 1>
          	
<cfset p = 1> 
 
<h1>RE-ORDER ITEMS</h1>
            
<div id="tabs">
            
	<ul class="items">
			
	<cfoutput query="get_photos">
			
		<li id="i_#ID#"><img src="photos/tn_#photo#" border="0"></li>
            
		<cfset i = i + 1>
            
		<cfif currentrow MOD 2 EQ 0>
                
            <cfset p = p + 1>
                
        </cfif>
            
	</cfoutput>
            
</ul>
            
</div>  
 
</body>
</html>
 
------------------------- BEGIN CONTENTS of reorder.cfc ----------------------
 
 
<cffunction name="updateOrder" access="remote" returntype="boolean" output="no">
<cfargument name="items_order" required="yes" type="any">
<cfscript>
var itemsorder = listtoarray(trim(arguments.items_order));// create local array from received list of element IDs
var qUpdateOrder = "";//create a local var for update query
var x = 0;// this local var will be the cfloop index, which is also the new ordinal of each item
var itemid = 0;//local var for item's id
var result = true;// function result
</cfscript>
<cfloop from="1" to="#arraylen(itemsorder)#" index="x">
  <!--- our items in the page are <li> elements with unique IDs like i_#item_id#, thus to extract the item's id from received list of ordered items we need to parse each list element and get the part after _ - listlast() cf function makes it very easy. --->
  <cfset itemid = listlast(trim(itemsorder[x]), "_")>
  <cftry>
    <cfquery name="qUpdateOrder" datasource="#application.datasource#">
    	UPDATE photos
    	SET priority = <cfqueryparam cfsqltype="cf_sql_smallint" value="#x#">
    	WHERE ID = <cfqueryparam cfsqltype="cf_sql_integer" value="#itemid#">
    </cfquery>
    <cfcatch>
      <cfset result = false>
    </cfcatch>
  </cftry>
</cfloop>
<cfreturn result />
</cffunction>

           
         

20091111-EE-VQP-91 - Hierarchy / EE_QW_3_20080625

1. azadisaryev560,617
2. _agx_365,804
3. gdemaria245,773
4. duncancu...176,870
5. SidFishes165,676
6. Jones911118,336
7. Zvonko88,550
8. erikTsomik82,442
9. srikanthm...45,400
10. myselfran...32,928
11. zadoc32,761
12. Tomarse...30,762
13. mwvisa124,650
14. Plucka22,500
15. Mr_Nil21,608
16. pravinasar19,650
17. black0ps13,150
18. js_vaughan11,400
19. mplungjan11,000
20. albrandw...10,700
21. eszaq10,575
22. dgrafx10,100
23. clickitysplit9,250
24. s8web8,200
25. hielo8,080

1. gdemaria860,481
2. _agx_846,549
3. azadisaryev650,197
4. SidFishes575,941
5. Zvonko408,262
6. duncancu...242,563
7. SBennett218,923
8. erikTsomik159,897
9. Plucka153,881
10. Jones911146,248
11. zadoc142,564
12. hielo93,782
13. pmascari77,529
14. js_vaughan70,620
15. Jester_4867,845
16. srikanthm...67,452
17. Mr_Nil63,933
18. dgrafx61,250
19. angelIII42,818
20. pigmentarts42,698
21. eszaq42,639
22. Mause39,900
23. Tomarse...34,387
24. digicidal33,950
25. danrosent...33,200

Need help fixing ColdFusion/JQuery based drag n' drop reordering of items

Asked by egoselfaxis in Cold Fusion Markup Language, JavaScript, Asynchronous Javascript and XML (AJAX)

Tags: ColdFusion, JQuery, Javascript, XHTML, CSS

About this solution