CODEWITHSUNDEEP
jquery-mobile
pja
pja

Reputation: 125

jQuery mobile clone

I am trying to get jQuery-mobile to clone a div like I get it to do on jsfiddle.

head

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="form.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.maskedinput.min.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.min.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->

<script type="text/javascript" src="CreateXMLScript.js"></script>

<script>
    $(document).bind('mobileinit', function() {
    $.mobile.page.prototype.options.addBackBtn= true;
    $.mobile.page.prototype.options.backBtnText="Back";
    $.mobile.page.prototype.options.backBtnIcon="arrow-l";
    $.mobile.selectmenu.prototype.options.nativeMenu = false;
     $.mobile.page.prototype.options.keepNative = ".native";
    $.mobile.keepNative=".native";
    })
</script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

HTML

<div id="Template" class="template hide">
    <div class="_100">
       <div class="_25"> 
        <fieldset>   
         <label class="label_analysis" for="analysis">Analyte:</label>
           <select class="select_analyte" name="analysis" id="analysis">
           <option value="">Select</option>
               <option value="TN">TN</option>
               <option value="TP,NO2+3">TP,NO2+3</option>
               <option value="TP,NO2+3,NH3+4">TP,NO2+3,NH3+4</option>
               <option value="DO">Dissolved Orthophosphate</option>
               <option value="TR">TR Metals, Hardness</option>
               <option value="FF">Dissolved Aluminum (FF)</option>
               <option value="ULL">TR Metals (ULL Hg)</option>
               <option value="TSS">TSS</option>
               <option value="TSS/TDS">TSS/TDS</option>
               <option value="DM">Dissolved Metals (FF)</option>
               <option value="TOC">TOC</option>
               <option value="ABF">Anions, Bromide, Fluoride</option>
               <option value="CH">Cations, Hardness</option>
            </select>  
          </fieldset>
         </div>

         <div data-role="controlgroup" class="_13">
           <label><input type="checkbox" data-mini="true" name="Filtered" id="Filtered" value="True">0.45u Filtered</label>
           <label><input type="checkbox" data-mini="true" name="Dup" id="Dup" value="True">Field Dup</label>
          </div>

       <div class="_25">
         <fieldset>
          <label class="label_preserve" for="preserve">Preserved</label>
            <select class="select_preserve" name="preserve" id="preserve">
               <option value="">Select</option>
               <option value="HNO3">HNO&#8323;</option>
               <option value="H2SO4">H&#8322;SO&#8324;</option>
               <option value="H3PO4">H&#8323;PO&#8324;</option>
               <option value="HCL">HCL</option>
               <option value="None1">None</option>
            </select>
          </fieldset>
        </div> 
        <div class="_20">
         <fieldset> 
           <label class="label_cool" for="cool">Cooled</label>
             <select class="select_cool" name="cool" id="cool">  
               <option value="">Select</option>
               <option value="Ice">Ice</option>
               <option value="Frozen">Frozen</option>
               <option value="None">None</option>
             </select>
        </fieldset>
       </div>
       <div class="_13">
       <a href="#" type="button" data-theme="e" data-mini="true" data-icon="delete" title="Remove" class="removeNew">Remove</a>
       </div>
     </div>
   </div> 

    <div id="addNew">   
    <a href="#" type="button" data-theme="b" data-icon="add" title="Duplicate" class="showNew">ADD ANALYTE</a>
    </div>

Script

 <script>
    $(document).ready(function() {
      (function ($) {
    var Template = $('#Template');
    var count = 0;
    var nextId = 0;

    Template.find('.removeNew').on('click', function (e) {
        e.preventDefault();
        $(this).closest('.template').remove();
        count--;
    });

    function cloneTemplate(removable) {
        var clone = Template.clone(true, true);
        clone.attr('id', clone.attr('id') + nextId);

        clone.find('label[for]').each(function( index ) {
            var elem = $(this);
            elem.attr('for', elem.attr('for') + nextId);
        });

        clone.find('select, input').each(function( index ) {
            var elem = $(this);
            elem.attr('id', elem.attr('id') + nextId);
            elem.attr('name', elem.attr('name') + nextId);
        });

        if (!removable) {
            clone.find('.removeNew').remove();
        }

        clone.insertBefore("#addNew").removeClass('hide');
        count++;
        nextId++;
    }

    // Create First Analyte and delete the remove button.
    cloneTemplate(false);

    $('a.showNew').on('click', function (e) {
        e.preventDefault();
        cloneTemplate(true);
        return false;
    });
   })(jQuery)
    });
    </script>

I have received tons of help with jQuery but no matter what I do, it just won't work in jQuery-mobile. Either it clones upside down (the 1st item becomes last and all fields are populated) or the new fields on the new div won't let me populate them (the current issue).

I didn't create a Fiddle as everything I have tried works in the fiddle, just not in Mobile.

Upvotes: 0

Views: 129

Answers (1)

Tasos
Tasos

Reputation: 5361

I checked the source of your pages from the link you provided, im not sure exactly what you are trying to achieve as you have a Complex Form. However, place this amended code i made below just before the </body> tag of your page and remove the other script part you have at the moment. Make sure you do a backup of your JQM APP before just incase you need to Undo these changes i am providing.

I also noticed a few $(document).ready(function() { in your pages, these are not needed so remove them. Just a bare bones click functions are ok. You can consolidate all these under one <script> ///// </script>. Where you place your functions is important, as some need to be in the <head> some in the <body> and some after the </body> or </html> tags

<script>

    var Template = $('#Template');
    var count = 0;
    var nextId = 0;

    Template.find('.removeNew').on('click', function (e) {
        e.preventDefault();
        $(this).closest('.template').remove();
        count--;
    });

    function cloneTemplate(removable) {
        var clone = Template.clone(true, true);
        clone.attr('id', clone.attr('id') + nextId);

        clone.find('label[for]').each(function( index ) {
            var elem = $(this);
            elem.attr('for', elem.attr('for') + nextId);
        });

        clone.find('select, input').each(function( index ) {
            var elem = $(this);
            elem.attr('id', elem.attr('id') + nextId);
            elem.attr('name', elem.attr('name') + nextId);
        });

        if (!removable) {
            clone.find('.removeNew').remove();
        }

        clone.insertBefore("#addNew").removeClass('hide');
        count++;
        nextId++;
    }

    // Create First Analyte and delete the remove button.
    cloneTemplate(false);

    $('a.showNew').on('click', function (e) {
        e.preventDefault();
        cloneTemplate(true);
        return false;
    });

    </script>

Upvotes: 1

Related Questions