We Keep Coding

JQuery: How to pass PHP data from div to div

As for my HTML code is
<div class="right">
<h2>Product Detail</h2>
<div id="righttop"></div>
<button id="Add">Add</button>
</div>
<div class="rightbot">
<h2>Shopping Car</h2>
<div id="rightbot"></div>
</div>
And the PHP is
mysqli_select_db($con,"products");
$sql="SELECT product_id, product_name, unit_price, unit_quantity, in_stock FROM products WHERE product_id = '".$productid."'";
$result = mysqli_query($con,$sql);
echo "<table>";
echo "<th>Product Name</th>";
echo "<th>Unit Price</th>";
echo "<th>Unit Quantity</th>";
echo "<th>In Stock</th>";
while($row = mysqli_fetch_array($result)) {
echo "<tr id='detail'>";
echo "<td>" . $row['product_name'] . "</td>";
echo "<td>" . $row['unit_price'] . "</td>";
echo "<td>" . $row['unit_quantity'] . "</td>";
echo "<td>" . $row['in_stock'] . "</td>";
echo "</tr>";
}
echo "</table>";
echo $_POST['detail'];
mysqli_close($con);
?>
div#righttop is changed by another button.
How can I pass the current content from div#righttop to div#rightbot?

If you meant to transfer the contents of righttop to rightbot, here is a way. On click of the button, before changing anything in righttop, do this:
$('#rightbot').html($('#righttop').html());

JQuery preventDefault not working with .on click

I have a row of data, which when clicked, show information about the object.
But I also have a button on the row, which when clicked performs some jquery wizzardry.
Anyway, I can't seem to prevent the row click and just fire the button stuffs.
I've tried:
return false;
e.preventDefault();
e.stopPropagation();
This is the function.
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
I have all 3 in there at the moment, but that's just for example. Although I have tried all 3 in there, but I have also tried each one separately.
Heres the HTML
<div class="row" id="check_container">
<div id='table_holder' class="col-md-12" >
<table id="org_table" class="sortable table table-striped tablesorter">
<?php
if(empty($org_data2)) {
// if there is no data for the selected filter
echo "There are no organisations set up.";
} else {
echo "
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Sub Orgs</th>
<th>Locations</th>
<th>Users</th>
<th>Compliance</th>
<th>O/D Checks</th>
<th>O/D Training</th>
<th>Renewal</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
";
foreach ($org_data2 as $orgs) {
if(!$orgs->descendant) {
echo "<tr id='" . $orgs->org_id . "' class='edit_org_row clickable'>";
echo "<td>" . (($orgs->ancestor)?'<div id="' . $orgs->org_id . '" class="show_sub_orgs btn btn-primary btn-xs" data-toggle="tooltip" title="Show Sub-Orgs"><i class="fa fa-expand" aria-hidden="true"></i></div>':'') . "</td>";
echo "<td data-title='Name'>" . $orgs->org_name . "</td>";
echo "<td data-title='Sub Orgs' class='text-center'></td>";
echo "<td data-title='Locations' class='text-center'>" . $orgs->locations . "</td>";
echo "<td data-title='Users' class='text-center'>" . $orgs->users . "</td>";
echo "<td data-title='Compliance' class='text-center'></td>";
echo "<td data-title='O/D Checks' class='text-center'>" . $orgs->checks . "</td>";
echo "<td data-title='O/D Training' class='text-center'>" . $orgs->training . "</td>";
echo "<td data-title='Renewal'>" . date("d/m/Y", strtotime($orgs->renewal_date)) . "</td>";
echo "<td data-title='Actions'><div data-id='3' id='" . $orgs->org_id . "' class='btn admin_login btn-success btn-sm' data-toggle='tooltip' title='Login as customer'>Login</div><div data-id='2' id='" . $orgs->org_id . "' class='btn btn-danger btn-sm' data-toggle='tooltip' title='Disable customer'>Disable</div></td>";
echo "</tr>";
}
}
}
?>
</tbody>
</table>
</div>
</div>
What am I doing wrong?

When you delegate to a child element you need to use e.stopImmediatePropigation()
Jquery uses it's own event system and this will stop any execution on the elements delegated to from the parent. e.stopPropigation() will allow all events delegated from the same parent to fire
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
})

How to pass information through jQuery

I am attempting to pass information from the button within the column "actions" to the modal div, I call the modal using JS, However I am unsure about how to send information from the table over to the div. (Remember it has to be different information for every button as each button is in another row)
<?php
error_reporting(0);
$con = new mysqli("localhost","****","****","****");
if(mysqli_connect_errno()){
echo(mysqli_connect_error());
}
$cuser = $_COOKIE['c_user'];
$result = $con->query("SELECT * FROM calls");
echo"
<table class=\"table table-bordered responsive\">
<thead>
<tr>
<th width=\"5%\">#</th>
<th>Call Status</th>
<th>Player ID</th>
<th>Player Name</th>
<th width=\"33%\">Actions</th>
</tr>
</thead>
<tbody>";
while($row = $result->fetch_assoc()){
echo "<tr> ";
echo("<td>" . $row['id'] . "</td> ");
echo("<td>" . $row['status'] . "</td> ");
echo("<td>" . $row['pid'] . "</td> ");
echo "<td>" . $row['pname'] . "</td> ";
echo "<td> ";
if($row['status'] == 'Pending'){
echo "<a button type=\"button\" class=\"btn btn-warning\" href=\"calls.php?claim=true&callid=$row[id]\">Claim Call</button /a> ";
} else if($cuser == $row['claimedby']) {
echo "<a button type=\"button\" class=\"btn btn-danger\" href=\"calls.php?closecall=true&callid=$row[id]\">Close Call</button /a> ";
} else {
echo "<a button type=\"button\" class=\"btn btn-warning disabled\">Claimed</button /a> ";
}
echo "<a button type=\"button\" href=\"javascript:;\" onclick=\"jQuery('#modal-2').modal('show');\" class=\"btn btn-info\">Call Info</button /a> ";
echo "<a button type=\"button\" id = $row[id] href=\"javascript:;\" onclick=\"jQuery('#modal-1').modal('show');\" class=\"btn btn-success\">Server Info</button /a> ";
echo "<a button type=\"button\" class=\"btn btn-primary\">Join Server</button /a> ";
echo "</td> ";
}
echo "</tr>
</tbody>
</table>";
echo"<div class=\"modal fade\" id=\"modal-1\">
<div class=\"modal-dialog\" style=\"width: 50%\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>
<h4 class=\"modal-title\">Call Info</h4>
</div>
<div class=\"modal-body\" id=\"serverHandle\">
</div>
<div class=\"modal-footer\">
<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>
</div>
</div>
</div>
</div>";
?>

Do you want to send any kind of information from Buttons to Modal DIV when somebody clicks on those buttons ? If that you want then you can add one custom attribute to your button like this <button info='my-info' id=''>Click</button> then when someone click on that button you can extract the value from that attribute by using JavaScript this & place that to the MODAL window by using any ID from Modal DIV.

You can add something like this to your button along with a click event.
data-value="<?php echo $Something->SomeValue;?>"
Then, when the click event gets triggered, you can get the value like this:
$(this).data("value");
you can use various data-[tag] to pass multiple pieces of information.
Or as an alternative, add this to each button:
onclick='someFunction("<?php echo $Something->SomeValue;?>")';

Add Variable from PHP foreach to bootstrap modal

I have a button within a php foreach statement which loads a modal. How can i pass the particular id ($animalid) to the modal? I have it kind of working but the modal will load the same id in each modal popup. See my php foreach code below and also part of the modal.
$pdo2 = Database::connect();
$sql2 = 'SELECT * FROM animals WHERE riderid = '.$data[id].' AND hp != "Choose One"';
foreach ($pdo2->query($sql2) as $row) {
echo '<tr>';
echo '<td>'. $row['hp'] . '</td>';
echo '<td>'. $row['hpname'] . '</td>';
echo '<td>'. $row['hpage'] . '</td>';
echo '<td>'. $row['hpcolour'] . '</td>';
echo '<td>'. $row['hpmicro'] . '</td>';
echo '<td>';
echo '<button class="btn btn-default btn-xs" id="float-right" data-toggle="modal" data-target=".bs-example-modal-lg-2"><span class="glyphicon glyphicon-pencil"></span> Update</button>';
echo ' ';
echo '<a class="btn btn-default btn-xs" href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a>';
echo '</td>';
echo '</tr>';
$animalid = $row['id'];
}
Database::disconnect();
?>
Modal Code
<div class="modal-body">
<form name="editanimal" id="editanimal" class="form-horizontal" action="updateanimal.php" method="post">
<span class="form-break">
<?php
// Get Animal id
//$animalid = $data['id'];
echo $animalid;
?>

$animalid is in the loop. If you want to use that value, you can store the data to other array and use it. Hope you get some inspiration.
PHP:
<?php
$pdo2 = Database::connect();
$sql2 = 'SELECT * FROM animals WHERE riderid = '.$data[id].' AND hp != "Choose One"';
$list = array();
foreach ($pdo2->query($sql2) as $row) {
$item = array();
$content = '<tr>';
$content .= '<td>'. $row['hp'] . '</td>';
$content .= '<td>'. $row['hpname'] . '</td>';
$content .= '<td>'. $row['hpage'] . '</td>';
$content .= '<td>'. $row['hpcolour'] . '</td>';
$content .= '<td>'. $row['hpmicro'] . '</td>';
$content .= '<td>';
$content .= '<button class="btn btn-default btn-xs" id="float-right" data-toggle="modal" data-target=".bs-example-modal-lg-2"><span class="glyphicon glyphicon-pencil"></span> Update</button>';
$content .= ' ';
$content .= '<a class="btn btn-default btn-xs" href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a>';
$content .= '</td>';
$content .= '</tr>';
$item['id'] = $row['id'];
$item['content'] = $content;
$list[] = $item;
}
Database::disconnect();
?>
HTML:
<div class="modal-body">
<form name="editanimal" id="editanimal" class="form-horizontal" action="updateanimal.php" method="post">
<span class="form-break"></span>
<?php foreach($list as $item){ ?>
<?php echo $item['id'];?>
<?php } ?>
or..
<table>
<?php foreach($list as $item){ ?>
<?php echo $item['content'];?>
<?php } ?>
</table>
<!-- ... -->
</form>
</div>

$animalid is being over written each time you iterate through the foreach loop. You would have to build an array to hold all of the animalids, and pass that to your modal or print out the id as you are iterating through the loop.

Combine checkbox sum from Javascript into my PHP database table

This is my code for my the current database populated table. I have found a previous Javascript code to help me sum values from multiple checkboxes.
The values I want summed are only from my Asset_Cost
<body>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<thead>
<tr>
<th><h3>Asset ID</h3></th>
<th><h3>Vendor</h3></th>
<th><h3>Hardware </h3></th>
<th><h3>Cost</h3></th>
<th><h3>Purchase Date</h3></th>
<th><h3>Select Cost</h3></th>
</tr>
</thead>
<tbody>
<?php
$result = mysql_query("SELECT * FROM Asset");
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Asset_ID']."</td>";
echo "<td>" . $row['Vendor_Name'] . "</td>";
echo "<td>" . $row['Hardware_ID'] . "</td>";
echo "<td>" . $row['Asset_Cost'] . "</td>";
echo "<td>" . $row['DateOfPurchase'] . "</td>";
echo "</tr>";
}
echo "</table>";
I want to to integrate the checkbox sum from this code:
<?php
include('connect1.php');
$result = $db->prepare("SELECT * FROM Asset");
$result->bindParam(':userid', $res);
$result->execute();
for($i=0; $row = $result->fetch(); $i++){
?>
<INPUT TYPE="checkbox" NAME="items[]" value="<?php echo $row['Asset_Cost'] ?>" id="sum_m_<?php echo $i ?>" onclick="UpdateCost()">
<td>
<?php echo $row['Asset_ID'] ?>
<?php echo $row['Vendor_Name'] ?>
<?php echo $row['Hardware_ID'] ?>
<?php echo $row['Asset_Cost'] ?>
</td>
<br>
<?php
}
?>
<br>
Total Cost : <input type="text" name="sen" id="totalcost" value="">
Here is the javascript
<script type="text/javascript">
function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=0; i<<?php echo $calculated ?>; i++) {
gn = 'sum_m_'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost' ).value = sum.toFixed(0);
}
window.onload=UpdateCost
</script>

<body>
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
<thead>
<tr>
<th><h3>Select</h3></th>
<th><h3>Asset ID</h3></th>
<th><h3>Vendor</h3></th>
<th><h3>Hardware </h3></th>
<th><h3>Cost</h3></th>
<th><h3>Purchase Date</h3></th>
</tr>
</thead>
<tbody>
<?php
$result = mysql_query("SELECT * FROM Asset");
$calculated = mysql_num_rows($result);
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td><INPUT TYPE='checkbox' NAME='items[]' value='". $row['Asset_Cost'] ."' id='sum_m_$i' onclick='UpdateCost()'> </td>";
echo "<td>" . $row['Asset_ID']."</td>";
echo "<td>" . $row['Vendor_Name'] . "</td>";
echo "<td>" . $row['Hardware_ID'] . "</td>";
echo "<td>" . $row['Asset_Cost'] . "</td>";
echo "<td>" . $row['DateOfPurchase'] . "</td>";
echo "</tr>\n";
}
?>
<br>
Total Cost : <input type="text" name="sen" id="totalcost" value="">
<script type="text/javascript">
function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=0; i<<?php echo $calculated ?>; i++) {
gn = 'sum_m_'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost' ).value = sum.toFixed(0);
}
window.onload=UpdateCost();
</script>
</body>
Mostly things are as it is in your code. Only gave $calculated value equal to the number of rows in your mysql result. Hope this helps..