Solved

Save sort order to hidden field with sortable jQuery plugin

Posted on 2014-03-28
7
1,751 Views
Last Modified: 2014-03-29
I am using this plugin (http://farhadi.ir/projects/html5sortable/) to create a feature for a website where a user can add form fields on the fly.

The idea is that they will give the form a name (title), and then add a series for form fields. These form fields need to be drag and drop sortable (thus the plugin) so the user can rearrange the order.

Once they are satisfied with the order, they will click the "Create Form" button, and the data to create the form will be submitted.

The data itself will be stored in three tables. Table 1: Forms, Table 2: Fields, and Table 3: Forms_Has_fields. The Forms_Has_fields table will includes a sort_order column, which tells the system in what order to display the fields.

That's where this question is important: when a field is re-sorted using the drag and drop feature, I need a way to save the sort order in an <input type="hidden"> or some other form control so I can parse it with PHP and create the fields properly.

If this was in PHP, I would just keep everything in an associative array: ($fieldname => $sortorder), but that doesn't seem like it's an option in javascript. Ideally, I could keep this in an array in Javascript, and then when sumit was clicked, dump that array as a JSON to an <input> field, and POST it to PHP. But if that's possible, I don't know how to do it.

If there is another (more elegant) way to handle this, I am open to suggestions.
0
Comment
Question by:DrDamnit
  • 4
  • 3
7 Comments
 
LVL 74

Accepted Solution

by:
käµfm³d   👽 earned 500 total points
Comment Utility
Since any object in Javascript can be defined as a string, why not use something like serializeArray to convert your array into a string that can be put into the hidden field. It will be posted back to the server, but you won't be doing anything with it--just dumping it back out to the hidden field in the response. On page load, you can call parseJson to get the data back into an array.
0
 
LVL 32

Author Comment

by:DrDamnit
Comment Utility
But here's my hangup: when I change the sort order, it will obviously fire an event... is the array still available after the page loads and the $(document).ready() has finished? Keep in mind, I am adding a DOM / form element (I'm using <li data-name="foo">foo</li>).
0
 
LVL 32

Author Comment

by:DrDamnit
Comment Utility
Additionally... I want to re-generate the <input> data every time. I can sift, sort, push and pop the array, but dumping to JSON every time will make it clean.

Should this array be a global variable? (I hate globals, but is this the best way?)
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 74

Expert Comment

by:käµfm³d 👽
Comment Utility
If you keep it in a global variable (i.e. not declared locally to any particular function [or event]), then it should be. Obviously you'll have to update it as the sort order is modified.
0
 
LVL 74

Expert Comment

by:käµfm³d 👽
Comment Utility
Feel free to wait for one of the web-dev gurus to pop in. There may be a more elegant way to handle this; this is just what popped in my head upon reading your question.
0
 
LVL 32

Author Comment

by:DrDamnit
Comment Utility
Turns out, I was making it more complicated than it needed to be. I am giving you the points because you answered my question; however I did find a more elegant way of doing it. The <ul> is, in fact, the order and array already. There is no reason to create a separate array to manage what is being saved in what order because the <ul> does it already. All you have to do is itterate through it.

And, best of all, I didn't have to use global variables.
<script>
function buildOrder() {
	var buffer = [];
	//Rebuild the sort order array.
	$("#theFields li").each(function(index){
		buffer.push($(this).text());
		console.log(buffer);
	});
}
$(document).ready(function(event){
	$("#addField").click(function(event){
		event.preventDefault();
		var fieldName = $("#fieldName").val();
		$("#theFields").append("<li><div class=\"form-group\"><label>"+fieldName+"</label><input type=\"text\" class=\"form-control\"></div></li>");
			buildOrder();
		$(".sortable").sortable().bind('sortupdate',function() {
			buildOrder();
		})
	});
	$("#formName").keyup(function(event){
		$("#formTitle").html($("#formName").val());
	});
});
</script>

Open in new window

0
 
LVL 32

Author Closing Comment

by:DrDamnit
Comment Utility
Oh, and I am using serializeArray. It was the other bit that was more elegant.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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 …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now