creating table into the Javascript - javascript

Actually i am creating a Modal and in the modal some dynamic data is to shown but my problem is while i insert the Modal body through the .html tag, I am unable to iterate my object Array into the .html tag,
Here is my Script:
echo "<script>
function myFunction(order){
$('.modal-body').html('<table>'
+'<tr>'
+'<th>'+'<b>S.No</b>'+'</th>'
+'<th>'+'<b>Name</b>'+'</th>'
+'<th>'+'<b>Quantity</b>'+'</th>'
+'<th>'+'<b>Personalization</b>'+'</th>'
+'</tr>'
+'<tr>'
var myOrder = order; //Here is my problem i want to iterate my Order object here and populate the rows through this
var arrayLength = myOrder.length;
+'<td>'+'Bill Gates'+'</td>'
+'<td>'+'555 77 854'+'</td>'
+'<td>'+'Bill Gates'+'</td>'
+'<td>'+'555 77 854'+'</td>'
+'</tr>'
+'</table>');
$('#myModal').modal({backdrop: false});
}
</script>";
Here is My Modal:
//<!-- Modal -->
echo"<div class='modal fade' id='myModal' role='dialog'>";
echo"<div class='modal-dialog'>";
// <!-- Modal content-->
echo"<div class='modal-content'>";
echo"<div class='modal-header'>";
echo"<button type='button' class='close' data-dismiss='modal'>×
</button>";
echo"<h4 class='modal-title'><center>Order Details</center></h4>";
echo"</div>";
echo"<div class='modal-body'>";
// echo "Order Number : " . "<script> ('.modal-body').html(order.order_id) </script>" ."<br>";
echo"</div>";
echo"<div class='modal-footer'>";
echo"<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
echo"<button type='button' class='btn btn-default' >Update</button>";
echo"</div>";
echo"</div>";
echo"</div>";
echo"</div>";

I guess you want something like
function myFunction(order) {
var result = '<table>' // + '<tr>'... etc
order.items.forEach(function(entry) {
result += '<tr>'
+ '<td>' + order.order_id + '</td>' // Or whatever field is "S. no"
+ '<td>' + entry.title + '</td>'
+ '<td>' + entry.quantity + '</td>'
+ '<td>' + (entry.personalization || '') + '</td>'
+ '</tr>';
})
result += '</table>';
$('.modal-body').html(result);
}
In the line where you have var myOrder = order. On the other hand, the order object only has one order_id so it will be the same for everything.
Also this file doesn't need to change so you don't need to echo scape it but serve as javascript or inside <script> tag.

Use like this. if you use plus and single quotes script will not work.
echo "<script>
function myFunction(order){
$('.modal-body').html(<table>\
<tr>\
<th><b>S.No</b></th>\
<th><b>Name</b></th>\
<th><b>Quantity</b></th>\
<th><b>Personalization</b></th>\
</tr>\
<tr>\
<td>Bill Gates</td>\
<td>555 77 854</td>\
<td>Bill Gates</td>\
<td>555 77 854</td>\
</tr>\
</table>);
$(#myModal).modal({backdrop: false});
}
</script>";
Update php variable inside like this..
echo "<script>
function myFunction(order){
$('.modal-body').html(<table>\
<tr>\
<th><b>S.No</b></th>\
<th><b>Name</b></th>\
<th><b>Quantity</b></th>\
<th><b>Personalization</b></th>\
</tr>\
<tr>\
<td>".$user."</td>\
<td>".$phone."</td>\
<td>".$name."</td>\
<td>".$mobile."</td>\
</tr>\
</table>);
$(#myModal).modal({backdrop: false});
}
</script>";
Loop inside
$loop="";
for($i=1;$i<=5;$i++){
$loop.="<tr><td>".$user."</td><td>".$phone."</td><td>".$name."</td><td>".$mobile."</td></tr>";
}
echo "<script>
function myFunction(order){
$('.modal-body').html(<table>\
<tr>\
<th><b>S.No</b></th>\
<th><b>Name</b></th>\
<th><b>Quantity</b></th>\
<th><b>Personalization</b></th>\
</tr>".$loop."</table>);
$(#myModal).modal({backdrop: false});
}
</script>";

Related

PHP table pass to a var in javascript

I have this PHP code and I am trying to alert a table that receives its values via sql.
Here's my code:
<script src="jquery.min.js">
</script>
<script>
function bus(x){
alert("Row index is: " + x.value);
}
</script>
$sql="SELECT ID, NOME, CPF FROM cadastro WHERE NOME LIKE '%" . $name . "%'";
$result=mysqli_query($conn,$sql);
while($row=mysqli_fetch_array($result)){
$ID =$row['ID'];
$NOME=$row['NOME'];
$CPF=$row['CPF'];
echo '<table style="width:100%">';
echo "<tr>";
echo "<th> ID </th>";
echo "<th> NOME </th>";
echo "<th> CPF </th>";
echo "</tr>";
echo '<tr style="cursor: pointer;">';
echo "<td onclick='bus(" . $ID . ")' class='tab'>" . $ID . "</td>";
echo "<td onclick='bus(" . $ID . ")' class='tab'>" . $NOME . "</td>";
echo "<td onclick='bus(" . $ID . )' class='tab'>" . $CPF . "</td>";
echo "</tr>";
echo "</table>";
I need to get the value from the table and serve it to a javascript function.
If x is a Number, then x.value will give you undefined and you should just use:
alert("Row index is: " + x);
To get the value of the column, you could pass this to the function instead of the id and then get the innerHTML:
<td onclick="bus(this)" class="tab">column 1</td>
function bus(elm){
alert(elm.innerHTML);
}
function bus(elm) {
alert(elm.innerHTML);
}
<table>
<tr>
<td onclick="bus(this)" class="tab">column 1</td>
<td onclick="bus(this)" class="tab">column 2</td>
<td onclick="bus(this)" class="tab">column 3</td>
</tr>
</table>
You only have one error. onclick is passing the ID, so the following code will do exactly what you need:
<script>
function bus(x){
alert("Row index is: " + x);
}
</script>
I removed the .value from your javascript.
function bus(x){
alert("Value is " + x);
}
<table>
<tr>
<td onclick="bus(44)">44</td>
<td onclick="bus(44)">Lorem</td>
<td onclick="bus(44)">ipsum</td>
</tr>
</table>
In this case x is not an object, just a plain value so:
alert("Row index is: " + x);
gl, pb

How to pass PHP variable from a loop and use it as a Javascript variable

I have a while loop that displays some data into a table from a mysql table. Each table row has a button that is used to send data via ajax to another php page that insert the data into another table. My problem is that I want to get the values of specific rows by getting their ids but because I'm outside of the loop, I'm not able to the $row variable... How can I do such a thing?
Here is the portion of the code:
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row['TROUBLE_TICKET_NUM'] . "<input type=\"hidden\" name=\"billet".$row['TROUBLE_TICKET_NUM']."\" id=\"billet".$row['TROUBLE_TICKET_NUM']."\" value=\"".$row['TROUBLE_TICKET_NUM']."\"></td>";
echo "<td>" . $row['CONCAT(Year(activites.ACTIVITY_CREATE_DTM),month(activites.ACTIVITY_CREATE_DTM))'] . "</td>";
echo "<td>" . $row['CUSTOMER_NM'] . "</td>";
echo "<td>" . $row['DEFAULT_WORK_GROUP_CD'] . "</td>";
echo "<td>" . $row['ACTIVITY_OWNER_NM'] . "<input type=\"hidden\" name=\"id".$row['TROUBLE_TICKET_NUM']."\" id=\"id".$row['TROUBLE_TICKET_NUM']."\" value=\"".$row['ACTIVITY_OWNER_NM']."\"></td>";
echo "<td>" . $row['groupe'] . "</td>";
echo "<td>" . $row['Technicien'] . "<input type=\"hidden\" name=\"technicien".$row['TROUBLE_TICKET_NUM']."\" id=\"technicien".$row['TROUBLE_TICKET_NUM']."\" value=\"".$row['Technicien']."\"></td>";
echo "<td>
<label for=\"date". $row['TROUBLE_TICKET_NUM'] ."\"><strong>Date:</strong></label>
<input type=\"text\" name=\"date". $row['TROUBLE_TICKET_NUM'] ."\" id=\"date". $row['TROUBLE_TICKET_NUM'] ."\" onClick=\"ds_sh(this);\" value=\"".date("Y-m-d")."\">
<label for=\"heure". $row['TROUBLE_TICKET_NUM'] ."\"><strong>Heure:</strong></label>
<input type=\"text\" class=\"timepicker\" name=\"heure". $row['TROUBLE_TICKET_NUM'] ."\" id=\"heure". $row['TROUBLE_TICKET_NUM'] ."\"></td>
<td><button type=\"button\" class=\"btn btn-success btn-block\" name=\"insert-data". $row['TROUBLE_TICKET_NUM'] ."\" id=\"insert-data". $row['TROUBLE_TICKET_NUM'] ."\" onclick=\"insertData()\">Ajouter suivi</button>
<br>
<p id=\"message\"></p>
</td>";
echo "<tr>";
}
} else {
echo "<tr><td><div class=\"alert alert-dark\" role=\"alert\">Aucun résultat</div></td></tr>";
}
mysqli_close($conn);
?>
</tbody>
</table>
</div>
<!-- Script pour envoi donnée via ajax -->
<script type="text/javascript">
$(document).ready(function(){
$("#insert-data<?php echo $row['TROUBLE_TICKET_NUM']; ?>").click(function(){
var billet=$("#billet<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var technicien=$("#technicien<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var id=$("#id<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var date=$("#date<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var heure=$("#heure<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
// Debug
console.log(billet, technicien, tid, date, heure);
// AJAX
$.ajax({
method: "POST",
url: "insert-data.php",
data: {billet:billet,technicien:technicien,id:id,date:date,heure:heure},
dataType: "JSON",
success: function(data) {
$(".message").html(data);
$("p").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
});
});
</script>
If your intent is to allow the user to only insert values that come from existing rows, then don't pass the values you want to insert to the AJAX target. Otherwise, the user could manually call the AJAX target and simply provide any values they want. Instead, send the ID of the source row, and update the AJAX target to lookup that row and then copy the values from it.
You can do this by putting the row id into a data attribute for each row:
<tr data-id="<?= $row['id'] ?>">
Then use a jquery selector that fires on click of the button to get that value for the clicked row. Something like:
$(this).parent().data('id')

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

Checking if checkboxes in PHP are checked using javascript

echo '<div class="col-lg-10 col-lg-offset-1 panel">' . "<table id='data' class='table'>
<tr>
<th></th>
<th>Document No</th>
<th>AWB NO</th>
<th>Order Id</th>
<th>Forms</th>
<th>Extras</th>
</tr>";
foreach ($cancel as $key => $value)
{
echo "<tr>";
echo "<td>" . "<input type='checkbox' name='name1' id='checkit$checkitCounter' />" . "</td>";
echo "<td>" . $value[$d] . "</td>";
echo "<td>" . $value[$a] . "</td>";
echo "<td>" . $value[$o] . "</td>";
echo "<td>" . $value[$f] . "</td>";
echo "<td>" . $value[$e] . "</td>";
echo "</tr>";
}
echo "</table></div>";
This above table is generated using php echo with checkbox generated every iteration.
<div style="padding-left:600px;">
<a href='#' class='btn btn-primary btn-md' id='button' style="margin-right:1000px;" onclick='checkit()'
role='button'>Continue..</a>
</div>
The above button is supposed to run a javascript function given below:
function checkit {
var x = document.getElementById("checkit").checked;
if (x == false) {
alert('All items are not removed,pls remove and continue');
}
else {
window.location = "tst.php";
}
}
The above JavaScript doesn't seem to be functioning properly as even though i have checked none of the boxes it just stays on the same page.
Example:
<div style="padding-left:600px;"> <a href='#' class='btn btn-primary btn-md' id='button' style="margin-right:1000px;" onclick='checkit()' role='button'>Continue..</a>
</div>
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
<input type='checkbox' name='name1' class='checkit' />
And js:
function checkit() {
var boxes = document.querySelectorAll(".checkit");
arr = [];
for (i = 0; i < boxes.length; i++) {
arr.push(boxes[i]);
}
console.log(arr);
function is_checked(val) {
return val.checked == true;
}
checked = arr.filter(is_checked);
console.log(checked);
if (checked.length != boxes.length) {
alert('All items are not removed,pls remove and continue');
} else {
window.location = "tst.php";
}
}
Demo: https://jsbin.com/cukuzeweza/edit?html,js,output
I have made a light version of your code and the rest is left to your development logic.
You have had a lot small problems in your code, like function in JavaScript needed (), the usage of single and double quotes, missing call the JavaScript function etc.
I have created a dummy array for test, but again you could do what you like to achieve your code.
Here is the working solution:
<?php
$cancel = ["checkBox1", "checkBox2", "checkBox3"];
echo "<div><table id='data' class='table'>
<tr>
<th></th>
<th>Document No</th>
</tr>";
foreach ($cancel as $value)
{
echo "<tr>";
echo "<td><input type='checkbox' name='name1' id='$value' onchange='checkIt(\"$value\");' /></td>";
echo "<td>" . $value . "</td>";
echo "</tr>";
}
echo "</table></div>";
?>
<script>
function checkIt(checkBoxId) {
var x = document.getElementById(checkBoxId).checked;
console.log("x" + checkBoxId + " is " + x);
}
</script>
You can see in your console the results of your checkbox.

Toggle the display of a table echod from php in Jquery

I have a table created in php that contains rows of customer information, with an additional row containing notes about each customer.
I would like a button above the table that when clicked will show or hide the notes row of each customer. So far my code doesn't seem to produce anything, I create the table here:
echo "<table id='listTable' border='1' cellpadding='10' class='listTable'>";
echo "<tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Company Name</th> <th>Telephone</th> <th>Alt/ Telephone</th> <th>Address </th> <th>Town</th> <th>Postcode</th> <th></th> <th></th> <th></th> <th></th></tr>";
// loop through results of database query, displaying them in the table
for ($i = $start; $i < $end; $i++)
{
// make sure that PHP doesn't try to show results that don't exist
if ($i == $total_results) { break; }
// echo out the contents of each row into a table
echo "<tr class='main'>";
echo '<td>' . mysql_result($result, $i, 'id') . '</td>';
echo '<td>' . mysql_result($result, $i, 'First_Name') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Surname') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Company_Name') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Telephone') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Alt_Telephone') . '</td>';
echo '<td>' . mysql_result($result, $i, 'line_1') . '</td>';
echo '<td>' . mysql_result($result, $i, 'town') . '</td>';
echo '<td>' . mysql_result($result, $i, 'postcode') . '</td>';
echo '<td>View</td>';
echo '<td>Delete</td>';
echo '<td>archive</td>';
echo '<td>New Job</td>';
echo "</tr class='notes'>";
echo "<tr>";
echo '<td>' . mysql_result($result, $i, 'notes') . '</td>';
echo "</tr>";
}
// close table>
echo "</table>";
and Have the following Javascript at the top of my code
<link rel="stylesheet" type="text/css" href="test.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<head>
<title>View Records</title>
<script language="Javascript">
var rows = $('table.listTable tr.notes');
$('#showNotes').click(function() {
var showN = rows.filter('.showN').show();
rows.not( showN ).hide();
});
</script>
</head>
With the Toggle button created further down
<button id="showNotes">Toggle Notes</button>
When I click the button nothing is happening
You add class notes to close tag </tr>.
You have:
echo "</tr class='notes'>";
echo "<tr>";
Should be:
echo "</tr>";
echo "<tr class='notes'>";
And jQuery:
$(document).ready(function() {
$('#showNotes').click(function() {
$('#listTable tr.notes').toggle();
});
});
Now some remarks about your code:
Use mysqli_*, mysql_* is deprecated.
If you're using HTML in echo maybe try ' for it: echo '<tr class="notes">' looks better I think.
Use prepared statements: mysqli.prepare
Check this out (against your for loop): mysqli-stmt.fetch
Wrap the script in document ready function:
$(document).ready(function() {
$('#showNotes').click(function() {
var showN = rows.filter('.showN').show();
rows.not( showN ).hide();
});
});

Categories