• 0

JQuery Add Elements to a Div and submit with Form to DB


Question

All,

So I'm trying to use the following jquery UI:

http://jqueryui.com/demos/droppable/#photo-manager

I'm trying to have a <div> that contains all of a users images. Then I want the user to be able to drag the images from the gallery <div> to other multiple <div>s. After the user has filled in all the <div>s that they would like I would to know what images were dragged to the <div> and then actually submit these to a database. I know I have to use a <form> to do this with the Jquery and using the <div> and also don't know how to find out what image is in the <div>. Can anyone give me any ideas on the best way to accomplish this?

Thanks in advance for the help.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

I would have id's the images and divs involved. When the user has finalized their choices I would loop through the divs and collect the images nested within respective divs and create a string which can then be processed at the server side and added to the database.

Link to comment
Share on other sites

  • 0

I tried to use the .find in Jquery to do this but was unsuccessful, is there anyway that you could help me out with some sample code on how to accomplish this? Thanks!

Link to comment
Share on other sites

  • 0

Here is a simple example.


&lt;div class="collection"&gt;
&lt;div id="apple" &gt;&lt;/div&gt;
&lt;div id="orange" &gt;&lt;/div&gt;
&lt;div id="grapes" &gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="set" id="set1"&gt;
&lt;/div&gt;
&lt;div class="set" id="set2"&gt;
&lt;/div&gt;

after user modification becomes...


&lt;div class="collection"&gt;
&lt;/div&gt;

&lt;div class="set" id="set1"&gt;
&lt;div id="apple" &gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="set" id="set2"&gt;
&lt;div id="orange" &gt;&lt;/div&gt;
&lt;div id="grapes" &gt;&lt;/div&gt;
&lt;/div&gt;

Now the js code...


$sets = $('div.set');

for (i=0; i&lt;$sets.length; i++){
	var id = null;
	$cs = $sets.eq(i);
	id = $cs.attr('id');  // get group id
	$sub = $cs.children();
	for (j=0; j&lt;$sub.length; j++){
		if (j == 0){
			val += $sub.eq(j).attr('id'); // get member ids
		}
		else {
			val += ',' + $sub.eq(j).attr('id'); // get member ids if more than one member
		}
	}
	if (i == 0){
		inputval = id + ':' + val;
	}
	else {
		inputval = ';' + id + ':' + val;
	}
}


Link to comment
Share on other sites

  • 0

Can't you just try implementing a Sortable and use its serialize method? I think it'd make it a whole lot easier. :)

@sweetsam: You can also just use $.each() instead of having to iterate over jQuery's array-like collections. That's the whole point of using a library... :p

Link to comment
Share on other sites

  • 0

Can't you just try implementing a Sortable and use its serialize method? I think it'd make it a whole lot easier. :)

@sweetsam: You can also just use $.each() instead of having to iterate over jQuery's array-like collections. That's the whole point of using a library... :p

Thanks for the tip.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.