How to print a html table in a separate window - javascript

I want to print a HTML table using some PHP data, in a separate window when I press a button. What is the best way to do it?
<table border="1">
<tr>
<td>MODEL</td>
<td><?php echo $modelNo ?></td>
<td>MODEL</td>
<td><?php echo $modelNo ?></td>
</tr>
<tr>
<td>QTY</td>
<td><?php echo $box ?></td>
<td>QTY</td>
<td><?php echo $box ?></td>
</tr>
</table>

Have the button open the new window, and set its location to the PHP file that prints the table.
Something as simple as this could work:
Click
(You can optionally style this link to look like a button)

You will need to have this table returnable from a PHP script, or available somewhere (I assume you already do).
Here is a purely html method:
Open Table!
Here is a javascript method:
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://path.to.my.page.com/mypage.php" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="Open table!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>

You can also have the html in a hidden input and use a form submit to the other page and retrieve it from there with $_POST like assuming $table_data is your html:
<form action="new_window.php">
<input type="hidden" value="$table_data" name="data">
<input type="submit" value="Open Table">
</form>
Then in new_window.php:
if(isset($_POST['data'])){
echo $_POST['data'];
}

You can also create the entire solution in javascript by creating a new window and by writing the content in the window.
see the basic approach writing in a new window here:
http://www.w3schools.com/jsref/met_win_open.asp
and
Print the contents of a DIV
You would have to add an id attribute to your table
Then playing with DOM functions such as :
https://developer.mozilla.org/en-US/docs/DOM/document.getElementById
and
https://developer.mozilla.org/en/docs/DOM/element.innerHTML
You will have to wrap your table into a html. The main advantage of this method is that it can be called later on any table without the need to add a line of php.

Related

How do i pass php variable inside a row cell to a $_SESSION variable

echo "<form method='post'>
<tr id='myrow'>
<td>$id</td>
<td>$subject</td>
<td>$department</td>
<td>$categoryview</td>
<td>$status</td>
<td><input type='submit' name='assign' value='Assign me'></td>
</tr>
</form>";
if(isset($_POST["assign"])){
echo "<script type='text/javascript'>
var Row = document.getElementById('myrow');
var Cells = Row.getElementByTagName('td');
</script>";
}
I echo a table inside a form which loops it's rows taking mysql database values passing it to the shown php variables. What i want is that when user clicks on the button (Assign me) the value of $id will be passed to a $_SESSION variable so i will use that variable in another webpage. What do i need to edit in my code to achieve that?
Just add an action with the php page url you want to redirect to, so for exemple <form method='post' action='http://localhost/test-site/next.php'>
You have to use actual input in your table cell if you want the form to natively send the data, so for exemple : <td><input name="id" value="<?php echo($id); ?>"/></td>
Next on localhost/test-site/next.php you can access the data in your php with $theId = $_POST["id"]; and keep it in session with $_SESSION["id"] = $theId;

How to access a parent window two levels up using javascript or Jquery?

I have a popup with a text editor wrapped by a template. The info I need to insert into that textbox is in the editor window, and I need to append a textfield to the parent window, not to the wrapper, when a button is pressed on the editor. If I use window.parent the textbox gets appended to the wrapper, not the window outside. I tried window.parent.parent, or window.parent.window.parent and didn't work. How can I accomplish this?
EDIT: I didn't posted the code cause it wasn't relevant, the question was just how to append something two parent windows up......But here's the code
JQUERY
$textInput=$('<textarea></textarea>');
$textInput.text(bodyHtml);
parentWindow.$('form').append($textInput);
HTML of the popup window
<div class="right_content">
<form method="post">
<textarea id="plantillaEditor">
<?php echo $html_plantilla; ?>
</textarea>
</form>
</div>
HTML of the parent window(the relevant part)
<div class="right_content">
<div class="form_abm">
<?php if ($estado != OohListasEstado::PENDIENTE): ?>
<form class="form-horizontal" action="<?php echo url_for('/consultasactuacionpreju/' .
(!$form->getObject()->isNew() ? 'editar/id/' . $sf_request->getParameter('id') . '/consid/' . $form->getObject()->getIdConsulta() : 'crear/consid/' . $sf_request->getParameter('consid'))) ?>"
method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>>
<?php else: ?>
<form class="form-horizontal" action="<?php echo url_for('consultasactuacionpreju/aceptarPase?consid='.$sf_request->getParameter('consid')); ?>"
method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>>
<?php endif; ?>
window.parent is for iframes. If your "popup" is an iframe, that should work (assuming you're not running into CORS issues.) If your "popup" is a new window, you want window.opener. If it's just another div with some CSS to make it overlay the rest of the window, you'll want normal DOM traversal methods.

Edit table row with button

I have a button that appears when you hover over a certain row of a table. How would I edit that specific row with a button when I click on the button? Currently I'm making the buttons appear and disappear with css:
button.editBtn{ visibility: hidden;}
tr:hover button.editBtn { visibility: visible;}
My html code for the table is:
<div class="well">
<h2>Grocery List</h2>
<table class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<?php
$item_array;
$index = 0;
$index_2 = 1;
$r = "r";
$b="b";
foreach ($item_array as $id_array){ ?>
<tr id="r<?php echo $r.$index_2; ?>">
<td><?php echo $item_array[$index] ?></td>
<td> <?php echo $quantity_array[$index] ?></td>
<td>
<form method='POST' action='edit.php'>
<?php echo $price_array[$index];?>
<div id="editButtons">
<button type="button" id="e<?php echo $r.$index_2; ?>" style="align-content:right;" class="editBtn btn btn-sm btn-warning"><span class="glyphicon glyphicon-edit"></span></button>
<button type="button" id="d<?php echo $r.$index_2; ?>" style="align-content:right;" class="editBtn btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></button>
<button type="button" id="s<?php echo $r.$index_2; ?>" style="align-content:right;" class="editBtn btn btn-sm btn-success"><span class="glyphicon glyphicon-circle-arrow-right"></span></button>
</div>
</form>
</td><?php
$index++;
$index_2++;
echo "</tr>";
} ?>
</table>
</div>
</div>
Well, you will have work a little... As jQuery is on your question's tags, I will assume that you're using it.
Put a different event for each button, as the buttons will do different actions.
In the Javascript event of the delete button, I would hide the line fading it out, then calling a PHP script through AJAX to remove the database register and removing the HTML (calling jQuery remove method) after the AJAX successful return (of course, ask to user for confirmation before doing all of this).
To get the edit button working, I see two good options:
Put a form with the fields in the table and fill them with the correct values and let them with display: none, all by PHP.
or
Create the form and the fields and populate them, all by Javascript, on the click of the edit button.
Personally, I prefer the first option, but if you will have a REALLY BIG table, maybe is a good idea to create the form and the fields dynamically to reduce the HTML size.
Anyway, in the click of the edit button, you will need to show the columns of the edit fields (that currently don't exists in your code), hide the buttons and show another: the confirmation button.
I think you could also use disabled edit fields to display the data, manipulating it to appear a normal text, and then removing the design manipulation and the disabled attribute at the edit button click, but I never used this approach, so I'm not sure if that will work or if there are glitches in any browser.
Got it?

Common popup form, generated table

My Web page generates a table that shows the results of a search. I want the user to be able to click on one of the results, have a pop up window which allows them to enter a message and have it stored on a database. Then the user clicks the send message button, the popup will then close and let the user continue the search results.
Here is the current code I have.
<h1>
<center>
<u>Casting Call Results</u>
</center>
</h1>
<table border="1"; width="600px"; align="center">
<?php if(empty($results)) {echo "No Data returned";} ?>
<?php foreach($results as $member):?>
<?php $imgloc = "members/".$member['username']."/".$member['photolink'];?>
<tr align="center">
<td width="100px"> <img style="width:100px; height:125px" src="<?php echo $imgloc;?>"></td>
<td><?php echo $member['bio'];?></td>
</tr>
<tr align="center">
<td><?php echo $member['username']?></td>
<td><?php echo $member['email']?></td>
</tr>
<?php endforeach; ?>
</table></div>
<form action="castingcall.php">
<center><input type="submit" value="Search Again"></center>
</form>
Here's the search return. I tried to insert the image but I don't have ten reputation points so here's a link to the search return so you can see what I'm talking about.
http://www.chicagofilmclub.org/screenshot.jpg
As you can see the table is generated by a for each so I am really confused as to how I can have each user an active link that calls the same page in a popup but can still $PASS the proper user name.
Each person would have a link that would look something like this:
Contact Member
I am assuming you will give each memebr an ID in your database.
Then on the contactform.php page you would use something like this:
<?php
$memberId = $_GET['member'];
//lookup memeber in database and do whatever it is you want to do with that info
?>

Pop up menu to show detail view of contact in contact manager

I have queried data from DB depending on user input and viewed that on a table.
There is a column in my table, it will include id of each row as a link.
When I click that link it should show a pop up menu with full details of that particular row contact.
I want to pass that id to new pop and query full details from DB and show that in the pop up. Please help me with this.
Following is my current table population depend on queried data:
<tr valign="middle">
<td><?php echo $row["last_name"];?></td>
<td><?php echo $row["calling_name"]; ?></td>
<td><?php echo $row["designation"]; ?></td>
<td><?php echo $row["agm_branch"]; ?></td>
<td><?php echo $row["dgm_branch"]; ?></td>
<td><?php echo $row["office"]; ?></td>
<td><input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="showpopup()"></td>
</tr>
Now I need to write appropriate code in this java script
function:
function showpopup() {
//get passed variable if any (id)
//include database config details
//query data base depend on passed id
//show the results on form or table
//close button
}
I'm a bit rusty on Javascript/Jquery but here's some changes i would make
Put the id as a argument to your JS function
function showpopup(id){
...//your code here
}
This means that you also need to echo in the call of the function
onClick="showpopup(<?php echo $row["id"];?>)">
You said you want to query more details. If you haven't got the details on this page ready to go then you can use an ajax call to a php script that can get the details and return the data.
Some reading:
jQuery ajax calls
JSON syntax

Categories

Resources