I have a table in one of the column in a row i use a hyperlink with "Edit"
where i call a javascript function (which launches a popup-window)
This is one of my table row
echo "<tr>";
echo '<td>' . $row['id'] . '</td>';
echo '<td>' . $row['firstname'] . '</td>';
echo '<td>' . $row['lastname'] . '</td>';
echo '<td>' .
'<a href=\"javascript:popup_window_show('#sample', { pos : 'window-center', width : '270px' });'>Edit</a>
. '</td>';
echo '<td><a href=\"javascript:popup_window_show('#sample', { pos : 'window-center', width : '270px' });'>Edit</a></td>';
I have used two methods for Edit hyperlink, the first has no prob with code but doesn't shows the 'Edit' in the cell.. and the second has some errors with syntax
Below is my Js function in popup-window.js
function popup_window_show(/*selector,*/ args)
{
var pos = args.pos ? args.pos : null;
if (pos == 'window-center' )
{ x += $(document).scrollLeft()+($(window).width()-obj.width())*1/2; y += $(document).scrollTop()+($(window).height()-obj.height())*1/2; }
}
And also how do i pass row data to the js function (say firstname)
I have created a JSBin at http://jsbin.com/yafaxuma/3/edit, which demonstrates how to pass the row as an argument to your function.
Also it wasn't clear what the obj reference was to, so I have commented that in the JSBin and also commented how you can debug your function and see what is happening.
I have used jQuery in the JSBin to pass the row as an argument as it looked like you were also using it for obtaining scroll positions on the document.
The JSBin is showing output in the browser console. If you need more adjustments to the code, just provide me some clear idea of what you want to achieve and I can modify the code to demonstrate how to do what you want.
UPDATE to add PHP echo
echo "<tr>";
echo '<td>' . $row['id'] . '</td>';
echo '<td>' . $row['firstname'] . '</td>';
echo '<td>' . $row['lastname'] . '</td>';
echo '<td>Edit</td>';
echo "</tr>";
function popup_window_show(selector, args)
{
var pos = args.pos ? args.pos : null;
if (pos == 'window-center')
{
x += $(document).scrollLeft()+($(window).width()-obj.width())*1/2;
y += $(document).scrollTop()+($(window).height()-obj.height())*1/2;
}
var row = args.row;
}
Related
This might confuse but a serious question.
I'm getting table rows from a loop using php and I'm displaying those table inside a table tag using ajax.
Here for the each row there is an id called productTableRow.
So I want to do is, in this table when I click a specific row, I want to change that clicked row's background color.Just only that row and to take the value of the clicked row attribute called product-id and show it in another hidden input
$(document).on('click', function(e){
if($(e.target).is('#productTableRow')){
var productId = $(e.target).attr('productId');
if(productId == productId){
$(e.target).css('background-color','#128C7E');
} else {
$('.trProductTable').css('background-color', 'transparent');
}
}
});
This is my php code which generating the Table rows,
foreach ($products as $product) {
$responseData .= "<tr id='productTableRow' productId='" . $product->id . "'>";
$responseData .= "<td>" . $product->id . "</td>";
$responseData .= "<td>" . $product->product_name . "</td>";
$responseData .= "<td>" . $product->product_barcode . "</td>";
if ($product->group_id == 0) {
$responseData .= "<td>None</td>";
} else {
$responseData .= "<td>" . $product->group_name . "</td>";
}
$responseData .= "<td>" . $product->product_cost . "</td>";
$responseData .= "<td>" . $product->product_selling . "</td>";
if ($product->product_type == 0) {
$responseData .= "<td>Liquid</td>";
} else if ($product->product_type == 1) {
$responseData .= "<td>Weight</td>";
} else if ($product->product_type == 2) {
$responseData .= "<td>Quantity</td>";
}
$responseData .= "<td>" . $product->created_at . "</td>";
Tried this code but doesn't work, really appreciate your help.
After changing the id to a class, I would try this
$('tr.productTableRow').click(function(){
var productId = $(this).attr('productId');
if(productId === productId){ // Always true
$(this).css('background-color','#128C7E');
} else {
// Do something when false ???
}
});
Edit Note: this code must be run after the table is added to the html, if you need to run it before, put the code inside a $(document).ready(function(){/*code */ });
Edit: Answer based on the comments
$(document).on('click', '.productTableRow', function(){
if(oldObject) {
$(oldObject).css('background-color', 'transparent');
}
var productId = $(this).attr('productId');
if(productId === productId){ // Always true
$(this).css('background-color','#128C7E');
}
oldObject = this;
});
First of all, id has to be specific to one element. Jquery is configured as this. Then you can use $(this).parent(‘tr’)
To get the parent row in the click event that can be to the entire class.
I arrived at my own answer,
$(document).on('click', '.groups-product-sidebar', (e)=>{
//Getting the clicked group attributes
var groupId = $(e.target).attr('groupId');
$('.groups-product-sidebar').parent().css('background-color','transparent');
$(e.target).parent().css('background-color','#128C7E');
});
I am trying to write a function using php and javascript to delete a row from sql database when a button is clicked in that row. This is my table, so once you click the button in a specific row, it would remove said row using the login_id, but I can't really find a way to get this done.
'<td>' . $row['login_id'] . '</td>' .
'<td>' . $row['first_name'] . '</td>' .
'<td>' . $row['last_name'] . '</td>' .
'<td>' . $row['email'] . '</td>' .
'<td>' . $row['password'] . '</td>' .
'<td>' . $row['is_banned'] . '</td>' .
'<td> <button type="button" name="deletebutton" onclick="deletefunction()">Delete</button> </td>' .
'<tr>';
this is what the table looks like
I want the second and third columns of my php table to be a hyperlink to a different page for each row. I need to pass 3 parameters to the hyperlink
1) The value from the first column - empID listed in the table below
2) The value from $weekStart - selected from a input type="date" at top of page
3) The value from $weekEnd - selected from a input type="date" at top of page
I am trying this syntax, but it is not passing in the parameters and I am getting a page not found error. How should this syntax be altered so that it passes all 3 params and navigates to the appropriate page?
Week Start:<input type="date" name="weekStart">
Week End:<input type="date" name="weekEnd">
<input type="submit" name="submit" value="View Employee Data">
<?php
if (isset($_POST['submit']))
{
$weekStart = $_POST['weekStart'];
$weekEnd = $_POST['weekEnd'];
//Generate Table Here
}
?>
foreach ($tsql as $res)
{
print "<tr>";
print "<td>" . $res->EmpID . "</td>";
print "<td>'.$Row['DailySales'].''" . $res->DailySales . "</td>";
print "<td>'.$Row['SalesForWeek'].''" . $res->SalesForWeek . "</td>";
print "</tr>";
}
You didn't append the string well. Please try the below code
foreach ($tsql as $res)
{
print "<tr>";
print "<td>" . $res->EmpID . "</td>";
print "<td><a href='DailySales.php?param1=".$weekStart."¶m2=".$weekEnd."¶m3=".$Row['EmpID']."'>".$Row['DailySales']."</a>" . $res->DailySales . "</td>";
print "<td><a href='WeeklySales.php?param1=".$weekStart."¶m2=".$weekEnd."¶m3=".$Row['EmpID']."'>".$Row['SalesForWeek']."</a>" . $res->SalesForWeek . "</td>";
print "</tr>";
}
If it still shows not found page, then please check the file names.
Update: I hope you need to replace some variables in your loop as updated in the below code
foreach ($tsql as $res)
{
print "<tr>";
print "<td>" . $res->EmpID . "</td>";
print "<td><a href='DailySales.php?param1=".$weekStart."¶m2=".$weekEnd."¶m3=".$res->EmpID."'>".$res->DailySales."</a></td>";
print "<td><a href='WeeklySales.php?param1=".$weekStart."¶m2=".$weekEnd."¶m3=".$res->EmpID."'>".$res->SalesForWeek."</a></td>";
print "</tr>";
}
Completely untested and I'm not 100% sure what the data in those links were supposed to be doing, but I think this should give you a solid starting point and you can tweak the HTML generation to get what you want.
I wouldn't bother trying to do it in PHP at all, pass the entire data set to JS and do it there.
Week Start:<input type="date" name="weekStart" id="weekStart">
Week End:<input type="date" name="weekEnd" id="weekEnd">
<input type="submit" name="submit" value="View Employee Data">
<?php
if (isset($_POST['submit']))
{
$weekStart = $_POST['weekStart'];
$weekEnd = $_POST['weekEnd'];
//Generate Table Here
}
// Create a JSON version of your data to pass to the script
$data = json_encode( $tsql );
?>
<!-- Create an empty table for your data-->
<table id="employee-table"></table>
<script>
$("#submitForm").on("click", function(e) {
// Stop the form from reloading the page
e.preventDefault();
// Set up your variables, you'll need to add ID's to the form inputs
var employees = <?php echo $data; ?>;
// See the employees data in your inspector console
console.log(employees);
var weekStart = $("#weekStart").val();
var weekEnd = $("#weekEnd").val();
// Generate the HTML for all the employees
var html = "";
for( var1=0; i<employees.length; i++ ) {
html += "<tr>";
html += "<td>" . employees[i].EmpID . "</td>";
html += "<td>" + employees[i].DailySales + "</td>";
html += "<td><a href='WeeklySales.php?param1='" + weekStart + "'¶m2='" + weekEnd + "'¶m3='" + employees[i].id +"'>" + employees[i].SalesForWeek + "</a></td>";
html += "</tr>";
}
// Insert the HTML that you generated into the table.
$("#employee-table").html(html);
});
</script>
I have a table which gets dynamically populated by the results of a search query:
echo '<table class="table">';
if ($num==0) echo "<tr><td>Sorry, no items found.</td></tr>";
else {
echo '<tr> <th>Nr.</th> <th>Name</th>';
echo '<th>Description</th> <th>Image</th>';
$lf = 1;
while ($dsatz = mysql_fetch_assoc($res))
{
echo '<tr>';
echo "<td>$lf</td>";
echo '<td>' . $dsatz["name"] . '</td>';
echo '<td>' . $dsatz["description"] . '</td>';
echo '<td><img src="' . $dsatz['image'] . '" style="height:100px; width:auto" /></td>';
echo '</tr>';
$lf = $lf + 1;
}
}
echo '</table>';
The result is a table of items. Now what I would like to do is give the user the possibility to hide any row by a single click or, if not possible, by checking boxes and hiting a second Hide(delete) button at the and of the table. The rows must not be deleted from the database only hidden from view.
Any ideas how I could do this?
Thx
Seb
///////////////////////////// EDIT ////////////////////////////////////////////
Thx for the Input!
Here is what worked for me:
In table:
echo "<td><input type='checkbox' name='hide_cand' style='float:right' id='hide_cand' onclick=' return hideRow(this)'/></td>";
script:
function hideRow(checkbox)
{
if(confirm('This action can not be undone, are you sure you want to delete this item from the list?'))
{
checkbox.parentNode.parentNode.style.display = "none";
return true;
}
return false;
}
Thx for your help!
Basically, you want something like this:
$('.table').on('click','tr',function(){
$(this).hide();
});
If you wish to add checkbox inside each row:
$('.table').on('change','tr :checkbox',function(){
$(this).closest('tr').hide(); //no need here to check for checkbox state
});
Think the far most easy would be :
$('.table tr').click(function() {
$(this).hide();
});
Try something like this
$("#tableID").delegate("td", "click", function() {
$(this).closest("tr").hide();
});
I've got a webpage that returns a dynamic number of rows from a mysql db, which is output to the webpage via table, of which the first column is a checkbox via the following code:
while($row = mysql_fetch_array($result))
{
$id = $row['circuit_id'];
echo "<tr>";
echo "<td align=\"center\"><input name=\"checkbox[]\" type=\"checkbox\" id=\"checkbox[]\" value=" . $row['circuit_id'] . "></td>";
if ($row['status_name'] == 'Disconnected') {
echo "<td><font color=\"red\">" . $row['status_name'] . "</font></td>";
} else {
echo "<td>" . $row['status_name'] . "</td>";
};
echo "<td>" . $row['circuit_name'] . "</td>";
echo "<td>" . $row['circuit_appID'] . "</td>";
echo "<td>" . $row['circuit_appID'] . "</td>";
echo "<td><img src=\"images/icons/application_edit.png \"></td>";
echo "<td><img src=\"images/icons/note_add.png \"></td>";
echo "</tr>";
}
echo "</table>";
below this data presentation, I've added a few HTML buttons (one of which is shown below) that will allow the user to do 'mass' updates on the shown data, in this particular case to change the status from one state to another via the checkbox selection.
echo "<table align=\"center\">";
echo "<tr>";
echo "<td>Set status to Migrated for selected records</td><td><img src=\"images/icons/application_edit.png \"></td>";
echo "</tr>";
echo "</table>";
Is there a way to get the list of checkboxes that have been selected without changing everything to forms, and using a simple html based button to submit the request to the server?
I've been looking for an online solution for something like this via javascript but haven't managed to find anything that matches what I need.
Thanks
I've tried to piece together a few bits and pieces to get where I need to be, but am not making much progress at all, here's the current code:
var obj = {}
$('#click').on('click', function() {
$('input[type="checkbox"]').each(function() {
var name = $(this).attr('id');
obj[name] = $(this).is(':checked') ? 1 : 0;
});
$.each(obj, function(key, value) {
alert(key + ' : ' + value);
});
console.log(obj);
});​
how do I get the list of 'true' ie. ticked boxes into a string and update the button with a 'new' url?
Any help is appreciated...
jQuery has the option to select all checkboxes and submit them in the background via AJAX..
jQuery Selectors: http://api.jquery.com/category/selectors/
jQuery AJAX: http://api.jquery.com/jQuery.ajax/
Good luck and hope this helps you!