Currently I'm printing the whole page with print icon using following code:
<a href="javascript:window.print()">
<img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" />
</a>
I am reading a list of objects in JSP and displaying the object details using <c:foreach>.
I want to display a print icon beside details of each object and print(to external printer) that individual object details only, when clicked on it. The whole page is in single div.
I'm not sure whether this can be done or not. Can I control the each loop using some sort of ID?
Edit:
Example:
<c:forEach var="case" items="${distributions}">
<table>
<tr>
Print case details
</tr>
</table>
</c:foreach>
If I have 10 distributions, I get 10 tables so want a print icon beside each table and when clicked on it, print that individual table only.
I have not done the following but theoretically it should work:
1) define a print stylesheet, with:
body.detail-print .detail-item{display:none}
body.detail-print .detail-item.current{display:block}
2) define an event listener, e.g. with jQuery
$(".detail-item .print").click(function(e) {
$("body").addClass("detail-print");
$(this).closest(".detail-print").addClass("current");
window.print();
});
This should only print what is visible in your print stylesheet.
The only problem I see here: If someone wants to print the whole page afterwards, the browser will only print the last selected item. You could use a setTimeout to reset the classes. I have no better idea for now...
In your block you could put the data in a td then use the method described in this post to print the contents of that td.
<script type="text/javascript">
$(function(){
$(".printable").each(function(){
var $td = $(this);
var $printIconTD = $('<td><img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" /></td>');
$td.parent().append($printIconTD);
$printIconTD.click(function(){
Popup($td.html());
});
});
});
</script>
....
<c:forEach var="case" items="${distributions}">
<table>
<tr>
<td class="printable">Print case details</td>
</tr>
</table>
Only problem with this solution is god and everyone has pop-ups disabled, so you will have to put a notice of sorts on the page letting users know
A different way to what has been suggested would be to reload the page showing only the selected object and then call the printer dialog (e.g. on document load). So the printer icons next to the objects could link to the same page and pass it a parameter that you'll be printing and the ID of the object that you want to print.
Related
I'm trying to access links to attachments for a web automation project. The problem is that when I load the web-page via Chrome and inspect element, I can see HTML Code (divs and tables) but when I use the view source option, all I see is JavaScript functions.
Now when I try to access an element via selenium(which has access to source, the JavaScript Code) I can't find any element there. I cannot explicitly find the mention of iFrames, but I think the iFrames that contain this information are being loaded by the JavaScript Code. Is there a way to get access to the underlying HTML to find the elements and get access to the links?
NOTE : When I try to view the page source which is a collection of JavaScript functions, there are no links to a frame which can be followed to get the required HTML.
For context :
The inspect element looks like :
<div id="SectionAttachments">
<table summary="" border="0" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td></td>
<td><img class="attachmentsIcon" src="images/modern_graphite/attachment_url.png" alt="Linked Resource" title="Linked Resource"></td>
<td class="attachmentTitle">
Customer View
</td>
<td>by</td>
<td class="attachmentAuthor contact_popover" ivalue="99832"></td>
<td class="attachmentDate"><span class="dateSpacer">-</span>10/25/2016 04:21:13 AM</td>
<td width="16">
<img align="middle" src="images/modern_graphite/edit.gif" alt="Edit this Attachment" title="Edit this Attachment" border="0">
</td>
<td width="16">
<script type="text/javascript">
if(this.eMail)
{
document.write( "<a href=javascript:eMail('85',99832,document.forms[0].F99832,7705574) style={13}><img src='images/modern_graphite/email.gif' border='0' align='top' alt='Send E-mail' title='Send E-mail'></a>");
}
else if(parent&&parent.eMail)
{
document.write( "<a href=javascript:parent.eMail('85',99832,document.forms[0].F99832,7705574) style={13}><img src='images/modern_graphite/email.gif' border='0' valign='bottom' alt='Send E-mail' title='Send E-mail'></a>");
}
</script><img src="images/modern_graphite/email.gif" border="0" align="top" alt="Send E-mail" title="Send E-mail">
</td>
</tr>
</tbody>
</table>
</div>
I want to extract the link at "LINK GOES HERE"
The Page source has no div with ID = "section attachments" or any other elements inside the div. (I searched with corresponding IDs, class names etc, no success)
What I have tried :
I tried to search the page source from the browser, no results.
My selenium code tries to search for these elements using XPath, it
returns no element found.
XPath expression :
driver.get_element_by_xpath("//td[#class = 'attachmentTitle']/a/#href")
I have tried putting my script to sleep in case the page isn't fully loaded, no effect.
Is there a way to get these links via selenium? Any help will be highly appreciated.
EDIT :
The problem was resolved by modifying the URL a bit to load a page that renders similarly but has iFrame tags that I can switch to and then find the elements using the same Xpath and get the links.
This page was being loaded after a few redirects from another page. A slight string modification of the URL (using replace in Python) solved the problem. Thanks to all who tried to help.
get element by -
ele = driver.get_element_by_xpath("//td[#class = 'attachmentTitle']/a")
then retrieve element attribute using -
ele.get_attribute('href')
Looks like there are few things that you may be mixing together:
When you view the page source in the browser, you're shown the html as it was sent from the server. This html can contain JavaScript that creates elements dynamically, but in the html itself you'd see only the JavaScript code that creates them.
The DOM which is what you see when you inspect element, is the current structure of the page. Initially it's pretty much the same as the html, but may include elements that were created or changed dynamically using JavaScript after the page was loaded from the server. This is also what Selenium interacts with.
(Not sure if you mentioned it, but for the sake of completeness) driver.page_source returns a string which represents that DOM (current state), but as a valid html format.
An html page can contain nested pages using the iframe tag. Each (parent or nested) page had its own html source and its own DOM. In Selenium you have to explicitly switch between them using the driver.switch_to method. Note that on the browser's dev tools though (ie, inspect element), the DOMs of all pages appear combined as one.
I am trying to display a page's ID within itself i.e. within the content of the page the page ID is displayed.
Q/A within the community recommend using **$content.getIdAsString()** but that has not worked. I've tried to input this within an HTML macro and without one as well but to no avail.
I'm trying to get the ID of the page so that an HTML code block could reference the page it is included on instead of inputting the page ID by hand every single time.
Here is the code that I am currently using:
<input type="image" src="/download/attachments/171705685/BackPurple.jpg"
onclick="location.href=document.referrer; return false;">
<input type="image" src="/download/attachments/171705685/DownloadPurple.jpg"
onclick="location.href='/spaces/flyingpdf/pdfpageexport.action?pageId=171706153';"> <-- This pageID
I want this highlighted pageID is what I am hoping can be pulled in automatically
Looking forward to your responses.
I use this to get the Page ID of a page do my users to have to go looking for it.
<tr>
<td>UNDERLYING PAGE ID:</td>
<td> $content.getId() </td>
</tr>
I need to extract the ID from ms-unselectedtitle which is a child element of ms-vb-title in a SharePoint 2007 list. This would then be concatenated with a url to open a new window. The window needs to open with the window.open() method so i can control the size and turn off menus. Creating a link in the list by calculated column won't work as it just opens a new window in a tab with all menus. I found code here ("How to get ID value from tables nested in other tables with jQuery") that is close but it returns an array of ID's, not by table row. I'm new to javascript/jquery so I'm a bit stuck. Note that the ID I'm using is embedded in the "Title" field of the list. Html section is here...
<TD class=ms-vb-title height="100%" sizset="50" sizcache011076027996994381="6">
<TABLE onmouseover=OnItem(this) id=284 class=ms-unselectedtitle height="100%"
cellSpacing=0 Type="" SUrl="" UIS="1024"
CId="0x010010381707B6E7FC45825D794C02F54155" CType="Item" MS="0" CSrc="" HCD=""
COUId="" OType="0" Icon="icgen.gif||" Ext="" Perm="0x400001f07ee71bef"
DRef="sites/site1/M/S/Lists/MAINT_ACTIONS" Url="/sites/site1/M/S/Lists
/MAINT_ACTIONS/284_.000" CTXName="ctx1" sizset="50" sizcache011076027996994381="6">
<TBODY beenthere="1">
<TR>
<TD class=ms-vb width="100%"><A onclick="GoToLink(this);return false;"
onfocus=OnLink(this) href="/sites/site1/M/S/Lists/MAINT_ACTIONS
/DispForm.aspx?ID=284" target=_self>Item <IMG class=ms-hidden border=0
alt="Use SHIFT+ENTER to open the menu (new window)." src="/_layouts/images
/blank.gif" width=1 height=1></A></TD>
<TD><IMG style="VISIBILITY: hidden" alt=Edit src="/_layouts/images
/menudark.gif" width=13></TD>
</TR>
</TBODY>
</TABLE>
</TD>
The code that is close is below...
// filter out all tables with immediate parent td.ms-vb-title
// returns a collection
var ids = $('.ms-unselectedtitle').filter(function() {
return $(this).parent('td').hasClass('.ms-vb-title');
// from resulting collection, grab all IDs
}).map(function() {
return this.id;
// convert to array
}).get();
Could someone help me here? Note that I'm trying to access the ID from a clickable link in the row.
I was able to resolve this by creating three columns in the SharePoint list with a final one to put them together.
getWin1 held ...onClick='javascript:window.open("... the first part of the
script and was made default text for this single line text column.
getWin2 held ...","_blank","toolbar=0,menubar=0,top=50,left=50,width=1024,
height=800,scrollbars=0,resizable=0,location=0");return false;'... the
second single line text column.
getUrl concatenated the url to the ID from the list.
=CONCATENATE("<span><input ",getWin1,getUrl,getWin2," type='image'
src='https://sof.socom.mil/sites/SORDAC/M/SharePoint_System_Files/Icons
/Magnification_16.png'/></span>")... was put into the last column to
combine the three columns.
I have Text to HTML CEWP to convert it to HTML script. Not the optimal solution but it works. Note that the ... just marks the start and end of the script.
I know that the browsers don't support fake clicking. I know I can go back and just start refactoring out all of the obtrusive javascript... but that won't happen. With that being said...
Heres the thing.
I have a bunch of links that represent preferences. EX: (this is rendered content. The actual jsp that creates this below is not fun to look at.)
<table id="snTabsAvail" class="content" cellspacing="5" cellpadding="1" border="0" align="center">
<tbody>
<tr>
<td id="Serial Number_Engine Test_0" class="tbutton" width="95px" nowrap="" height="55px" style="background-color:lime">
<a href="javascript:tabToggle('Serial Number', 'Engine Test', spref, 0, tabPicked, tabAvailable, 'Failed to update your tab preference, please try again later'); ">
</td>
<td id="Serial Number_Machine Test_1" class="tbutton" width="95px" nowrap="" height="55px" style="background-color:lime">
<a href="javascript:tabToggle('Serial Number', 'Machine Test', spref, 1, tabPicked, tabAvailable, 'Failed to update your tab preference, please try again later'); ">
</td>
...
These calls represent Ajax calls, which set preferences on the server. I want to include a select all and a deselect all so I dont have to go and click all of them individually. I know I cant do this
$('#snTabsAvail td[style=background-color:silver] a').click();
Due to the fake clicking issue.
Since these are clicks represent javascript ajax calls, I'm trying to figure out how to click the ones I want for select, unselect. the cells that the links are in represent 'tabs' and you can tell which ones are selected by their background color... which is why I said, anything cells in this table with the unselected background color, get the anchors, and click, which doesn't work.
Any thoughts on how to get all the anchors here and fake click them? Yes.. I mean programmaticlly.
You can use eval() on the href attribute of each link (not sure if have to remove the "javascript:" part), like this:
eval($('#snTabsAvail a').attr('href').substring(11));
Edit: of course this is for a single link, you have to iterate over the elements returned by $('#snTabsAvail a') for the complete solution.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Custom alert using Javascript
I want to create a confirmation message-"Do you want to proceed deleting? [Yes] or [No]".
I have a table with many data rows where the delete link is clicked in a particular row, the data in the row is deleted in the database. When the user clicks the delete option, i want to show the confirmation message first, so that user can validate his actions before deleting.
How can i do that dynamically using java script and css? I don't want to use alerBox() as it is ugly and is so unprofessional.
I am currently working for my school project-jsp and Java Servlet.
Hope any experts will help me. I love this forum as people here are very helpful. Advance thanks!
Actually you could do
window.alert = function(text) { /* some code to show a fancy dialog */};
window.confirm = function(question) { /* some code to show a fancy dialog and return the result */}
Problem is you're messing around where ought not mess around but the advantage is that even in 3rd party code any alerts() or confirms() will come up as your custom dialogs and the code will be simple to read (instead of $.dialog({options}) you just use a normal alert() or confirm call)
Because of the way JavaScript event handling works, there cannot exist any "drop-in" replacement for confirm, but popular JavaScript libraries such as jQuery UI include "modal dialog" features that can be used to achieve a similar effect.
http://www.jensbits.com/2009/08/10/modal-confirmation-dialog-on-form-submit-javascript-jquery-ui-and-thickbox-varieties/ is an example of how this works. Your "delete" button would not be set up to submit the form but rather open the modal dialog, which would submit the form if the user clicks OK.
If you want really to look good try this approach:Use for example jQuery and jQueryUI.
In your page put this:
<head>
<link rel="stylesheet" type="text/css" media="all" href="pathtoyourappfolder/jquery/css/black-tie/jquery-ui-1.8.4.custom.css" />
<script type="text/javascript" src="pathtoyourappfolder/jquery/js/jquery-1.4.2.min.js'" ></script>
<script type="text/javascript" src="pathtoyourappfolder/jquery/js/jquery-ui-1.8.4.custom.min.js'" ></script>
</head>
<body>
<div id="dialog-confirm" title="DELETE">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
Are you sure you want to delete this record?</p>
</div>
<table id="TblName">
<tr>
<td class="actions">
del
</td>
<td>...</td>
</tr>
<tr>
<td class="actions">
del
</td>
<td></td>
</tr>
</table>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#TblName td.actions a.del').click(function(event){
$("#dialog-confirm").dialog('open');
});
}
</script>
</body>
You can add onclick="deleteRow(row_id, this)" to each delete link. Usage of row_id assumes the table is being generated dynamically from a given set and you have an identifier to provide and pick the data to delete. The this is useful to remove the <tr> using Javascript.
Oh and of course the function would make a dialog popup. Use jQuery for that.
You can try FaceBox and FacyBox
http://chriswanstrath.com/facebox/
http://www.bitbonsai.com/facybox/
You can rewrite the functionality. I am intending you wanna know what's happening and how to achieve effects, instead of using a library like jQuery. jQuery and derived solutions can make your life easier, but if you want to know HOW to make it, continue reading.
First, you should make your own "alertBox", with your preferred CSS styling (including it's position) [I suggest position absolute, z-index:2], then in the CSS let its display property as hidden.
OK, now when user clicks your delete link/button you trigger a native javascript confirm dialog. Replace this confirm call, to a function that will display your own styled menu. changing its CSS display property from hidden to "block".
On your own styled menu buttons Yes/No, attach events, one for each button, with respective action (hide menu, or deleting row, removing current line from table...).
Well, that's the idea. Hope you enjoy.