How can I use jQuery clone() on form objects and integrate json response as variables?

How can I use jQuery clone() on form objects and integrate json response as variables?

I tried asking this over at stackexchange but didn't get any responses. I'm hoping someone here can point me in the right directions, so here goes:

Ok, my objective is: To clone an entire DIV and it's contents, INCLUDING all the javascript inside of it AND integrate the json response as variables.


If I understand right, jQuery .clone() should be able to accomplish this, although I'm having trouble finding working examples of it.

However, what complicates my clone further, is that I want to clone the section, but at the same time insert variables based on the json response.

Essentially what happens is:
User clicks button --> ajax call creates a record in database --> responds with record ID (::RECEPIEVARIABLE::), it also returns the total number of records for that user in the database and adds 1, to give me the position of the new record for the page, which here is ::POSITIONVARIABLE::. I need both of these variables so that I know what record is being updated, AND what position it is on the page, as they can keep adding records with the "add" button.

Here is a stripped down version of the div that needs to be copied. It's more complex than this, but all I really need to know is how to populate those variables. Once I know that, I can expand that to the rest of the form.

  1. <div class="recepie Wrap" id="thisrecepie _::POSITIONVARIABLE::">
  2.     <script>
  3.     $(document).ready(function() {
  4.         $(function() {
  5.               $('p.otherTextBox_#::POSITIONVARIABLE::#').hide(); // Hide divs
  6.               $('input.currentButton#::POSITIONVARIABLE::#:checked').each(function() { // Show for checked option
  7.                     $('##activitylocationotherBox_#::POSITIONVARIABLE::#_' + $(this).val()).show();
  8.               });
  9.               $('input.currentButton#::POSITIONVARIABLE::#').click(function() { // When clicked
  10.                     $('p.otherTextBox_#::POSITIONVARIABLE::#').hide(); // Hide others
  11.                     $("input[name='user[recepie][#recepie.id#][activitylocationother]']").val(''); // Clear value of input
  12.                     $('##activitylocationotherBox_#::POSITIONVARIABLE::#_' + $(this).val()).show(); // Show associated one
  13.               });
  14.         });
  15.         $(function() {
  16.             $('.deleterecepieGif_#::POSITIONVARIABLE::#').hide()  // hide it initially
  17.             .ajaxStart(function() {
  18.                 $('.deleterecepieGif_#::POSITIONVARIABLE::#').show();
  19.                 $('##alertDeleteButton_#::POSITIONVARIABLE::#').hide();
  20.                 $('##recepieForm > ##btn_primary').hide();
  21.             })
  22.             .ajaxStop(function() {
  23.                 $('.deleterecepieGif_#::POSITIONVARIABLE::#').hide();
  24.                 $('##alertDeleteButton_#::POSITIONVARIABLE::#').show();
  25.             });
  26.         });
  27.     });
  28.     </script>
  29.     <div class="recepie Section learning">
  30.         <h3>Learning</h3>
  31.         <p>    
  32.             <a title="I would love to learn this recepie  with someone.">
  33.             <label for="user-recepie-::POSITIONVARIABLE::-levelid-::RECEPIEVARIABLE::">
  34.             <input id="user-recepie-::POSITIONVARIABLE::-levelid-::RECEPIEVARIABLE::" name="user[recepie][::POSITIONVARIABLE::][::RECEPIEVARIABLE::]" type="radio" value="1" /> Yes</label>
  35.             </a>
  36.             <a title="I would love to learn this recepie  with someone.">
  37.             <label for="user-recepie-::POSITIONVARIABLE::-levelid-::RECEPIEVARIABLE::">
  38.             <input id="user-recepie-::POSITIONVARIABLE::-levelid-::RECEPIEVARIABLE::" name="user[recepie][::POSITIONVARIABLE::][::RECEPIEVARIABLE::]" type="radio" value="0" /> No</label>
  39.             </a>       
  40.         </p>
  41.     </div>
  42.     <div class="recepie Section when">         
  43.         <h3>When</h3>
  44.         <p>
  45.         <label>
  46.             <input checked="checked" id="user-recepie-::POSITIONVARIABLE::-days-::RECEPIEVARIABLE::" name="user[recepie][::POSITIONVARIABLE::][days]" type="checkbox" value="1" /> Monday
  47.         </label>
  48.         <label>
  49.             <input id="user-recepie-::POSITIONVARIABLE::-days-::RECEPIEVARIABLE::" name="user[recepie][::POSITIONVARIABLE::][days]" type="checkbox" value="2" /> Tuesday
  50.         </label>       
  51.         </p>
  52.     </div>
  53. </div>

So is what I plan on doing possible/advisable?

Note: Keep in mind this code is just a stripped down version, so ignore any logic errors in it, the full code works, but is irrelevant to the question.


EDIT: Sorry, code is wrapped correctly now.