jqueryperformancejquery-mobilejquery-mobile-button

JQUERY MOBILE clone form with select, and reset options


I'm trying to clone a form that is based on jquery mobile design. The problem is when the select is cloned, because I can not select other options. Please check the code at https://jsfiddle.net/vgacia24/1jmxjzya/5/

here is the code

$(function () {
    $('#btnAdd').click(function () {
        var num = $('.clonedInput').length, // how many "duplicatable" input fields we currently have
        newNum = new Number(num + 1), // the numeric ID of the new input field being added
        newElem = $('#testingDiv' + num).clone().attr('id', 'testingDiv' + newNum).fadeIn('slow');// Crea un nuevo elemento usando "clone()", y manipula el ID usando el valor "newNum"
       
        // TEXTO DIVISOR
        newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('INGREDIENTE ' + newNum);

       
        // LISTA 2
        newElem.find('.test-select-label2').attr('for', 'ID' + newNum + '_select');
        newElem.find('.test-select2').attr('id', 'ID' + newNum + '_select').attr('name', 'ID' + newNum + '_select').val('');

        // Insert el nuevo elemento despues del ultimo campo "input" duplicado
        $('#testingDiv' + num).after(newElem);

         // enable the "remove" button
        $('#btnDel').attr('disabled', false);

        // Cantidad limite de formularios que se puede agregar, Por ahora tiene un limite de 10
        if (newNum == 10) $('#btnAdd').attr('disabled', true).prop('value', "Limite de Formulario Alcanzado");
    });

    $('#btnDel').click(function () {
        // EN EL SISTEMA NO SE ESTA USANDO LA OPCION DE ELIMINAR
        if (confirm("¿Esta seguro que desea eliminar el ULTIMO ingrediente agregado?")) { 
            var num = $('.clonedInput').length;
            // how many "duplicatable" input fields we currently have
            $('#testingDiv' + num).slideUp('slow', function () {
                $(this).remove();
                // if only one element remains, disable the "remove" button
                if (num - 1 === 1) $('#btnDel').attr('disabled', true);
                // enable the "add" button
                $('#btnAdd').attr('disabled', false).prop('value', "[ + ] add to this form");
            });
        }
        return false;
        // remove the last element

        // enable the "add" button
        $('#btnAdd').attr('disabled', false);
    });

    $('#btnDel').attr('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
                        <div data-role="fieldcontain">
                            <ul data-role="listview" data-inset="true" id="testingDiv1" class="clonedInput" >
                                <h2 id="reference" name="reference" class="heading-reference">INGREDIENTE</h2>
                            
                                <li data-role="fieldcontain">
                                   <form>
                                                            <select  name="unidad" id="unidad" class="test-select2" data-native-menu="true">
                                                                <option value="">Seleccionar Unidad</option>
                                                                <option value="kg">Kg</option>
                                                                <option value="lts">Lts</option>
                                                            </select> 
                                                         </form>
                                                    </li>
                                                
                            </ul>
                            <div id="add-del-buttons">
                                <ul data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b">
                                  
                                    <button type="button"   id="btnAdd" data-role="button" >Agregar Otro Ingrediente</button>
                                    <button type="button"   id="btnDel" data-role="button" >Eliminar Último Ingrediente</button>
                                </ul>
                            </div>
                                <button type="submit"   id="guardarReceta" data-role="button" >Guardar</button>
                        </div>
</form>

Please check the code at jsfiddle link to try with jquery mobile https://jsfiddle.net/vgacia24/1jmxjzya/3/


Solution

  • Using jQuery.clone() is a terrible idea here because jQueryMobile will modify your HTML to create some elements.

    In our case it replace this :

    <select name="unidad" id="unidad" class="test-select2" data-native-menu="true">
        <option value="">Seleccionar Unidad</option>
        <option value="kg">Kg</option>
        <option value="lts">Lts</option>
     </select>
    

    By this :

    <div class="ui-select">
        <div id="unidad-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span class="test-select2">Seleccionar Unidad</span>
            <select name="unidad" id="unidad" class="test-select2" data-native-menu="true">
                <option value="">Seleccionar Unidad</option>
                <option value="kg">Kg</option>
                <option value="lts">Lts</option>
             </select>
        </div>
    </div>
    

    So your clone also copy the generated HTML from jQueryMobile. A quick dirty fix would be to manipulate this new HTML to remove useless stuff and ask jQueryMobile to apply again.

    You can do so this way :

    // LISTA 2
        newElem.find('.test-select-label2').attr('for', 'ID' + newNum + '_select');
        var tmp = newElem.find('select').clone();
        newElem.find('.ui-select').before(tmp).remove();
        newElem.find('.test-select2').attr('id', 'ID' + newNum + '_select').attr('name', 'ID' + newNum + '_select').val('').selectmenu();
    

    Please keep in mind it will be really difficult for you to maintain such code. You should find a way to do not use jQuery.clone().

    Here is the jsFiddle ;) : https://jsfiddle.net/1jmxjzya/4/