jquery - Dynamic Bootstrap Table/Form using JSON

Question

I'm using the following code to generate a dynamic form inside of a table (Requirement is to use bootstrap tables for consistent layout site-wide).

$(document).ready(function() {
    $('select.changeLanguage').change(function(){

        $("#ValuesFromDB").empty();
        $.ajax({
                type: 'POST',
                url: '/includes/admin/return.php',
                data: {LanguageSelectedDropdown: $('select.changeLanguage').val()},
                dataType: 'json',
                success: function (data) {
                $('#divid').show();  //Show the hidden div

                $.each(data, function (index, item) {
                    var eachrow = ""
                         + '<tr><td><label for=' + item[0] + '>' + item[0] + '</label></td>'
                         + '<td id="autosubmit"><input type="text" class="form-control" id="' + item[1] + '" placeholder="' + item[1] + '" onkeyup="submit()"></td></tr>'
                         + '';  // placeholder (item 88)
                $('#ValuesFromDB').append(eachrow)

                });  // END EACH ROW FUNCTION       
            }  // END SUCCESS   
        });  // END AJAX
    });  // END CHANGE FUNCTION
}); // END DOCUMENT READY

The basic concept is that I have a dropdown box to select a language. Once selected, the database is queried and the form, along with the table is generated into a previously hidden div (#divid).

This all appears to be working and the page looks like it's generated correctly.

The /table/form layout is as follows;

<div class="container">
    <div class="row">
        <div class="table-responsive">          
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>        
                        <th>Original</th>
                        <th>Translation</th>
                    </tr>
                </thead>
                    <form id="languageset"> 
                    <tbody id="ValuesFromDB">
                    </tbody>
                    </form>
            </table>
                <button type="submit" id="submit" class="btn btn-default"><?php echo lang('Save Changes'); ?></button>  
        </div>
    </div>  
</div>

I don't see any issue with the way that this is set up however, when I try to submit the form using;

  $(function () {
        $('#languageset').on('submit', function (e) {
          e.preventDefault();
          $.ajax({
            type: 'post',
            url: '/includes/admin/return2.php',
            data: $('#languageset').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
        });
      });

Nothing happens except the alert.

Digging in to this a little, the generated source code shows;

<div class="container">
    <div class="row">
        <div class="table-responsive">          
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>        
                        <th>Original</th>
                        <th>Translation</th>
                    </tr>
                </thead>
                    <form id="languageset"></form>
                    <tbody id="ValuesFromDB"><tr><td><label for="field1">Value1</label></td><td id="autosubmit"><input class="form-control" id="field1" placeholder="field1" onkeyup="submit()" data-cip-id="cIPJQ342845640" type="text"></td></tr>
                    <tr><td><label for="field2">Value2</label></td><td id="autosubmit"><input class="form-control" id="field2" placeholder="field2" onkeyup="submit()" data-cip-id="cIPJQ342845641" type="text"></td></tr></tbody>  
            </table>
                <button type="submit" id="submit" class="btn btn-default">Save Changes</button> 
        </div>
    </div>  
</div>

So, the question... The form in the generated source code appears to be opening and then closing without containing any of the data that I'm appending in the AJAX success - Why?

Answer 1

There's something funny about the bootstrap table formatting. I've re-designed the form to be set in a DIV and this is now all working.

        $.each(data, function (index, item) {
            var eachrow = 
                   '<div id="' + item[0] + '-group" class="form-group">'
                 + '<label for=' + item[0] + '>' + item[0] + '</label>'
                 + '<input type="text" class="form-control" name="' + item[0] + '" id="' + item[0] + '" value="' + item[1] + '">'
                 + '</div>';
        $('#ValuesFromDB').append(eachrow);

I'll worry about the layout later.