Show / hide div? - javascript

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();
});
});

Related

Event listener not active after table refresh

I have an event listener on a table to indicate the current ID of a row when clicked.
It works perfectly when the row is clicked on initially, but when ajax is triggered after dropdown change, and table refreshed, the event listener is not working any more. Why?
initial file:
<?php
//load_data_select.php
$connect = mysqli_connect("localhost", "re", "", "test");
function fill_brand($connect)
{
$output = '';
$sql = "SELECT * FROM brand";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
{
$output .= '<option value="'.$row["brand_id"].'">'.$row["brand_name"].'</option>';
}
return $output;
}
function fill_product($connect)
{
$output = '<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<table id="mytable" name="table_1">
<tr>
<th>ID</th>
<th>PRODUCT</th>
<th>BRAND ID</th>
</tr>';
$sql = "SELECT * FROM product";
$result = mysqli_query($connect, $sql);
while($row = mysqli_fetch_array($result))
{
$output .= '<div class="col-md-3">';
$output .= '<tr>
<td id="'.$row["product_id"].'">'.$row["product_id"].'</td>
<td id="'.$row["product_id"].'">'.$row["product_name"].'</td>
<td id="'.$row["product_id"].'">'.$row["brand_id"].'</td>
</tr>';
}
$output .= '</table>';
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>ok</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h3>
<select name="brand" id="brand">
<option value="">Show All Product</option>
<?php echo fill_brand($connect); ?>
</select>
<br /><br />
<div class="row" id="show_product">
<?php echo fill_product($connect);?>
</div>
</h3>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var table = document.querySelector('#mytable');
// listen for a click
table.addEventListener('click', function (ev) {
var serviceID = ev.target.id;
alert(serviceID);
})
$('#brand').change(function(){
var brand_id = $(this).val();
$.ajax({
url:"load_data.php",
method:"POST",
data:{brand_id:brand_id},
success:function(data){
$('#show_product').html(data);
}
});
});
});
</script>
and then the second file (load_data.php) to refresh the table:
<?php
//load_data.php
$connect = mysqli_connect("localhost", "re", "", "test");
$output = '';
if(isset($_POST["brand_id"]))
{
if($_POST["brand_id"] != '')
{
$sql = "SELECT * FROM product WHERE brand_id = '".$_POST["brand_id"]."'";
}
else
{
$sql = "SELECT * FROM product";
}
$result = mysqli_query($connect, $sql);
$output .= ' <style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<table id="mytable">
<tr>
<th>ID</th>
<th>PRODUCT</th>
<th>BRAND ID</th>
</tr>';
while($row = mysqli_fetch_array($result))
{
$output .= ' <tr>
<td id="'.$row["product_id"].'">'.$row["product_id"].'</td>
<td id="'.$row["product_id"].'">'.$row["product_name"].'</td>
<td id="'.$row["product_id"].'">'.$row["brand_id"].'</td>
</tr>'; }
$output .= '</table>';
echo $output;
}
?>

html/PHP form not submitting after being generated with AJAX

I have a table full of forms that work normally, but after being filtered by a drop down using AJAX, the submit buttons aren't working anymore.
This is the table generated by AJAX
<table class="striped" style='padding-top:20px;'>
<tr class="header" style='border: solid 2px black; background-color: #FFF500; text-align:center; color: black;'>
//All the tds
</tr>
<?php
while ($row = mysqli_fetch_array($query)) {
echo "<tr ><form action=someURL.php method=post>";
//all the data generated inside
echo "<td><input type='submit' name='submit' value=Submit></td>";
echo "</form></tr>";
}
?>
</table>
This is the dropdown that calls makes the AJAX call the form
<select id="selectStuff" name="selectStuff" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" style="font-size: 15px; background-color: white; width: auto;">
<option value="">Select Something</option>
<?php
$query="SELECT iddivisiones,nombre FROM divisiones";
$db=mysqli_query($con,$query);
while($d=mysqli_fetch_assoc($db)){
echo "<option value='".$d['iddivisiones']."'>".$d['nombre']."</option>";
}
?>
</select>
and here's the script with the AJAX
<script>
$(document).ready(function(){
$('#selectStuff').on('change',function(){
var selectedId=$(this).val();
if(selectedId){
$.ajax({
type:'POST',
url:'categoria-resultados.php',
data:'seleccion='+selectedId,
success:function(html){
$('#tables').html(html);
}
});
}else{
$('#tables').html('<option value="">failed</option>')
}}); });
And the div where the forms table is supposed to appear
<div class="tables" id="tables"> </div>

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.

hide /show content in table while loop

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>

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

Categories