Develop Reference

Fill the currrent data to bootstrap form

I'm using the bootstrap4 framework for my web application. Here's my requirement
I have a table generated with some values & each row has a edit button at the end of the row (last column).
when edit button is clicked, it should pop up a form with existing data in the row. So that user can change only the refuired fields. I know this should be done using javascript to fill the text boxes in the current form. But with bootstrap4 framework i dont know the correct way to do this .
This is my table
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">TV 3</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Derana</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td colspan="2">TV 5</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td colspan="2">TV 6</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td colspan="2">TV 7</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
</tbody>
</table>
This is the edit button
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
Edit
</button>
This is my POP form(modal) for the edit button
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Here is a fully working code and more dynamic approach to what you want. You can use native boostrap jQuery function to show your modal on edit click button in your row.
You can watch which button triggered the modal and from their you can grab all the data using jQuery function like closest() and find()
Once you have the respective row data you can then apply it to your form input which are in the modal
In addition, i have also a functionality where recording status is Y then the checkbox in the modal will automatically be checked and if its N then it will be unchecked.
Live Working Demo:
$("#ModalLoginForm").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
//get data
var cId = button.closest('tr').find('th').text() //1st th
var cName = button.closest('tr').find('th').next().text() //2nd th
var cDesc = button.closest('tr').find('th').next().next().text() //3 th
var isRecord = button.closest('tr').find('th').next().next().next().text() //4 th
//Apply data
$('[name="channelid"]').val(cId);
$('[name="channel"]').val(cName);
$('[name="description"]').val(cDesc);
//check the checkbox
if (isRecord == 'Y') {
$('[name="remember"]').prop('checked', true); //check the checbox
} else {
$('[name="remember"]').prop('checked', false);
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>TV 3</td>
<td>dfdf</td>
<td>N</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>TV 4</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>TV 5</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>TV 6</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>TV 7</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
</tbody>
</table>
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

$(".table .btn-info").on("click", function(){ //now it aply for every .btn-info in every .table... so its better to make a new class or id for your table
var thContentFromThisRow = $(this).closest("tr").find("th").html(); // copy data from the TH in the same ROW as your clicked button
$('[name="channelid"]').val(thContentFromThisRow); //here you select your desired input to fill by name and then use .val (short for value) and you insert your data...
});
This is a short way of collecting one inner html from your th inside row of your button. Just to show how it worsk. Anyway you should go to w3c or another basics page and learn the basics of js/jquery. This code I've written is in jquery since you have bootstrap.

How to display contents of div instead of value when a button is pressed?

I want the button to display one div at a time through button click. How do I go around doing that? Or where do I start. I am new to JavaScript. So far, most examples that I saw is return a value instead. Below is the code:
function showDiv(me) {
/* Disabled buttons accordingly*/
$('.navbutton').prop('disabled', false);
$(me).prop('disabled', true);
/*How do I show the contents of each division only when their respective button is pressed*/
/*Below is show the value when their respective button is pressed*/
$('#myDiv').html($(me).val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstbutton">
<button class="navbutton" value="home" onclick="showDiv(this);">Table</button>
<table>
<tr>
<th>Column A</th>
</tr>
<tr>
<td>A.1 Introduction</td>
</tr>
<tr>
<td>A.2 History</td>
</tr>
</table>
</div>
<div id="secondbutton">
<button class="navbutton" value="about" onclick="showDiv(this);">Others</button>
<h2>Miscellaneous items</h2>
</div>
<div id="myDiv"></div>

try this
function showDiv(me) {
/* Disabled buttons accordingly*/
$('.navbutton').prop('disabled', false);
$(me).prop('disabled', true);
//the below line will get the innerHTML of this clicked elements parent node and place that content in div with id "myDiv"
$('#myDiv').html(me.parentNode.innerHTML);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstbutton">
<button class="navbutton" value="home" onclick="showDiv(this);">Table</button>
<table>
<tr>
<th>Column A</th>
</tr>
<tr>
<td>A.1 Introduction</td>
</tr>
<tr>
<td>A.2 History</td>
</tr>
</table>
</div>
<div id="secondbutton">
<button class="navbutton" value="about" onclick="showDiv(this);">Others</button>
<h2>Miscellaneous items</h2>
</div>
<div id="myDiv"></div>

Here an example. Make use of jquery function. .show()
JAVASCRIPT
function showDiv() {
$('#myDiv').show(100);
}
HTML
<button class="navbutton" value="about" onclick="showDiv();">Others</button>

try
$('#myDiv').html(me.parentElement.innerHTML);
function showDiv(me) {
/* Disabled buttons accordingly*/
$('.navbutton').prop('disabled', false);
$(me).prop('disabled', true);
/*How do I show the contents of each division only when their respective button is pressed*/
/*Below is show the value when their respective button is pressed*/
$('#myDiv').html(me.parentElement.innerHTML);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstbutton">
<button class="navbutton" value="home" onclick="showDiv(this);">Table</button>
<table>
<tr>
<th>Column A</th>
</tr>
<tr>
<td>A.1 Introduction</td>
</tr>
<tr>
<td>A.2 History</td>
</tr>
</table>
</div>
<div id="secondbutton">
<button class="navbutton" value="about" onclick="showDiv(this);">Others</button>
<h2>Miscellaneous items</h2>
</div>
<div id="myDiv"></div>

How to replace an entire table with pictures?

This is my table, of course with some text in it, and I want on a button click to hide it, and show some images. I also want to reverse the action on the same button click. How can I do that?
<div id="aspect" style="display:yes">
<table style="100%" id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p>
</td>
</tr>
</table>
</div>

you can start with jQuery .toggle() method
$("button").click(function(){
$("img").toggle();
});
this will work as you need
Have a look here: http://api.jquery.com/toggle/

Please have a look at this code sample. I have used jQuery 2.1.1
$(function() {
$('#toggler').click(function() {
$('#Table').toggle();
$('#imageblock').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aspect">
<div style="display:none;" id="imageblock">
<img src="http://lorempixel.com/400/200/" />
</div>
<table id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p> </td>
</tr>
</table>
</div>
<button id="toggler">Toggle Image/Table</button>

How to display only clicked element in HTML using JQUERY

I have a below html tags which is feeding the data from database and display as table in html
<html>
<body>
<div>
<button type="button" class="button">DATA_1</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_2</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_3</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</body>
</html>
I have the below script which is going to hide all table by default
$(document).ready(function(){
$('.data_table').hide();
});
Also the button and table were generated automatically, and its completely dynamic page. I don't have any control to limit the data. The table gonna increase as per the input data that feed from db. Now I would like to show only specific records as per user click. If the user click DATA_1 button It should show the respective table and other should be hide.
I tried below script to show the respective data which is not working as expected:
$(document).ready(function(){
$('.button').on('click', function(){
$('.data_table').show();
});
});
The above code expand all the table instead of showing/hiding its immediate child table or first matching child table.
Also, I would like to do the same (Clicking DATA_1 button will show the immediate class(data_table)and other will be hide) with below html tags:
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Can somebody help me to achieve this? I would like to showcase/hide only the immediate child table or first matching child table when I try to click the button.

You need to use $(this).next(). If you use $('.data_table'), it will show() all tables having that as a class. Hence, you need to use $(this).next()
$(document).ready(function() {
$('.data_table').hide();
$('.button').on('click', function() {
if ($(this).parent().next().find('table.data_table').is(":visible")) {
$(this).parent().next().find('table.data_table').hide();
} else {
$('.data_table').hide();
$(this).parent().next().find('table.data_table').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>

you should write like this:
$('.button').on('click', function(){
$(this).next().show().siblings('.data_table').hide();
});

You have to hide all tables first: $('.data_table').hide(); and you have to do it again after each button click.
Make the table next to the clicked button visible: $(this).next('.data_table').show();
$(document).ready(function(){
/* hide all tables initially */
$('.data_table').hide();
$('.button').on('click', function(){
/*on click hide all tables again */
$('.data_table').hide();
/* show table next to the clicked button */
$(this).next('.data_table').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div>
<button type="button" class="button">DATA_1</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_2</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_3</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</body>
</html>

Differing jquery table results

While attempting to get the proper jquery for this question I ran into a question. Shouldn't each of these have similar outputs? The first one doesn't even output the class of the divs
var list = document.querySelectorAll('[aria-label="Help"]');
console.log('&&&&&&&&&&&&&&');
$('[aria-label="Help"] tr div').each(function() {
console.log($(this).attr('class'));
console.log($(this).text());
});
console.log('&&THIS ONE WORKS&&&');
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() {
console.log($(this).text());
});
console.log('&&&&&&&&&&&&&&');
$('[aria-label="Help"] .text:not(:contains(X-Men 2),:contains(X-Men 3))').each(function() {
console.log($(this).text());
});
console.log('&&&&&&&&&&&&&&');
$('.text:not(:contains(X-Men 2),:contains(X-Men 3))',$(list)).each(function() {
console.log($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=5 aria-label="Help">
<thead></thead>
<tbody>
<tr>
<div class='abc'>
<label><a><span class='text'>Game of thrones</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>Harry Potter</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men 2</span></a></label>
</div>
</tr>
<tr>
<div class='abc'>
<label><a><span class='text'>X-Men 3</span></a></label>
</div>
</tr>
</tbody>
</table>

Putting a div inside a tr is invalid html, so the browser "fixes" the layout for you, breaking your selectors that rely on the expected hierarchy.
Here's what the inspector shows:
<div class="abc">
<label><a><span class="text">Game of thrones</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">Harry Potter</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men 2</span></a></label>
</div>
<div class="abc">
<label><a><span class="text">X-Men 3</span></a></label>
</div>
<table id="5" aria-label="Help">
<thead></thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
https://jsfiddle.net/bduhtfL6/