how to send table value to printer? - javascript

I want to send table values to printer.That table contails more than 50 records.so there is scrollbar or pagination on that table.Below the printer there print button, if click the button those all values should go to printer.
function print(){
window.print();
window.opener.document.location = window.opener.document.location.href;
window.close();
}
I used to code for print value.but it shows only the page, not in all table values .I ma using jsp,javascript.
I am looking for directdownload without css and open popup window, i need to do this work.
Any idea????

I'm assuming that you want to print the entire table of values. In that case, I would have a separate method (action) or different parameters/values to return the entire table unpaginated -- perhaps on it's own without the rest of the surrounding page if all you want printed is the table. Use this method (action/parameters) as the url for a new window that you pop up. The action should also return some javascript on the page that, once the load event occurs, prints the page.
function print()
{
window.open( '/foo?page=all&print=true', '_blank', '', false );
}
Then on the new page:
$(function()) {
window.print();
});

If you always want to print the whole table but nothing arround I would recommend to use a CSS print stylesheet. In this CSS file you can hide all elements except of the table. The user can than also use the print function of his browser (or CTRL + P). If you just want to print only the table when a user clicks the button, just add that CSS file on the click, fire the window.print() function and afterwards remove the CSS.

Related

Have a pop up window with checked box list when click on an icon

I have a table in my page, for which I get the data from database. In some cells I have an edit icon.I want when users clicks on it, they see a pop up window.
In the pop up window, I want to show three option(check boxes), that user can select only one of them, and then click on OK button, and return the value of the selected option to the data variable.(as you see in the code below)
I have to mention, that right now when the user clicks on the edit icon, some information are sent to another file. Because I need to update database.
$(".SSO").click(function () {
var id = $(this).attr("data-id");
var data= HERE I NEED TO GET THE VALUE OF THE SELECTED OPTION IN THE POP UP WINDOW
}
So SSO is the value of class attribute for the image icon. data-id value helps to update the correct record in the database.
Right now this is the code in one file:
$(".SSO").click(function()
{
var id = $(this).attr("data-id");
// open popup window and pass field id
window.open('sku.php?id=' + encodeURIComponent(id),
'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}
and this is the code in sku.php
<script type="text/javascript">
function sendValue (s){
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, s);
window.close();
window.close();
}
</script>
<form name="selectform">
<input type=button value="OK" onClick="sendValue(document.querySelector('.messageCheckbox:checked').value);"
</form>
Mu form right now has only OK button, when when I click on teh edit button, nothing happens. Should not I see a pop up window, with OK button inside it?
Typically a popup windows is shown with alert() or something similar, which causes the browser to make an actual popup window. That kind of popup window cannot have HTML elements added to it. You could do something like this http://www.codeproject.com/Tips/170049/Pure-HTML-CSS-Modal-Dialog-Box-no-JavaScript
I used those in a website and I liked them a lot, but I am not a fan of the css :target selector, so I opened it with Javascript instead, but it is pretty much the same thing.

jquery send input field values to popup pages

I have a form with a table that displays data from a mysql table,it has one field that requires user input. each row also contains a div. The form then has two functions.
the first function is to display information from an external PHP page which processes the values on the input fields in each row and sends the result to the row div in the form of an result
The first function works perfectly and here is the script:
<script type="text/javascript">
function get(row){ //row being processed, defined in onchange="get(x)"
$.post ('getpeopleinjobs.php',{ //data posted to external page
postvarposition: form["position"+row].value, //variable equal to input box, sent to external page
postvarjob: form["job"+row].value, //variable equal to input box, sent to external page
postvarperson: form["person"+row].value, //variable equal to drop down list, sent to external page
postrow: row}, //variable equal row being processed, sent to external page
function(output){
$('#training'+row).html(output).show(); //display external results in row div
});
}
</script>
The second function I require help with. I need to almost repeat the same javascript function again. however instead of sending the row variables to an external page, I want to send them to a popup page. This function should be triggered when I click the in the div.
I have the below javascript for the popup.
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open( url,'popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
What I want to do is send the variables to the popup page, the same variables that were sent to the external page.
so what I am aiming for is something like this:
<script type="text/javascript">
// Popup window code
function newPopup(url) {
function get(row){ //row being processed, defined in onchange="get(x)"
$.post ('trainingneeded.php',{ //my popup page
postvarposition: form["position"+row].value, //these variables must be posted to the popup page
postvarjob: form["job"+row].value, //these variables must be posted to the popup page
postvarperson: form["person"+row].value, //these variables must be posted to the popup page
postrow: row}, //these variables must be posted to the popup page
);
}
popupWindow = window.open( //open popup with the above variables posted to it
url,'popUpWindow','height=400,width=1000,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
</script>
How can I get the above to work? is using an href the best idea or can the div have an onclick event.
Thanks for the assistance in advance.
No, it's not possible to post to a popup window. You can include those variables in the url and to it as a get.
Or you can add target="_blank' to the form, and let it open a new window that way.
It won't be a popup window, but these days browsers mostly block those, or open them in tabs anyway, so it may not matter.
One other option is to open the popup with blank, and then use javascript to simply write() the page contents to it.
See also: asp.net/jQuery: post data with jQuery to a popup [IE]

Parent Jsp page refresh when click on popupwindow alert box

I am working on jsp's, I have two jsp one in configDb.jsp, in that I have written code to retrieve the values from database and display it. In this whereas I have option like newconnection.. its a popup window. When I click on that it opens popupwindow and taken the values and store them in a database, but in my parent page I am not able to display those values. After I click on the ok button in popup window, I have to refresh the parent page, then I am able to see the values which I have created few seconds back by the new connection page. Could anyone please help me out?
You can include this in your HTML for the popup window.
<script type="text/javascript">
function proceed(){
opener.location.reload(true);
self.close();
}
</script>
<form onsubmit="proceed()">
...
</form>
Actually you can obtain the answer by googling "javascript refresh parent page from popup" and you will see stackoverflow's answer :)
A better alternative without the need of refreshing the parent page can be achieved by adding a submit button listener and perform a DOM action to insert the new element with new content. This can be easily done by Javascript.

On Click: Open a Pop-up Div on a Different Page

On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/

how to stop reloading parent window while child window gets open

I have a form submit, where it get the values from the form and goes
to next page... here I have a hyperlink to open a child window, while
I click, it opens the child window and simultaneously it reloads the
parent window. I have a action configured to the parent window which
has a Database insert statement too.
The problem is that while I click the link it call my action
again(because of page reload), in this action I wrote if condition to
check null/empty string from the previous page form submit. since this
is the second time the action loads it looks of the fields(but
actually those fields are in my previous page form). so it take null
while checking my if condition.
Another problem is that when I solve the above problem here comes the
SQL insert statement, which is about to execute 2nd time. I dont want
this to happen or I dont want my action to execute while I open the
popup window and I want to populate the selected value from the popup
to the parent window.
code used for opening the popup
function select_reactant()
{
window.open ("SeriesTab.action?component=reactant",
"mywindow","scrollbars=1,resizable=1,width=1000,height=1000");
};
This is the place where I open the popup and want to populate the value selected from the popup to the textfiled here
<tr>
<td>reactant</td>
<td><s:textfield name="reactant" id="reactantId" readonly="true" theme="simple"/></td>
</tr>
jquery to get back the value form popup to parent window
$(window.opener.document).find('#reactantId').val(rxn);
the code inside action below is what the action that I mention at the beginning
if(Rxn!=null||!Rxn.equals("")) //Rxn is the field variable for previous page
{
//my insert statement
}
while I run I get nullpointer error since the value for Rxn is reset to null by the page reload due to popup opening done by
window.open
You can do something like this
HTML
reactant
jQuery
$(function(){
$("#anchSelectReactant").click(function(){
select_reactant();
return false;
});
});

Categories

Resources