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.
Related
Let's say I have an input inside a form with a button:
<body>
<form class="contact-form" id="my_rec" name="my_rec">
<div class="container">
<div class="row">
<div class="col-sm-2">
<label for="TESTIMATED" class="col-form-label" style="font-size:10px;font-style:aril;font-weight:bold;text-align:right;color:blue;font-family:arial"><b>ESTIMATED COST:</b></label>
<p><input type="number" style="font-size:10px" class="form-control" id="TESTIMATED" name="TESTIMATED" value="0.00"></p>
<button name="btn2" type="button" class="btn btn-secondary" id="btn2">Close REC</button>
</div>
</div>
</div>
</form>
</body>
And after the form I have a table:
<br>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive table-sm">
<table id="tableCGRAL1" class="table table-hover table-bordered table-condensed" style="width:100%">
<thead class="text-center">
<tr bgcolor=blue class="firstrow" style="font-size:10px; font-style:arial;font-weight:bold;text-align:center; color:#FFFFFF; font-family:arial">
<th>Pda</th>
<th>Code</th>
<th>UM</th>
<th>Amount</th>
<th>Description</th>
<th>Unit cost</th>
<th>Estimated Cost</th>
<th>Calculated Cost</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr style="font-style:arial;">
<td> <?php echo $_SESSION["Pda"]; ?></td>
<td> <?php if($resultw->num_rows > 0){ echo $roww['Code'];} ?></td>
<td> <?php if($resultg->num_rows > 0){ echo $rowg['UM']; } ?></td>
<td> <?php if($resultm->num_rows > 0){ echo $rowm['Amount']; } ?></td>
<td> <?php if($resultv->num_rows > 0){ echo $rowv['Description']; } ?></td>
<td> <?php if($resultq->num_rows > 0){ echo $rowq['UC']; } ?></td>
<td id="this_td" class="this_td"></td>
<td> <?php if($resultt->num_rows > 0){ echo $rowt['CC']; } ?></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Ignore the php echos, it's just to show from where those tds get their values.
My question is how do I make the td with id and class "this_td" to have the value of the input in the form above when I click the button if the form is not inside the table. I can't move the form inside the table and use row.(this).closest("tr") because I'm already using that input for something else, the input can't be moved.
The thing is, I'm using table2csv https://github.com/OmbraDiFenice/table2csv
To convert the table when that button is clicked, but that td is empty and I need it to have the value of the input that the user types in, that value has no time to go to the database and then be able to brought it back with php because before all that it creates the csv, so it has to obtain the value from the client side (before the page reloads, because the button submits and reloads the page).
How can I make this with javascript? I know php, but I don't have the slightlest idea from where to start with js for this.
The accepted solution proposed in a comment:
const td = document.getElementById("this_td")
const input = document.getElementById("TESTIMATED")
td.innerText = input.value
Just in case you want to make it work as you type, this would work:
const td = document.getElementById('this_td')
const input = document.getElementById('TESTIMATED')
input.addEventListener('keyup', (e) => {
td.innerText = input.value
})
I completed this form inside bootstrap table earlier it was working but after I added just option. Its not even triggering JS file code with only alert also while other buttons of different forms are triggering all these are in same JS file.
Here is form code : (Ps since using PHP called this file in index.php file this is other php file)
<div id="sixth-part" class=tabcontent>
<h2 class="main-headings">Painting</h2>
<form action="Controller/painting.php" method="POST" id="painting-form">
<table data-toggle="table">
<thead>
<tr>
<th colspan=4>Checkpoints and Record</th>
<th>Check</th>
<th>Incharge</th>
</tr>
</thead>
<tbody>
<tr style="display: none">
<td>
<p id="pumpserialno7"><?php echo("$model");?></p>
</td>
</tr>
<tr>
<td>33</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="application-record" >Application record sheet filled and maintained</label>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-34">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td>34</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="blasting-record" >Blasting record sheet available</label>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-35">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td>35</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="sample-plates" >Sample plates available with proper traceability to batch of painting</label>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-36">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td>36</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="visual-inspection" >Visual Inspection & DFT</label>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-37">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td>37</td>
<td colspan="3">
<div class="form-group" style="float:left">
<label for="antirush-coating" >Antirust Coating</label>
<select name="antirush-coating" id="antirushcoating">
<option value="Phenolic Varnish">Phenolic Varnish</option>
<option value="Redoxide">Redoxide</option>
<option value="Others">Others</option>
</select>
</div>
</td>
<td colspan=1>
<input type="checkbox" class="form-check-input" id="check-37-a">
</td>
<td><?php echo $login_session; ?></td>
</tr>
<tr>
<td colspan=6 style="text-align:center">
<button style="width:700px" type="submit" id="painting" class="btn btn-primary painting-btn">Freeze</button></td>
</tr>
<tr style="display: none;">
<td><p id="eid6"><?php echo $login_session; ?></p></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id='response6'></div>
Here is JS code :
$(document).ready(function() {
$('#painting-form').submit(function(event) {
alert("hi");
var formData = {
pumpserialno: $("#pumpserialno7").text(),
antirushcoating: $("#antirushcoating").val(),
eid:$("#eid6").text()
}
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'Controller/painting.php', // the url where we want to POST
data : formData, // our data object
dataType : 'text', // what type of data do we expect back from the server
encode : true,
success: function( data ) {
$("#response6").html(data);
},
error: function(xhr, status, error) {
// check status && error
},
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
$('#myModal').modal('show');
});
event.preventDefault();
// alert($("#visual-inspection").val());
});
});
Here is Index file code : (Called this file in this way)
include("Parts/Insert/part6.php");
I am entry level developer in PHP and have no knowledge in PHP, i am trying to call database values on selecting a drop down menu, have done this so far with the help of tutorial,.. the problem is when i select 1st drop down the second drop down is getting values from DB, but when i select option from 2nd drop down menu, i am not getting any data displayed on page. Nothing Happens after selecting an option from 2nd drop down.
<?php
include '../connect.php';
$unm=htmlentities($_SESSION['username']);
?>
<html>
<head>
<title> User Panel</title></head>
<body background="../image/pencilback.jpg">
<div id="welcome"><?php
echo '<align="right">'.'<h3>'."Welcome ".$unm.'</h3>';
?></div>
<link rel="stylesheet" type="text/css" href="../css/heading.css">
<table border="0" width="50%" height="150px" align="center" >
<tr width="100%" height="200px" > <td colspan="3"> <img src="../image/banner.jpg"> </td> </tr>
</table>
<table id="tableborder" border="0" width="83%" height="40px" align="center" bgcolor="#BDBDBD" >
<td align="center"><b> Take a Test</b> </td>
<td align="center"><a href="myaccount.php"><b> My Account Details</b> </td>
<td align="center"><a href="testhistory.php"><b> View Test History </b> </td>
<td align="center"><a href="feedback.php"><b> Give Feedback</b> </td>
<td align="center"><a href="../logout.php"><b> Logout</b> </td> </td> </tr>
</table>
<form method="POST" action="">
<div id="viewset"><center>
Select Desired Test </center> <br></div><br><br><br><br><br><br>
<table border="1px" align="center" cellspacing="10px" cellpadding="10px">
<tr> <td> <select name="tstcat" id="countrydd" onChange="change_country()">
<option> Select Test Category</option>
<?php
$res=mysqli_query($connection,"select * from sub");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["subname"]; ?>"> <?php echo $row["subname"]; ?> </option>
<?php
}
?>
</select>
</td>
<td>
<div id="state" align="center">
<select id="details" onChange="display_details()">
<option>Select Test</option>
</select>
</div>
</tr> </td></table>
<br>
<div id="display">
<table border="1px" height="100px" width="30%" align="center">
<tr style=color:maroon> <th> Test Name </th> <th> No. of Questions </th> <th> Duration </th> </tr>
<tr> <td> </td> <td> </td> <td> </td> </tr>
</table>
</div>
<center> <input type="submit" name="submit" value="Go"></center>
<?php
if(isset($_POST['submit']))
{
$tstct=$_POST['tstcat'];
$tnm=$_POST['testid'];
$_SESSION['testname']=$tnm;
$_SESSION['testcatg']=$tsc;
header('location:teststart.php');
}
?>
</div>
</form>
<script type="text/javascript">
//========== FOR DROPDOWN SELECTION
function change_country()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","ajax.php?category="+document.getElementById("countrydd").value,false);
xmlhttp.send(null);
document.getElementById("state").innerHTML=xmlhttp.responseText;
}
//========== TO LOAD TEST DETAILS
function display_details()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","ajax2.php?testname="+document.getElementById("details").value,false);
xmlhttp.send(null);
document.getElementById("display").innerHTML=xmlhttp.responseText;
}
</script>
</body>
</html>
AJAX.PHP
<?php
include '../connect.php';
$category=$_GET["category"];
if($category!="")
{
$res=mysqli_query($connection,"select * from test_detail where test_category='$category'");
echo "<select name='testid' onchange='change_test()'>";
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["test_name"];?>"> <?php echo $row["test_name"];?> </option>
<?php
}
echo "</select>";
}
?>
AJAX 2.PHP
<?php
include '../connect.php';
$tstname=$_GET["testname"];
if($tstname!="")
{
$res1=mysqli_query($connection,"select * from test_detail where test_name='$tstname'");
echo "<table>";
while($row1=mysqli_fetch_array($res1))
{
?>
<tr> <td> <?php echo $row1["test_name"];?> </td>
<td> <?php echo $row1["total_ques"];?> </td>
<td> <?php echo $row1["test_dur"];?> </td> </tr>
<?php
}
echo "</table>";
}
?>
I would recommend you to check three things.
in the select that is inside to the div with id #state, you have an onChange calling the javascript function 'display_details()' which you use to load the table element with detail data. But when you return the select from AJAX.PHP the onchange event has another function 'change_test()', it should be 'display_details()'
When you insert dynamically new html elements in a document, normally you have to use dynamic event binding to attach the event handlers. For this I recommend you to use jquery, this link explain how Event binding on dynamically created elements
to make to ajax request jquery is very good library, but if you want to use the XMLHttpRequest object , It will be a good idea check the status of the response:
if (xmlhttp.status == 200){
document.getElementById("state").innerHTML=xmlhttp.responseText;
}else{
// Handle the 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 .
I want jQuery tabs but I want it to change the one that's selected via the .selected CSS property, how can I do that with jQuery tabs? I tried addClass and removeClass to no avail.
Thanks very much.
Code below:
<div class='content'>
<div class='tabs'>
<div id='resultsTableNav'>
<a href='#tab-1' class='resultsButton selected'>MY BETS</a>
<a href='#tab-2' class='resultsButton'>ALL BETS</a>
<a href='#tab-3' class='resultsButton'>ON CHAIN</a>
<a href='#tab-4' class='resultsButton'>CHAT</a>
<a href='#tab-5' class='resultsButton noMargin'>FAIR</a>
</div><!-- end resultsTableNav -->
<div id='tab-1'>
<table width='100%' border='0' cellspacing='0' cellpadding='0' class='resultsTable'>
<thead>
<tr>
<td>NAME</td>
<td>BET ADDRESS</td>
<td>WIN ODDS</td>
<td>PRIZE MULTIPLIER</td>
<td>HOUSE PERCENT</td>
<td>MIN BET</td>
<td>MAX BETS</td>
</tr>
</thead>
<tbody>
<?php
for($i=0; $i<=12; $i++)
{
if($i%2==0)
$class='greyRow';
else
$class='';
?>
<tr class='<?php echo $class; ?>'>
<td>Developer</td>
<td><div class='addressScroll'>1ChqhkyQENiuG4J6UDCvNjfiLJp5zkqhX7</div></td>
<td>97.6563%</td>
<td>1.004x</td>
<td>1.900%</td>
<td>0.0100</td>
<td>500.0000</td>
</tr>
<?php
}?>
</tbody>
</table>
</div>
</div>
</div><!-- end content -->