We Keep Coding

How do I make the other tab content working the same as the active tab?

The first tab is working fine but when I copied it and pasted for the content of the other tabs its not working. I have a date input that displays the current date but is editable also the tab content contains table that displays data. When you click on the midterm tab it does not display data inside the table also the date is not displaying the current date which I used with javascript/jquery.
<div class="container">
<div class="col-lg-12">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a data-toggle="tab" class="nav-link active" href="#prelim">Prelim</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#midterm">Midterm</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="prelim" class="container tab-pane active"><br>
<div class="row">
<div class="form-inline form-padding">
<div class="col-sm">
<label>Date:</label>
</div>
<div class="col-sm">
<input type ="date" id="todays-date" value="" class="form-control" name="date" required>
</div>
</div>
</div>
<br />
<div class="table-responsive">
<table id="dtable" class="table table-striped table-hover table-bordered">
<thead class="bg-dark text-light">
<tr>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($rss)): ?>
<?php
$studid = $row['student_id'];
$stud = mysqli_query($mysqli,"select * from tbl_student where stud_id = '$studid'");
$rs= mysqli_fetch_array($stud);
?>
<tr>
<td class="text-center"><?php echo $studid; ?></td>
<td><?php echo $rs['stud_lname'];?>, <?php echo $rs['stud_fname'];?> <?php echo $rs['stud_mname'];?> <?php echo $rs['stud_suffix'];?></td>
<td class="text-center">
<a Title="Present" href='' onclick="this.href='action/actionclass.php?present&classid=<?php echo $classid; ?>&studid=<?php echo $studid;?>&period=Prelim&date='+document.getElementById('todays-date').value"><i class="fas fa-check fa-2x text-success"></i></a>
<a Title="Absent" href='' onclick="this.href='action/actionclass.php?absent&classid=<?php echo $classid; ?>&studid=<?php echo $studid;?>&period=Prelim&date='+document.getElementById('todays-date').value"><i class="fas fa-times fa-2x text-danger"></i></a>
</td>
</tr>
<?php $c++; ?>
<?php endwhile; ?>
<?php if(mysqli_num_rows($rss) < 1): ?>
<tr>
<td colspan="3" class="text-center text-danger"><h5>*** EMPTY ***</h5></td>
</tr>
<?php endif;?>
</tbody>
</table>
</div>
</div>
IN THIS SECTION STARTS THE SECOND TAB CONTENT.
<div id="midterm" class="container tab-pane fade"><br>
<div class="row">
<div class="form-inline form-padding">
<div class="col-sm">
<label>Date:</label>
</div>
<div class="col-sm">
<input type ="date" id="todays-date" value="" class="form-control" name="date" required>
</div>
</div>
</div>
<br />
<div class="table-responsive">
<table id="dtable" class="table table-striped table-hover table-bordered">
<thead class="bg-dark text-light">
<tr>
<th class="text-center">Student ID</th>
<th class="text-center">Student Name</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($rss)): ?>
<?php
$studid = $row['student_id'];
$stud = mysqli_query($mysqli,"select * from tbl_student where stud_id = '$studid'");
$rs= mysqli_fetch_array($stud);
?>
<tr>
<td class="text-center"><?php echo $studid; ?></td>
<td><?php echo $rs['stud_lname'];?>, <?php echo $rs['stud_fname'];?> <?php echo $rs['stud_mname'];?> <?php echo $rs['stud_suffix'];?></td>
<td class="text-center">
<a Title="Present" href='' onclick="this.href='action/actionclass.php?present&classid=<?php echo $classid; ?>&studid=<?php echo $studid;?>&period=Midterm&date='+document.getElementById('todays-date').value"><i class="fas fa-check fa-2x text-success"></i></a>
<a Title="Absent" href='' onclick="this.href='action/actionclass.php?absent&classid=<?php echo $classid; ?>&studid=<?php echo $studid;?>&period=Midterm&date='+document.getElementById('todays-date').value"><i class="fas fa-times fa-2x text-danger"></i></a>
</td>
</tr>
<?php $c++; ?>
<?php endwhile; ?>
<?php if(mysqli_num_rows($rss) < 1): ?>
<tr>
<td colspan="3" class="text-center text-danger"><h5>*** EMPTY ***</h5></td>
</tr>
<?php endif;?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

When you do while($row = mysqli_fetch_array($rss)) it will loop until there are no more rows to fetch.
Then later when you do while($row = mysqli_fetch_array($rss)) again it will loop until there are no more rows to fetch but starting from where it left off last time (after the last row).
If that's the issue you should be able to add
mysqli_data_seek($rss, 0);
just above your second while loop to tell it to restart from the first row again.

How to make <tr> clickable as a link instead of cell?

This must be a very easy and simple but i"m finding it hard to get it done.
I have a list of rows with 6 Column which shows data from mysql. I would like to make each row clickable instead of cell which opens a new url in new tab.
Here is the structure.
<tr> <a target="_" href="https://www.google.com">
<td style="text-decoration: underline; font-size: 15px;"> </td>
<td><?php echo $row['district']; ?></td>
<td><?php echo $row['program']; ?></td>
<td><?php echo $row['gender']; ?></td>
<td><?php echo $row['yoa']; ?></td>
<td><?php echo $row['email']; ?></td>
</a></tr>
Above Method Don't work.
Any Help is appreciated

Try this (without JS):
<tr>
<td style="text-decoration: underline; font-size: 15px;"></td>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
1<?php echo $row['district']; ?>
</div>
</a>
</td>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
2<?php echo $row['program']; ?></td>
</div>
</a>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
3<?php echo $row['gender']; ?>
</div>
</a>
</td>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
4<?php echo $row['yoa']; ?>
</div>
</a>
</td>
<td>
<a href="http://google.com">
<div style="height:100%;width:100%">
5<?php echo $row['email']; ?>
</div>
</a>
</td>

Try this:
tr {
position: relative;
}
tr a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This will make anchor tag occupies the whole tr width and height, if needed, add z-index to <a>

Remove tag "A"
and bind onClick event at "TR"
<tr onclick="_linkWhatYouWant" style="cursor: pointer;"> <td> ... blabla </td> </tr>

I would like to say that this is not correct by the semantic point of view; However, you can set the role=button rule in your html.
function navigateTo(url) {
window.location.href(url);
}
document.querySelector('#row-1').addEventListener('click', function() { navigateTo('http://www.google.com/') });
table {
border-collapse: collapse;
}
tr {
border: 1px solid black;
cursor: pointer;
}
tr:hover {
background: rgba(255,0,0,0.3);
}
<table>
<tr id='row-1' role='button'>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
<td>Item 6</td>
</tr>
<tr id='row-2' role='button'>
<td>Item 7</td>
<td>Item 8</td>
<td>Item 9</td>
<td>Item 10</td>
<td>Item 11</td>
<td>Item 12</td>
</tr>
</table>

Consider the following example:
https://jsfiddle.net/Twisty/3hnt6mws/
HTML
<table>
<tr data-link="https://www.google.com" data-target="_BLANK">
<td>
District
</td>
<td>
Program
</td>
<td>
Gender
</td>
<td>
YOA
</td>
<td>
Email
</td>
</tr>
</table>
JavaScript
$(function() {
$("table tr").click(function(e) {
var u = $(this).data("link");
var t = $(this).data("target");
console.log(u, t);
if (t.length) {
window.open(u, t);
} else {
window.location.href = u;
}
});
});
Using the data attribute, you can store more info with the row and use that in the click event. You can then programmatically direct the browser to open a new window or direct to a new location.
Hope that helps.

You can use jQuery and click function. This approach is simple and it gives you freedom to decide which rows are used as links. All you need to do is add a class and data attribute. You can also add cursor:pointer property in CSS.
$('.click').click(function(){
window.location = $(this).data('href');
//use window.open if you want a link to open in a new window
});
.click{cursor:pointer}
<tbody>
<tr class="click" data-href="some-url-here">
<th>1</th>
<td>John Smith</td>
<td>1-234-567-8900</td>
</tr>
</tbody>

The <tr> tag defines a row in an HTML table.
A <tr> element contains one or more <th> or <td> elements.
<table>
<a href="www.google.com"><tr>
<th>Month</th>
<th>Savings</th>
</tr></a>
<tr>
</table>
try this will help you u can use <button> tag also to display like a button

Data Table search is giving error

I'm getting a warning saying requested unknown parameter, and after I press ok the search is not working correctly.
any solution for this
DataTable warning .......... Requested unknown parameter
Please find how i created the table
<table class="dataTable border bordered striped" data-role="datatable" data-auto-width="false" id="brandTable">
<thead>
<tr>
<td style="width: 20px">
</td>
<td class="sortable-column sort-asc">ID</td>
<td class="sortable-column">Brand Name</td>
<td class="sortable-column">Account Manager</td>
<td class="sortable-column">Date Updated</td>
</tr>
</thead>
<tbody>
<?php foreach ($fw->customer($_SESSION['USERID'])->getAllBrands() as $v) { ?>
<tr>
<td>
<label class="input-control checkbox small-check no-margin">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
<td>
<?php echo $v['id']; ?>
</td>
<td>
<a href="updateBrands.html?id=<?php echo $v['id']; ?>">
<?php echo $v['brandName']; ?>
</a>
</td>
<td>
<?php echo $fw->customer($_SESSION['USERID'])->getAccountManagerbyId($v['accountManager_id']); ?></td>
<td>
<?php echo $v['dateCreated']; ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>

You have an undefined or null value at 3 column of 35 row. You should pass some value at that place .

Using innerhtml call within a table

I am trying to use innerHTML to place a dynamic image within a row of a table I have on my page. The image is showing up, however, it is floating to the top of the table for some reason. Is there any way to ensure it stays in the row that I have it in. Here are some snippits of the code:
In the javascript:
document.getElementById("myResults").innerHTML = "";
In the html:
<td class="label"><label for="description">Description:</td>
</tr>
<tr>
<td class="label">
<div class ="<?php echo form_row_class("bio") ?>" >
<div class="styled_textarea">
<textarea type="text" id="bio" onfocus="this.value=''; setbg('#f0f7f8');" onblur="setbg('white')" name="bio" value="<?php echo h($_POST['bio']); ?>" rows="10"></textarea>
</div>
</div>
</td>
</tr>
<tr>
<td class="label"><label for="image"><div class="vspace2em"></div>Image:</label></td>
</tr>
<tr>
<td class="label">
<a id="edit_image"></a>
<div class="row">
<div class="span10 offset1">
<div id="editpane">
<button class="btn btn-large btn-primary openbutton" type="button">Open an Image</button>
</div>
</div>
</div>
</td>
<td>
<?php if($current_user2): ?>
<?php if($current_user2['filepicker'] != ''): ?>
<img src="<?php echo $current_user2['filepicker'];?>">
<?php endif; ?>
<?php endif; ?>
</td>
</tr>
<tr>
<div id="myResults"></div>
</tr>
etc...
The image called with the innerHTML using floats to the top of the table for some reason, without appearing where I have it situated. Any ideas why this is happening?

It would be more clearer to read if you formatted the HTML table right. From the first glance I see that you have
<tr>
<div id="myResults"></div>
</tr>
myResults is your relevant div. The problem is you dont have any <td> elements inside the <tr>. I think your code should look like this.
<tr>
<td>
<div id="myResults"></div>
</td>
</tr>
This should give you the desired result.

Add external javascript library for Zendfreamework project

i want to add DataTable javascript lib to my Zendframe work project.So is that possible to add external data lib to ZendFrame work? and how can i add DataTable lib to my zend project?
view.phtml
<script type="text/javascript">
var baseUrl = "<?php echo $this->baseUrl(); ?>";
$(document).ready(function(){
$('.jbutton').button();
});
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
<span id="edit-doctor" class="jbutton floatright marr5">
<a href="<?php
echo $this->url(
array(
'controller' => 'patients',
'action' => 'edit',
'id' => $this->patientId
), 'default', true
);
?>">Edit Patient</a>
</span>
<div class="clear"></div>
<?php $user = $this->user; ?>
<h1 class="title"><?php echo $user['name']; ?></h1>
<div class="underling-green"></div>
<div class="profile">
<div class="p-image">
<img src="<?php echo $this->baseUrl() . '/images/users/' . $user['image']; ?>"/>
</div>
<div class="category mart50">
<div class="sub-title">Personal Details</div>
<table>
<tbody>
<tr>
<td class="p-title">Email</td>
<td class="p-body">
<span class="p-seperate">:</span>
<?php echo $user['email']; ?>
</td>
</tr>
<tr>
<td class="p-title">Birth Day</td>
<td class="p-body">
<span class="p-seperate">:</span>
<?php echo $user['bday']; ?>
</td>
</tr>
<tr>
<td class="p-title">Telephone</td>
<td class="p-body">
<span class="p-seperate">:</span>
<?php echo $user['telno']; ?>
</td>
</tr>
<tr>
<td class="p-title">Address</td>
<td class="p-body">
<span class="p-seperate">:</span>
<?php echo $user['address']; ?>
</td>
</tr>
</tbody>
</table>
<table id="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clear"></div>
i want to make "example" table preview as DataTalbe how can i do it?

Just put the lib and jQuery or any other required js libs in .e.g. public/js and then in your layout.phtml (in head section) you do as follows:
$this->headScript()->prependFile($this->baseUrl('/js/jquery-version.js'));
$this->headScript()->appendFile($this->baseUrl('/js/datatableLib.js'));
echo $this->headScript();