How to create nested child html using <div> and JavaScript or jQuery in an HTML?

Question

I'm setting up Laravel Blade View in my web app. How to create nested or looping html in div using JavaScript or jQuery? Primarily I'm using drop down listbox using select option tags where it is supposed to iterate among each of database table columns.

I've tried using JavaScript and jQuery but it can only show the first iteration.

HTML:

Filter
<div id="filterDiv">
    <div id="filterLaporan">
        <select name="kolomFilter" id="selectFilter">
        </select>
    </div>
    <select name="kondisi" id="kondisi">
        <option value="like">like</option>
        <option value="=">=</option>
        <option value="!=">!=</option>
        <option value=">">></option>
        <option value="<"><</option> 
    </select>
    <input type="text" name="valueKondisi">
    <select name="kondisiAndOr" id="andKondisi">
        <option value="">-</option>
        <option value="and">AND</option>
        <option value="or">OR</option>
    </select>
</div>                      
<div id="kondisiHeader">                        
</div>                               
<br>

JavaScript:

$("#andKondisi").on('change', function (e) {
    var dbTable = localStorage.getItem('dbTable');
    var ddlb = '';
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "laporan/header",
        type: "POST",
        data: {
            table: dbTable
        },
        beforeSend: function () {
            $("#kondisiHeader").empty();
            ddlb = ddlb + '<br>Filter<br>';
            ddlb = ddlb + '<div id="filterDiv">';
            //alert('kondisiHeader');
        },
        success: function (result) {
            ddlb = ddlb + '<select name="filter" id="kondisiSelect">';              
            $.each(result, function (e, item) {               
            ddlb = ddlb + '<option value="' + item.column_name + '">' + item.column_name + '</option>';

            });
            ddlb = ddlb + '</select>';
            ddlb = ddlb + '<select name="kondisi" id="kondisi1">';
            ddlb = ddlb + '<option value="like">like</option>';
            ddlb = ddlb + '<option value="=">=</option>';
            ddlb = ddlb + '<option value="!=">!=</option>';
            ddlb = ddlb + '<option value=">">></option>';
            ddlb = ddlb + '<option value="<"><</option>';
            ddlb = ddlb + '</select>';                
            ddlb = ddlb + '<input type="text" name="valueKondisi1">';
            ddlb = ddlb + '<select name="kondisiAndOr" id="andKondisi1">';
            ddlb = ddlb + '<option value="">-</option>';
            ddlb = ddlb + '<option value="and">AND</option>';
            ddlb = ddlb + '<option value="or">OR</option>';
            ddlb = ddlb + '</select>';
            ddlb = ddlb + '</div>';
            ddlb = ddlb + '<div id="kondisiHeader2"></div>';

            $("#kondisiHeader").html(ddlb);                       
        } 
    });
    localStorage.setItem('dbTable', dbTable);             
});

$("#andKondisi1").on('change', function (e) {
    var dbTable = localStorage.getItem('dbTable');
    var dbTable2 = dbTable;
    var ddlb = '';
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "laporan/header",
        type: "POST",
        data: {
            table: dbTable
        },
        beforeSend: function () {
            $("#kondisiHeader2").empty();
            ddlb = ddlb + '<br>Filter<br>';
            ddlb = ddlb + '<div id="filterDiv">';
            ddlb = ddlb + '<select name="kondisi" id="kondisi2">';
            ddlb = ddlb + '<option value="like">like</option>';
            ddlb = ddlb + '<option value="=">=</option>';
            ddlb = ddlb + '<option value="!=">!=</option>';
            ddlb = ddlb + '<option value=">">></option>';
            ddlb = ddlb + '<option value="<"><</option>';
            ddlb = ddlb + '</select>';
            alert('trello');
        },
        success: function (result) {                
            ddlb = ddlb + '<select name="filter" id="kondisiSelect2">';              
            $.each(result, function (e, item) {               
            ddlb = ddlb + '<option value="' + item.column_name + '">' + item.column_name + '</option>';

            });       
            ddlb = ddlb + '</select>';
            ddlb = ddlb + '<input type="text" name="valueKondisi2">';
            ddlb = ddlb + '<select name="kondisiAndOr2" id="andKondisi2">';
            ddlb = ddlb + '<option value="">-</option>';
            ddlb = ddlb + '<option value="and">AND</option>';
            ddlb = ddlb + '<option value="or">OR</option>';
            ddlb = ddlb + '</select>';
            ddlb = ddlb + '</div>';
            ddlb = ddlb + '<div id="kondisiHeader3"></div>';

            $("#kondisiHeader2").html(ddlb);           
        } 
    });
});

How to display all possible drop down list boxes for each of the total of database table columns after selecting the AND, OR select option?

It sounds like you want to create a GUI where the user can build an SQL query? Looking at your code, you'll want to a) keep in mind that an id must be unique inside a document, and a name inside a form (unless radio buttons, ofc) and b) that you should build the DOM, not compose HTML. jQuery has $('<option>') for instance to build an option element. — user5734311
– user5734311, Commented Jul 11, 2019 at 8:15

trulixit99 · Accepted Answer · 2019-07-12 07:21:42Z

My question is solved using the following snippets. The codes will display each of all possible database table columns for multiple filter logic purpose.

HTML:

<div id="filterDiv">
    <div id="filterLaporan">
        <select name="kolomFilter" id="selectFilter">
        </select>
    </div>
    <select name="kondisi" id="kondisi">
        <option value="like">like</option>
        <option value="=">=</option>
        <option value="!=">!=</option>
        <option value=">">></option>
        <option value="<"><</option> 
    </select>
    <input type="text" name="valueKondisi">
    <select name="kondisiAndOr" id="andKondisi">
        <option value="">-</option>
        <option value="and">AND</option>
        <option value="or">OR</option>
    </select>
</div>                      
<div id="kondisiHeader">                        
</div>                               
<br>

JavaScript:

var dbTable = localStorage.getItem('dbTable');
    var ddlb = '';
    var ddlb2 = '';
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "laporan/header",
        type: "POST",
        data: {
            table: dbTable
        },
        beforeSend: function () {
            $("#kondisiHeader").empty();
            ddlb = ddlb + '<br>Filter<br>';
            ddlb2 = ddlb2 + '<br>Filter<br>';
            ddlb = ddlb + '<div><div id="filterDiv1">';
            ddlb2 = ddlb2 + '<div><div id="filterDiv2">';                
        },
        success: function (result) {
            ddlb = ddlb + '<select name="filter1" id="kondisiSelect1">'; 
            ddlb2 = ddlb2 + '<select name="filter2" id="kondisiSelect2">'; 
            $.each(result, function (e, item) {               
            ddlb = ddlb + '<option value="' + item.column_name + '">' + item.column_name + '</option>';
            ddlb2 = ddlb2 + '<option value="' + item.column_name + '">' + item.column_name + '</option>';
            });
            ddlb = ddlb + '</select>';
            ddlb2 = ddlb2 + '</select>';
            ddlb = ddlb + '<select name="kondisi1" id="kondisi1">';
            ddlb2 = ddlb2 + '<select name="kondisi2" id="kondisi2">';
            ddlb = ddlb + '<option value="like">like</option>';
            ddlb2 = ddlb2 + '<option value="like">like</option>';
            ddlb = ddlb + '<option value="=">=</option>';
            ddlb2 = ddlb2 + '<option value="=">=</option>';
            ddlb = ddlb + '<option value="!=">!=</option>';
            ddlb2 = ddlb2 + '<option value="!=">!=</option>';
            ddlb = ddlb + '<option value=">">></option>';
            ddlb2 = ddlb2 + '<option value=">">></option>';
            ddlb = ddlb + '<option value="<"><</option>';
            ddlb2 = ddlb2 + '<option value="<"><</option>';
            ddlb = ddlb + '</select>';
            ddlb2 = ddlb2 + '</select>';               
            ddlb = ddlb + '<input type="text" name="valueKondisi1">';
            ddlb2 = ddlb2 + '<input type="text" name="valueKondisi2">';
            ddlb = ddlb + '<select name="kondisiAndOr1" id="andKondisi1">';
            ddlb2 = ddlb2 + '<select name="kondisiAndOr2" id="andKondisi2">';
            ddlb = ddlb + '<option value="">-</option>';
            ddlb2 = ddlb2 + '<option value="">-</option>';
            ddlb = ddlb + '<option value="and">AND</option>';
            ddlb2 = ddlb2 + '<option value="and">AND</option>';
            ddlb = ddlb + '<option value="or">OR</option>';
            ddlb2 = ddlb2 + '<option value="or">OR</option>';
            ddlb = ddlb + '</select>';
            ddlb2 = ddlb2 + '</select>';
            ddlb = ddlb + '</div>';
            ddlb2 = ddlb2 + '</div>';
            ddlb = ddlb + '<div id="kondisiHeader2"></div></div>';
            ddlb2 = ddlb2 + '<div id="kondisiHeader2"></div></div>';
            block_to_insert = document.createElement('div');
            block_to_insert.innerHTML = ddlb;
            container_block = document.getElementById('kondisiHeader');
            container_block.appendChild( block_to_insert );
            localStorage.setItem('ddlb2', ddlb2);
            localStorage.setItem('dbTable', dbTable);       
        } 
    });
});

$("#kondisiHeader").on('change', function (e) {
    var ddlb2 = localStorage.getItem('ddlb2');
    block_to_insert2 = document.createElement('div');
    block_to_insert2.innerHTML = ddlb2;
    container_block2 = document.getElementById('kondisiHeader2');
    container_block2.appendChild( block_to_insert2 );

});

Collectives™ on Stack Overflow

How to create nested child html using <div> and JavaScript or jQuery in an HTML?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related