hide /show content in table while loop

hide /show content in table while loop - javascript

here is the image of the output of the code given below
The code below displays a table with hide/show content.
i want to display the username below the "username" heading of the table and the content that appears on clicking the "+" button should appear below their respective headers like project_name should appear under PROJECT NAME,project_id should appear under PROJECT ID and so on...
if anyone could help...
<?php
$hostname_ckumbh = "localhost";
$database_ckumbh = "pmb_demo";
$username_ckumbh = "root";
$password_ckumbh = "";
$ckumbh = mysql_pconnect($hostname_ckumbh , $username_ckumbh , $password_ckumbh) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database_ckumbh , $ckumbh);
?>
<html>
<head>
<style>
.button1 {
width: 100%
}.wid25{width:25% !important;float:left}
.sign_cls {
cursor: pointer;
width: 10%;
background: #09F;
font-weight: bold;
color: #FFF
}
.sign_cls2 {
cursor: pointer;
width: 10%;
background: #900;
font-weight: bold;
color: #FFF
}
.sign_cls,.sign_cls2 {float: left; width: 1% !important;}
.date_cls {
width: 90%;
}
.wid_25 {
width: 25%;
float: left;
margin: 10px 0
}
.line_style td {
width: 25%
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function toggle(cls,cls2){
if($("."+cls).is(":visible")){
$("."+cls).hide("slow");
$("#"+cls2).removeClass('sign_cls2').addClass('sign_cls');
}else{
$("."+cls).show("slow");
$("#"+cls2).removeClass('sign_cls').addClass('sign_cls2');
}
}
</script>
</head>
<body>
<table border="0%" align="center" width="100%" height="100%" >
<tr class="line_style" align="center">
</br>
<td>User Name</td>
<td>Project Name</td>
<td>Project ID</td>
<td>Task Details</td>
<td>Status</td>
</tr>
<?php
$record =mysql_query("SELECT `u_vemail` FROM `proj_user`");
$i = 0;
while($row=mysql_fetch_array($record))
{
$record2 =mysql_query("SELECT `project_name` , `project_id` , `task_details` , `date` , `status` FROM `add_tasks` WHERE `user_name`='$row[u_vemail]'");
?>
<tr align="center">
<td colspan="4">
<div class="button1" onClick="toggle('hide<?php echo $i;?>','test<?php echo $i;?>')" style="float:left">
<span id="test<?php echo $i;?>" class="sign_cls">+</span><span class="date_cls"><?php echo $row["u_vemail"] ?></span>
</div>
<div class="hide<?php echo $i;?>" style="display:none;width:100%;float:left;">
<?php
while($row2 =mysql_fetch_array($record2))
{
?>
<div style="width:100%">
<div class="wid_25"><?php echo $row2["project_name"]; ?></div>
<div class="wid_25"><?php echo $row2["project_id"]; ?></div>
<div class="wid_25"><?php echo $row2["task_details"]; ?></div>
<div class="wid_25"><?php echo $row2["status"]; ?></div>
</div>
<?php
}
?></div>
</td>
</tr><?php
$i++;
}
?> <table>
</table>
</td>
</tr>
</table>
<br/>
<br/>
</body>
</html>

Just an initial question: can you see everything showing up on your screen? It sounds like you've got everything working and are just looking for a way to implement this show/hide function. Also, it looks like you've already attempted this with your toggle function although I'm not entirely sure where your variables cls and cls2 are coming from...
I tried something similar to get certain components to fade onto the screen with Javascript and CSS and what worked best for me what to add styling to the individual rows of a table and then apply a new style with javascript (i.e. make the style hidden and change it to visible with JS)
Here is what I mean...
#tableRow1 {opacity: 0;
transition: opacity 4s;
-webkit-transition: 4s;
transition-delay: 1s;
-webkit-transition-delay: 1s;}
#tableRow2 {opacity: 0;
transition: opacity 4s;
-webkit-transition: 4s;
transition-delay: 1s;
-webkit-transition-delay: 1s;}
#tableRow3 {opacity: 0;
transition: opacity 4s;
-webkit-transition: 4s;
transition-delay: 1s;
-webkit-transition-delay: 1s;}
<tr id='tableRow2' width="0%">
<tr id='tableRow2' width="0%">
<tr id='tableRow2' width="0%">
And the JS:
function loadPage(){
document.getElementById("tableRow1").style.opacity = 1;
document.getElementById("tableRow2").style.opacity = 1;
document.getElementById("tableRow3").style.opacity = 1;
}
I used opacity, but the concept would be the same for hidden. You can call the JS function with your button and if you are creating multiple buttons, you can give each button a unique id with a loop and put a loop in the function so that it makes the appropriate row visible. This should also work with div tags as long as they have a unique id. Hopefully this helps...

To appear username below username, Project name below project name you can try this code:
<tr class="line_style" align="center">
<th>User Name</th>
<th>Project Name</th>
<th>Project ID</th>
<th>Task Details</th>
<th>Status</th>
</tr>
<tr align="center">
<td colspan="4">
<div class="button1" onClick="toggle('hide<?php echo $i;?>','test<?php echo $i;?>')" style="float:left">
<span id="test<?php echo $i;?>" class="sign_cls">+</span><span class="date_cls"><?php echo $row["u_vemail"] ?></span>
</div>
<div class="hide<?php echo $i;?>" style="display:none;width:100%;float:left;">
<?php
while($row2 =mysql_fetch_array($record2))
{
?>
<div style="width:100%">
<div class="wid_25"><?php echo $row2["project_name"]; ?></div>
<div class="wid_25"><?php echo $row2["project_id"]; ?></div>
<div class="wid_25"><?php echo $row2["task_details"]; ?></div>
<div class="wid_25"><?php echo $row2["status"]; ?></div>
</div>
<?php
}
?>
</div>
</td>
</tr>
The problem is you used (<td></td>) instead of (<th></th>) tag.

Hope it will help you........
<?php
$hostname_ckumbh = "localhost";
$database_ckumbh = "pmb_demo";
$username_ckumbh = "root";
$password_ckumbh = "";
$ckumbh = mysql_pconnect($hostname_ckumbh, $username_ckumbh, $password_ckumbh) or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db($database_ckumbh, $ckumbh);
?>
<html>
<head>
<style>
.button1 {
width: 100%
}.wid25{width:25% !important;float:left}
.sign_cls {
cursor: pointer;
width: 10%;
background: #09F;
font-weight: bold;
color: #FFF
}
.sign_cls2 {
cursor: pointer;
width: 10%;
background: #900;
font-weight: bold;
color: #FFF
}
.sign_cls,.sign_cls2 {float: left; width: 1% !important;}
.date_cls {
width: 90%;
}
.wid_25 {
width: 25%;
float: left;
margin: 10px 0
}
.line_style td {
width: 25%
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function toggle(cls, cls2) {
if ($("." + cls).is(":visible")) {
$("." + cls).hide("slow");
$("#" + cls2).removeClass('sign_cls2').addClass('sign_cls');
} else {
$("." + cls).show("slow");
$("#" + cls2).removeClass('sign_cls').addClass('sign_cls2');
}
}
</script>
</head>
<body>
<table border="1" align="center" width="100%" height="100%" >
<tr>
<td></td>
<td>User Name</td>
<td>Project Name</td>
<td>Project ID</td>
<td>Task Details</td>
<td>Status</td>
</tr>
<?php
$record =mysql_query("SELECT `u_vemail` FROM `proj_user`");
//$record = array('0', '1'); // push your sql result to this array
$i = 0;
while ($row=mysql_fetch_array($record)) {
//$row2 = array("project_name", "project_id", "task_details", "status"); // push your sql result to this array
$record2 =mysql_query("SELECT `project_name` , `project_id` , `task_details` , `date` , `status` FROM `add_tasks` WHERE `user_name`='$row[u_vemail]'");
$row2 =mysql_fetch_array($record2);
?>
<tr align="center">
<td><span onclick="hideRow('ex<?php echo $i?>','id<?php echo $i?>')" id="id<?php echo $i?>">+</span></td>
<td class="ex<?php echo $i?>"><?php echo $row["u_vemail"] ?></td>
<td class="ex<?php echo $i?>"><?php echo $row2["project_name"]; ?></td>
<td class="ex<?php echo $i?>"><?php echo $row2["project_id"]; ?></td>
<td class="ex<?php echo $i?>"><?php echo $row2["task_details"]; ?></td>
<td class="ex<?php echo $i?>"><?php echo $row2["status"]; ?></td>
</tr>
<?php
$i++;
}
?>
</table>
<script>
function hideRow(id1,id2){
$("."+id1).toggle();
if(document.getElementsByClassName(id1)[0].style.display == 'none'){
$("#"+id2).css("background-color","red");
}else{
$("#"+id2).css("background-color","white");
}
}
</script>
</body>
</html>

Related

How do I click the plus and minus buttons on my form, refresh the values, and keep only what I searched on the screen?

Basically I am in the home stretch of finishing this thing but the problem I am having is when I search to bring up information, and press a button (plus or minus) of the corresponding value, 1,2,3,etc......the entire page resets and I lose my place
Any advice? saveToDatabase2 or increment is where it all falls apart for the functions
For some reason editing manually by hand next to the button works.....but the possibility to click a button needs to work too.
I've tried googling for over 3 days for this problem and nothing has worked.
<HEAD>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</HEAD>
<?php
require_once("../include/dbcontroller.php");
$db_handle = new DBController();
$category=$_GET["category"];
$sql = "SELECT * from inventory where category =".$category;
$inventory = $db_handle->runSelectQuery($sql);
echo "<input type=hidden name=field id=field value=".$category." />";
?>
<!--script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myInput').keyup(function(){
search_table($(this).val());
});
function search_table(value){
//alert("wooo");
$('#myTable > tbody > tr:not(.header)').each(function(){
var found = 'false';
$(this).each(function(){
if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)
{
found = 'true';
}
});
if(found == 'true')
{
$(this).show();
}
else
{
$(this).hide();
}
});
}
});
function createNew() {
$("#add-more").hide();
var data = '<tr class="table-row" id="new_row_ajax">' +
'<td contenteditable="true" id="txt_name" onBlur="addToHiddenField(this,\'name\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_location" onBlur="addToHiddenField(this,\'location\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_diameter" onBlur="addToHiddenField(this,\'diameter\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_length" onBlur="addToHiddenField(this,\'length\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_qty" onBlur="addToHiddenField(this,\'qty\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_price" onBlur="addToHiddenField(this,\'price\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_finalized" onBlur="addToHiddenField(this,\'finalized_price\')" onClick="editRow(this);"></td>' +
'<td><input type="hidden" id="name" /><input type="hidden" id="location" /><input type="hidden" id="diameter" /><input type="hidden" id="length" /><input type="hidden" id="qty" /><input type="hidden" id="price" /><input type="hidden" id="finalized_price" /><span id="confirmAdd"><a onClick="addToDatabase()" class="ajax-action-links">Save</a> / <a onclick="cancelAdd();" class="ajax-action-links">Cancel</a></span></td>' +
'</tr>';
$("#table-body").append(data);
}
function cancelAdd() {
$("#add-more").show();
$("#new_row_ajax").remove();
}
function editRow(editableObj) {
$(editableObj).css("background","#FFF");
}
function saveToDatabase(editableObj,column,id) {
var search_terms = $("#myInput").val();
var text_to_enter = $(editableObj).text();
var final_text=text_to_enter.replace("$","");
//alert(final_text);
$(editableObj).css("background","#FFF url(../include/loaderIcon.gif) no-repeat right");
$.ajax({
url: "edit.php",
type: "POST",
//data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,
data:'column='+column+'&editval='+final_text+'&id='+id,
success: function(data){
$(editableObj).css("background","#FDFDFD");
if(search_terms.toString().length==0)
{
window.location.reload();
}
}
});
}
function addToDatabase() {
var name = $("#name").val();
var price = $("#price").val();
var location = $("#location").val();
var qty = $("#qty").val();
var diameter = $("#diameter").val();
var length = $("#length").val();
var category=$("#field").val();
//var category = $("#category").val();
$("#confirmAdd").html('<img src="../include/loaderIcon.gif" />');
$.ajax({
url: "add.php",
//url: "add.php?category='".$category."'",
type: "POST",
data:'name='+name+'&price='+price+'&location='+location+'&qty='+qty+'&diameter='+diameter+'&length='+length+'&category='+category,
success: function(data){
$("#new_row_ajax").remove();
$("#add-more").show();
$("#table-body").append(data);
window.location.reload();
}
});
}
function addToHiddenField(addColumn,hiddenField) {
var columnValue = $(addColumn).text();
$("#"+hiddenField).val(columnValue);
}
function deleteRecord(id) {
if(confirm("Are you sure you want to delete this row?")) {
$.ajax({
url: "delete.php",
type: "POST",
data:'id='+id,
success: function(data){
$("#table-row-"+id).remove();
window.location.reload();
}
});
}
}
function myFunction() {
const input = document.getElementById("myInput");
const inputStr = input.value.toUpperCase();
const search_length = inputStr.length;
//alert(search_length);
//if (search_length == 0)
//{
// location.reload();
//}
document.querySelectorAll('#myTable > tbody > tr:not(.header)').forEach((tr) => {
const anyMatch = [...tr.children]
.some(td => td.textContent.toUpperCase().includes(inputStr));
//fix the button issue here
if (anyMatch) tr.style.removeProperty('display');
else tr.style.display = 'none';
});
}
function increment(editableObj,column,qty,id,increase_value){
var increase_value;
//alert(column);
if(qty=='')
{
qty=0
}
increase_value=parseInt(qty) + parseInt(increase_value);
// alert(increase_value);
//saveToDatabase(increase_value.text(),column,id);
saveToDatabase2(increase_value,column,id);
}
var table = $('#myTable').DataTable( {
ajax: "data.json"
} );
setInterval( function () {
table.ajax.reload();
}, 3000 );
function saveToDatabase2(editableObj,column,id) {
var search_terms = $("#myInput").val();
//var text_to_enter = $(editableObj).text();
//var final_text=text_to_enter.replace("$","");
//alert(final_text);
final_text=editableObj;
$(editableObj).css("background","#FFF url(../include/loaderIcon.gif) no-repeat right");
$.ajax({
url: "edit.php",
type: "POST",
//data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,
data:'column='+column+'&editval='+final_text+'&id='+id,
success: function(data){
$(editableObj).css("background","#FDFDFD");
$('#myTable').DataTable().clear();
$('myTable').DataTable().draw();
//$("#myTable").load("http://voncloft.hauff.com/php/inventory_results.php?category=%27test%27"+"#myTable");
//var tables=$("myTable").DataTable();
//table.DataTable().ajax.reload();
//var table = $('#myTable').DataTable();
location.reload();
//$('#myTable').DataTable().ajax.reload();
},
complete: function(data){
//alert(data);
}
/*,
complete: function(data){
//alert("here");
$('#myTable > tbody > tr:not(.header)').each(function(){
//$(this).destroy();
//location.reload();
var found = 'false';
$(this).each(function(){
if($(this).text().toLowerCase().indexOf(search_terms.toLowerCase()) >= 0)
{
found = 'true';
alert(found);
}
});
if(found == 'true')
{
//$(this).destroy();
$(this).clear();
$(this).draw();
$(this).show();
}
else
{
$(this).hide();
}
});
}*/
});
}
</script>
<style>
//body{width:615px;}
table th{
background-color: green;
color: white;
position: sticky;
z-index: 100;
top: 0;
left: 0;
}
.sortable{
//position: absolute;
//left:100;
width:85%;
}
.totalprice
{
position: fixed!important;
float:right!important;
//position: relative!important;
top:0!important;
right: 0!important;
width: 15%;
padding 0px 50px 0px 50px;
z-index: 1000;
//background-color:yellow;
}
.edit_button {
line-height: 12px;
width: 30px;
height:22px;
font-size: 8pt;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
float:right;
align:right;
top:0;
right:0;
}
.edit_100button{
width: 30px;
height: 30px;
}
.tbl-qa{width: 98%;font-size:0.9em;background-color: #f5f5f5;}
.tbl-qa th.table-header {width:150px;padding: 50px;text-align: left;padding:50px;}
.tbl-qa .table-row td {width:100px;padding:100px;background-color: #FDFDFD;}
.ajax-action-links {color: #09F; margin: 10px 0px;cursor:pointer;}
.ajax-action-button {border:#094 1px solid;color: #09F; margin: 10px 0px;cursor:pointer;display: inline-block;padding: 10px 20px;}
</style>
<input type="text" id="myInput" placeholder="Type to search">
<!--table class="tbl-qa"-->
<table id="myTable" border = "2" class="sortable">
<caption><?php echo str_replace("'","",str_replace('_',' ',$category));?></caption>
<thead>
<tr class="header">
<th width="150px" data-tablesort-type="string">Name</th>
<th width="150px" class="table-sort">Location</th>
<th width="150px" class="table-sort">Diameter</th>
<th width="150px" class="table-sort">Length</th>
<th width="150px" class="table-sort">Qty</th>
<th width="150px" class="table-sort">Price</th>
<th width="150px" class="table-sort">Extended Price</th>
<th width="150px" class="table-sort">Action</th>
</tr>
</thead>
<tbody id="table-body">
<?php
$grand_total="";
if(!empty($inventory)) {
foreach($inventory as $k=>$v) {
?>
<tr class="table-row" id="table-row-<?php echo $inventory[$k]["id"]; ?>">
<td height="75px" contenteditable="true" onBlur="saveToDatabase(this,'name','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["name"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'location','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["location"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'diameter','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["diameter"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'length','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["length"]; ?></td>
<td>
<table width=98%><tr><td>
<table><tr>
<td contenteditable="true" onBlur="saveToDatabase(this,'qty','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $inventory[$k]["qty"]; ?></td>
</tr></table>
</td><td align=right><table margin=0px>
<tr><td>
<button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onfocus="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-1');">--</button></td>
<td align="center">1</td>
<td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','1');">+</button></td>
</tr>
<tr><td>
<button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-2');">--</button></td>
<td align="center">2</td>
<td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','2');">+</button></td>
</tr>
<tr><td>
<button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-3');">--</button></td>
<td align="center">3</td>
<td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','3');">+</button></td>
</tr>
<tr><td>
<button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-5');">--</button></td>
<td align="center">5</td>
<td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','5');">+</button></td>
</tr>
<tr><td>
<button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_100button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-100');">--</button></td>
<td align="center">100</td>
<td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_100button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','100');">+</button></td>
</tr>
<tr><td>
<button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','-1000');">--</button></td>
<td align="center">1000</td>
<td><button id="button"<?php echo $inventory[$k]["id"]; ?> class="edit_button" type="button" onclick="increment(this,'qty','<?php echo $inventory[$k]["qty"]; ?>','<?php echo $inventory[$k]["id"]; ?>','1000');">+</button></td>
</tr>
</table>
</td></tr></table>
</td>
<!--td contenteditable="true" onBlur="saveToDatabase(this,'price',$'<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);"></td>
-->
<td contenteditable="true" onBlur="saveToDatabase(this,'price','<?php echo $inventory[$k]["id"]; ?>')" onClick="editRow(this);">$<?php echo (double)$inventory[$k]["price"]; ?></td>
<td> <?php
if(! is_null($inventory[$k]["price"]))
{
(double)$sum=(double)$inventory[$k]["price"] * (double)$inventory[$k]["qty"];
(double)$grand_total=(double)$grand_total + (double)$sum;
echo "$".number_format($sum,2,'.',',');
//echo $inventory[$k][""];
}
else
{
echo "</td>";
}
?>
<td><a class="ajax-action-links" onclick="deleteRecord(<?php echo $inventory[$k]["id"]; ?>);">Delete</a></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<div class="ajax-action-button" id="add-more" onClick="createNew();">Add More</div>
<div class="totalprice" id="totalprice" name="totalprice">
Grand total:
$<?php
//echo strlen($grandtotal);
if (strlen($grand_total)==0)
{
echo "0.00";
}
else
{
echo number_format($grand_total,2,'.',',');
}
?>
<br>Home
</div>
</body>

Anyway I got it to work by calling window.onload and sort there after I call a window.location.reload(); from an ajax success
DONE!

How to display 3 records in a single row of table

In the code below, I tried to show three records in the card in single row of a table. However, instead it displays only one record per row.
Also, I'm required to pass the item code to a modal popup but couldn't understand how to do that. Despite searching, I can't get complete clarification on how to do this.
My Complete code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/business-casual.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
</style>
</head>
<body>
<?php
$cnt=0;
$rslt = mysqli_query($conn,"SELECT Name,Size,Style FROM productinfo");
if(!$rslt)
{
die(mysqli_error($conn));
}
else
{
while($row = mysqli_fetch_assoc($rslt))
{
echo "<table width='100%'>";
if($cnt==0)
{
$cnt = $cnt + 1;
echo "<tr>
<td width='30%'>
<div class='card'>
<img src='upload/download.jpg' alt='Avatar' style='width:100%' >
<div class='container'>
<h4><b>".$row['Name']."</b></h4>
<p>".$row['Size']."</p>
</div>
</div>";
?>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
<?php
echo "</td>";
}
else
{
echo "<td width='30%'>
<div class='card'>
<img src='upload/"."download.jpg"."' alt='Avatar' style='width:100%' >
<div class='container'>
<h4><b>".$row['Name']."</b></h4>
<p>".$row['Size']."</p>
</div>
</div>
";
?>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
<?php
echo "</td>";
if($cnt==2)
{
$cnt=0;
echo "</tr>";
}
else
{
$cnt = $cnt + 1;
}
}
}
echo "</table>";
}
?>
<div id="id01" class="modal">
<div align="center">
<form action="ViewProd.php" method="post" role="form" class="modal-content animate" ><br/>
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="upload/download.jpg" alt="Avatar" class="avatar">
</div>
<table border="0px" cellpadding="1" cellspacing="0">
<tr >
<td width="25%">
Name
</td>
<td width="100%"> <!--<input type="text" tabindex="1" id="Icode" />-->
<input tabindex='1' accesskey='i' name='Nm' type='text' maxlength='200' id='Nm' width="100%" required="required"/>
</td>
</tr>
<tr >
<td width="25%">
Company Name
</td>
<td>
<input type="text" tabindex="1" name="Compnm" id="Compnm" border="0" required="required"/>
</td>
</tr>
<tr >
<td width="25%">
How do you Know about us?
</td>
<td>
<input type="text" tabindex="1" id="HowKnow" name="HowKnow" />
</td>
</tr>
<tr >
<td width="25%">
Email Address
</td>
<td>
<input type="text" tabindex="1" id="EmailAdd" name="EmailAdd" required="required"/>
</td>
</tr>
<tr >
<td width="25%">
Contact No.
</td>
<td>
<input type="text" tabindex="1" id="Phone" name="Phone" />
</td>
</tr>
<tr>
<td width="25%">
City
</td>
<td>
<input type="text" tabindex="1" id="City" name ="City"/>
</td>
</tr>
<tr >
<td width="25%">
Message
</td>
<td>
<input type="text" tabindex="1" id="Remarks" name="Remarks"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>

BTW, Where is your database connection?
Anyway...
1) On your first loop, inside the first condition, you increment $cnt by one, then on the condition below before the loop repeats, else will also increment $cnt. I also made your code lesser, but with the same display.
echo '<table width="100%">';
while($row = mysqli_fetch_assoc($rslt)){
if($cnt == 0){
echo '<tr>';
}
echo ' <td width="30%">
<div class="card">
<img src="upload/download.jpg" alt="Avatar" style="width:100%" >
<div class="container">
<h4><b>'.$row['Name'].'</b></h4>
<p>'.$row['Size'].'</p>
</div>
</div>';
?>
<button class="view-data" data-artid="<?=($row['id'])?>" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
<?php
echo '</td>';
if($cnt == 2){
$cnt = 0;
echo '</tr>';
} else {
$cnt = $cnt + 1;
}
}
echo '</table>';
2) Your second concern requires more work. You will need to use Ajax for this.
First, lets assign a class attribute and set the id of each data to each of their corresponding button, which you will notice on the code on item #1. You also have to indicate the id column on your query (lets assume that you call named it id, just replace it with the right one):
$rslt = mysqli_query($conn,"SELECT id, Name,Size,Style FROM productinfo");
Then lets create the script that will listen to the button when it is clicked:
$(document).on('click', '.view-data', function(){
var elem = $(this),
id = elem.attr('data-artid');
$.ajax({
method: 'POST',
url: 'getdata.php',
data: {'id' : id},
dataType: 'json',
success: function(result){
$("#Nm").val(result.Name);
$("#Compnm").val(result.CompanyName); /** REPLACE NECESSARY COLUMN NAME **/
/** DO THE REST HERE WITH THEIR RESPECTIVE COLUMN NAME **/
}
});
});
We have to create the getdata.php file, which you'll notice in our script above. That is where we will get the corresponding data of the clicked button.
<?php
/*** INCLUDE YOUR DB CONNECTION HERE ***/
$stmt = $conn->prepare("SELECT * FROM productinfo WHERE id = ?");
$stmt->bind_param("i", $_POST['id']);
$stmt->execute();
$meta = $stmt->result_metadata();
while ($field = $meta->fetch_field()) {
$params[] = &$row[$field->name];
}
call_user_func_array(array($stmt, 'bind_result'), $params);
while ($stmt->fetch()) {
foreach($row as $key => $val) {
$productinfo[$key] = $val;
}
}
$stmt->close();
echo json_encode($productinfo); /** WE WILL THROW THIS DATA BACK TO THE AJAX REQUEST **/
?>
Be mindful of your console log to look for errors when testing this.

Show / hide div?

Hi i've made a calendar which have events but the problem is i can't fix the click on the event as you can see here on month of september i've events i can see events with the :hover css , made a Jquery function but i can't like click on radio button or something
http://esig-sandbox.ch/paintball/calendrierClient2.php
I want to show the class="info"
Thanks for your help :)
$(document).on('click', '.toggleNextInfo', function () {
$(this).parent().find('.info').toggle();
});
/*[fmt]0020-000A-3*/
body{ background:#EEEEEE; letter-spacing:1px; font-family:Helvetica; padding:10px;}
.year{ color:#D90000; font-size:85px;}
.relative{ position:relative;}
.months{}
.month{ margin-top:12px;}
.months ul{ list-style:none; margin:0px; padding:0px;}
.months ul li a{ float:left; margin:-1px; padding:0px 15px 0px 0px; color:#888888; text-decoration:none; font-size:35px; font-weight:bold; text-transform:uppercase;}
.months ul li a:hover, .months ul li a.active{ color:#D90000;}
table{ border-collapse:collapse;}
table td{ border:1px solid #A3A3A3; width:80px; height:80px;}
table td.today{ border:2px solid #D90000; width:80px; height:80px;}
table td.padding{ border:none;}
table td:hover{ background:#DFDFDF; cursor:pointer;}
table th{ font-weight:normal; color:#A8A8A8;}
table td .day{ position:absolute; color:#8C8C8C; bottom:-40px; right:5px; font-weight:bold; font-size:24.3pt;}
table td .events{ position:relative; width:79px; height:0px; margin:-39px 0px 0px; padding:0px;}
table td .events li{ width:10px; height:10px; float:left; background:#000; /*+border-radius:10px;*/ -moz-border-radius:10px; -webkit-border-radius:10px; -khtml-border-radius:10px; border-radius:10px 10px 10px 10px; margin-left:6px; overflow:hidden; text-indent:-3000px;}
table td:hover .events{ position:absolute; left:582px; top:66px; width:442px; list-style:none; margin:0px; padding:11px 0px 0px;}
table td:hover .events li{ height:40px; line-height:40px; font-weight:bold; border-bottom:1px solid #D6D6D6; padding-left:41px; text-indent:0; background:none; width:500px; }
table td .events li:first-child{ border-top:1px solid #D6D6D6;}
table td .daytitle{ display:none;}
table td:hover .daytitle{ position:absolute; left:582px; top:21px; width:442px; list-style:none; margin:0px 0px 0px 16px; padding:0px; color:#D90000; font-size:41px; display:block; font-weight:bold;}
.clear{ clear:both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="images/date.ico" />
<title>Calendrier</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.month').hide();
$('.month:first').show();
$('.months a:first').addClass('active');
var current = 1;
$('.months a').click(function(){
var month = $(this).attr('id').replace('linkMonth','');
if(month != current){
$('#month'+current).slideUp();
$('#month'+month).slideDown();
$('.months a').removeClass('active');
$('.months a#linkMonth'+month).addClass('active');
current = month;
}
return false;
});
});
</script>
<script type="text/javascript">
$(document).on('click', '.toggleNextInfo', function () {
$(this).parent().find('.info').toggle();
});
</script>
</head>
<body>
<?php
require('config.php');
require('date.php');
$date = new Date();
$year = date('Y');
$events = $date->getEvents($year);
$dates = $date->getAll($year);
?>
<div class="periods">
<div class="year"><?php echo $year; ?></div>
<div class="months">
<ul>
<?php foreach ($date->months as $id=>$m): ?>
<li><?php echo utf8_encode(substr(utf8_decode($m),0,3)); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="clear"></div>
<?php $dates = current($dates); ?>
<?php foreach ($dates as $m=>$days): ?>
<div class="month relative" id="month<?php echo $m; ?>">
<table>
<thead>
<tr>
<?php foreach ($date->days as $d): ?>
<th><?php echo substr($d,0,3); ?></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<tr>
<?php $end = end($days); foreach($days as $d=>$w): ?>
<?php $time = strtotime("$year-$m-$d"); ?>
<?php if($d == 1 && $w != 1): ?>
<td colspan="<?php echo $w-1; ?>" class="padding"></td>
<?php endif; ?>
<td <?php if($time == strtotime(date('Y-m-d'))): ?> class="today" <?php endif; ?>> <input type="button" class="toggleNextInfo">
<div class="relative">
<div class="day"><?php echo $d; ?></div>
</div>
<div class="daytitle">
<?php echo $date->days[$w-1]; ?> <?php echo $d; ?> <?php echo $date->months[$m-1]; ?>
</div>
</br>
<ul class="events">
</br>
</br>
<?php if(isset($events[$time])): foreach($events[$time] as $e): ?>
<div class="info" >
<li > <?php echo $e; ?></li>
<li>
<form> <input type="radio" name="Disponibilité" value="Disponibilité"> Choisir cette disponibilite
<input type="submit" name="Envoyer" value="Envoyer">
</form>
</li>
</div>
<?php endforeach; endif; ?>
</ul>
</td>
<?php if($w == 7): ?>
</tr><tr>
<?php endif; ?>
<?php endforeach; ?>
<?php if($end != 7): ?>
<td colspan="<?php echo 7-$end; ?>" class="padding"></td>
<?php endif; ?>
</tr>
</tbody>
</table>
</div>
<?php endforeach; ?>
</div>
<div class="clear"></div>
</div>
</body>
</html>

Use the document ready function always to add the events.
$(function(){
$(document).on('click', '.toggleNextInfo', function () {
$(this).parent().find('.info').toggle();
});
});

load php data to javascript function to further used in a div

I'm making a school project, where I shall be able to load a php named: main_login.php through a javascript function called overvågning(), and then load the php into a div I've made. I can't seem to find anything which should be able to help me.
This is the stuff I've made so far:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Surveillance4you</title>
<style type="text/css">
* {
font-size: 20px;
font-family: Arial;
}
#indhold {
width: 560px;
height: 560px;
margin-left: 651px;
margin-top: 270px;
padding: 20px;
border: 0px;
text-align: center;
}
#indhold input {
padding: 3px;
margin: 5px;
cursor: pointer;
}
body {color:#fff;}
</style>
<script>
function OutputInfo()
{
document.getElementById("indhold").innerHTML="Lavet af:<br> Mads Schiellerup & Frederik Munck<br> Erhversskolen Nordsjælland HTX <br> 10-05-2014<br>Vejleder: Christian Obel"
}
function OutputForside()
{
document.getElementById("indhold").innerHTML="Surveillance4you er en hjemmeside som bruges til at live-streame en video af et overvågningskamera. Dette gøes ved hjælp af en opkobling til vores database, hvor du først kan lave en bruger, og herefter have mulighed for at kunne se diverse kameraer."
}
function overvågning()
{
document.getElementById("indhold").innerid=MLogin
}
</script>
</head>
<body background="https://filemanager.one.com/api/webspace/1/drive/saxenkol.dk/data/Full%20Baggrund.png" onLoad="OutputForside()">
<input type="image" src="https://filemanager.one.com/api/webspace/1/drive/saxenkol.dk/data/Menu%20-%20Forside.png"
onClick="OutputForside()"
style=" position: absolute;
top: 170px;
left: 660px;">
<input type="image" src="https://filemanager.one.com/api/webspace/1/drive/saxenkol.dk/data/Menu%20-%20Overvågning.png"
onClick="MLogin" style=" position: absolute;
top: 170px;
left: 860px;">
<input type="image" src="https://filemanager.one.com/api/webspace/1/drive/saxenkol.dk/data/Menu%20-%20Info.png"
onClick="OutputInfo()" style=" position: absolute;
top: 170px;
left: 1060px;">
<div>
<?php
$form = "";
$form.= "<form method=\"post\" action=\"\">";
$form.= "<div id=\"indhold\">";
$form.= "</div>";
$form.= "</form>";
print $form;
?>
</div>
</body>
</html>
The PHP-file i want my function to get and sent to the container #indhold.
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="text" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
New updated:
<?php
function overvågning()
{
$form = "";
$form.= "<form method=\"post\" action=\"\"><div id=\indhold\">";
$form.= include 'main_login.php';
$form.= "</div></form>";
print $form;
}
?>
And I've also changed:
onClick="overvågning()"
So when I clicked on this image, it should show the php in container

Halløjsa. If I understand correctly you want to pass the user-input from your form to your javascript function but why are there no inputs and submit button within your form tags? If you were to use the php get method instead of post you could retrive the value from the submitted input directly from the url using the window.location method. See this article:
http://javascriptproductivity.blogspot.dk/2013/02/get-url-variables-with-javascript.html
EDIT:If you are not retrieving user inputs but simply want to load the log in file into the page use php include
<?php
echo "<form method=\"post\" action=\"\"><div id=\"indhold\">";
include 'main_login.php';
echo "</div></form>";
?>

How to get array through selected check boxes in jQuery or JavaScript?

I want to get array of user selected check boxes, for example if user select the product1 and in product1 the email is a#acom like that, if user select many check boxes I want all email data in the array which he select against product. The data will get behalf of id, I am stuck at here, working to resolve that issue for 2 days but didn't get success:
<?php v_start($this);?>
<style>
.highlight{ font-wieght:bold; color:#F00;}
.amounts{}
.tick{ float:left; margin-top:-5px;}
.highlight .amount{ display : inline;}
.tick img{ display:none; width : 25px; height : 25px; margin-right: 10px; float : left;}
.highlight .tick img{ display : block;}
</style>
<script>
jQuery(document).ready(function (){
jQuery('.amounts').click(function (){
var pname = jQuery(this).attr('product_name');
if(!jQuery(this).hasClass('highlight')){
jQuery('.amount-'+pname).removeClass('highlight');
jQuery(this).addClass('highlight');
}
else {
jQuery(this).removeClass('highlight');
}
});
});
</script>
<h1><?php echo __l('Step 1 ')?>-> <span style="color:red"><?php echo __l('Step 2')?></span></h1>
<?php echo $this->FormManager->create('User',array_merge($form_options,array('default'=>true)));?>
<table>
<thead>
<tr cellpadding="0" cellspacing="0" width="100%" >
<?php foreach($name as $product) { foreach ($product as $key) {
for($i=0;$i<sizeof($key['ProductPlan']);$i++) {
?>
<th>
<?php echo $key['Product']['name']?>
<?php echo $this->FormManager->input($key['Product']['name'],array('type'=>'hidden','id'=>$key['Product']['name'],'class'=>'hid'))?>
</th>
<?php }}?>
</tr>
</thead>
<tbody>
<tr>
<?php
foreach($name as $product) {
$c = 0;
?>
<?php
foreach ($product as $key) {
$c++;
?>
<td>
<? for($i=0;$i<sizeof($key['ProductPlan']);$i++) { ?>
<div
class = 'packages'
id = "<?php echo $key['Product']['name'],$key['ProductPlan'][$i]['product_plan_id']?>"
onclick = "document.getElementById('<?php echo $key['Product']['name']?>').value='<?php echo $key['ProductPlan'][$i]['product_plan_id']?>';"
>
<div product_name='<?php echo $key['Product']['slug']?>' class='amounts amount-<?php echo $key['Product']['slug']?>'>
<div class='tick'>
<?php echo $this->Html->image('tick.png', array('width'=>'25', 'height'=>'25'));?>
</div>
<div class='amount'>
<?php echo $key['ProductPlan'][$i]['name'];?>
</br></br>
</div>
<div>Create Up To:<?php echo $key['ProductPlan'][$i]['limit'];?></div></br>
<div>Product Plan Amount:<?php echo $key['ProductPlan'][$i]['product_plan_amount'];?>.$</div></br>
</div>
</div>
<?php }?>
<?php } ?>
<?php } ?>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>

I'm not sure I understand what you're asking, would this solution help?
http://jsfiddle.net/rG6bF/1/
$(":checkbox").click(function(e) {
$.each($(":checked"),function(idx,chkbox) {
log($(chkbox).attr('id'));
});
});

It would make it easier to help you if you could provide the HTML-output instead of the PHP-source.
If you want to target all checked checkboxes, and perhaps their relative email input fields, you could use something like this:
var email_arr = new Array();
$('input:checkbox:checked').each(function() { //goes through each checked input box
email_arr.push($(this).siblings("input.email").val()); //Gets the value of an email input field
});
The important thing is how you place the email input-field. If it's not in the same element as the checkbox, you might need to traverse up a node or two using .parent or .parents.
Hope that helps,
//Somersault

We Keep Coding

JavaScript is the programming language of the Web.

hide /show content in table while loop - javascript

Related

How do I click the plus and minus buttons on my form, refresh the values, and keep only what I searched on the screen?

How to display 3 records in a single row of table

Show / hide div?

load php data to javascript function to further used in a div

How to get array through selected check boxes in jQuery or JavaScript?

Categories

Resources