Data storage/access/writing/editing and ajax calling
<p>I've come up with a way to maintain and combine two lists, however I am a little puzzled exactly how I can display the result without the page being stored. I thought <code>.data()</code> might be the solution - but this is new to me.</p>

<p>Basically I have 2 lists:</p>

<pre><code>&lt;ul id="choice_1"&gt;
  &lt;li&gt;&lt;img id="c1_1" src="image_path"&gt;Option 1&lt;/li&gt;
  &lt;li&gt;&lt;img id="c1_2" src="image_path"&gt;Option 2&lt;/li&gt;
  &lt;li&gt;&lt;img id="c1_3" src="image_path"&gt;Option 3&lt;/li&gt;
&lt;/ul&gt;

&lt;ul id="choice_2"&gt;
  &lt;li&gt;&lt;img id="c2_1" src="image_path"&gt;Option A&lt;/li&gt;
  &lt;li&gt;&lt;img id="c2_2" src="image_path"&gt;Option B&lt;/li&gt;
  &lt;li&gt;&lt;img id="c2_3" src="image_path"&gt;Option C&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Then with jQuery I've made a script where you can click the image to select the choice(s) from the left and right column, where the image changes onclick and stores the ID numbers in two hidden inputs - <code>#hidden_1</code> and <code>#hidden_2</code> (this part works perfectly, and stores just the number from the image ID). I've also made a button <code>#transfer</code> which, when clicked, gets the values of the hidden text inputs and resets the choices as if nothing has been selected.</p>

<p>I thought first that I should pass the hidden data via ajax to <code>#groups</code>, however since I don't want to save the data in MySQL until someone hits the save button, and I also want to process the data (so that if someone were to select Option 1 with Options A+B, then next selecting Option 2 with A+B, I would process the data in PHP to show the result being Option 1+2, A+B - since they effectively go together. Then I would use the ID values to display the name of the Options. Then I could either delete or edit (by sending the data back to the lists) the groups.</p>

<p>This made me think that somehow <code>.data()</code> could be used to store the data, however I'm unsure how I can access it from <code>#groups</code> since it has been called via ajax. I also thought that would be handy, especially if I later came to edit the groups after they were stored in MySQL. My ajax call is below:</p>

<pre><code>var data_array = {};
data_array['id'] = $("#hidden_id").val(); // only used when editing
data_array['c1'] = $("#hidden_1").val();
data_array['c2'] = $("#hidden_2").val();

$.ajax({
    url: "processor.php",
    type: "POST",
    data: data_array,
    success: function(response){
        $("#groups").html(response);
    },
    error: function(){
        $("#groups").html("&lt;p&gt;Could not process choices&lt;/p&gt;");
    }
});
</code></pre>

<p>In <code>processor.php</code> I thought that I could access <code>.data()</code> simply by calling it <code>$("data").data();</code>, but it seems to just return null - though I then thought that even if I could call it, how can I allow PHP to process the data, so I guess I'd have to pass that through ajax anyway. But then, how could I delete something from <code>#groups</code> so it doesn't get passed back later and get displayed? Or how to I overwrite the data with the updated edit? If I could access <code>.data()</code> in processor.php after ajax call, write to it, then make it available to the rest of the page, then that would be the goal.</p>

<p>I hope someone can help me figure this out - I am a bit new to <code>.data()</code>, especially accessing/writing from inside some called by ajax.</p>
