Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Coldfusion & Javascript framework - which one?

Posted on 2011-09-13
5
Medium Priority
?
342 Views
Last Modified: 2012-05-12
Hi Experts,

I have a question about javascript and coldfusion architecture. I have Coldfusion 9 running on my server and I'm getting ready to add some really cool UI features like drag and drop to it. Essentially, there will be two containers. ContainerA has all the sports activities like 100m, 200m, relay, football, baseball, softball, etc. Container B has several containers within it. These will be schoolA, schoolB, schoolC and so on.

The user should be able to drag each of the sports activities and drop them into whichever school that they wish to. My 2 choices are ext.js and jQuery. Which is the better solution for this kind of interface, why and are there any plugins/modules that are already built to do this, maybe with a lil modification I could customize to my needs?
0
Comment
Question by:roger_v
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 15

Expert Comment

by:Tomarse111
ID: 36529757
Well, CF comes with ext built in, but it does tend to be bit "bloatware" and you have to include everything when just trying to make a small UI.

It come down to personal preference really as both have extensive drag n drop modules / components. I would personally recommend jQuery, simply because I have found it to be easiest to use from a beginners point of view. You can also customise it a lot easier than the native libraries.

Some exmaple of jQuery drag and drop are:

http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/

or maybe even the sortable

http://jqueryui.com/demos/sortable/

Hope that helps

:)
0
 
LVL 1

Author Comment

by:roger_v
ID: 36529930
@Tomarse111:

Thanks for that! Question: I need to save all those actions on the backend, into a sql server database. Can I do that as well? Would it be part of an ajax database call/transaction?

P.S. I'm not a big fan of the ext.js that is shipped with CF9 - I use it just for displaying a couple of tabs and thats it.
0
 
LVL 15

Accepted Solution

by:
Tomarse111 earned 2000 total points
ID: 36530036
Yep, you can do that using .serialize() on your element (gets the order of items or the items that have been dropped) and then simply firing off an AJAX request to a remote CFC method. All very easy to accomplish using the jQuery libraries.

:)
0
 
LVL 1

Author Comment

by:roger_v
ID: 36530493
One final question: If I understand correctly, the series of steps for me to implement this are:

1. Build a custom jQuery download (with all the plugins and widgets that I need)

2. Intro to jQuery UI

3. Customizing jQuery UI to my needs

4. If needed, have custom themes

Is that the right order? And also, any special tips while familiarizing myself with the jQuery UI? Any & all tips and tricks are well appreciated!
0
 
LVL 9

Expert Comment

by:digicidal
ID: 36531912
Depending on your level of familiarity you can find several books on using jQuery (there are a few for extJS as well but I've found fewer of them and most are severely outdated).  The online documentation for both implementation and API models are pretty extensive and well thought out so you shouldn't have to dig too far for tips/techniques to help with your coding.

0

Featured Post

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question