I am trying to export html table using js provided by Ngiriraj Table Export Demo. My table is paginated by bootstrap-table.js .
When I am exporting data in any format only 1 table page is getting exported.
Also, while exporting pdf, I am only getting only 4 columns in pdf.
The code is attached below.
Jsp page:
<div style="padding: 10px;">
<br>
<table id="table" data-search="true" data-show-columns="true"
data-pagination="true">
<thead>
<tr>
<c:forEach items="${keys}" var="keys">
<th data-field="${keys}" data-sortable="true">${keys}</th>
</c:forEach>
</tr>
</thead>
</table>
<nav class="navbar navbar-default export">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Download grid data as</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#"
onClick="$('#table').tableExport({type:'excel',escape:'false'});">XLS</a></li>
<li><a href="#"
onClick="$('#table').tableExport({type:'csv',escape:'false'});">CSV</a></li>
<li><a href="#"
onClick="$('#table').tableExport({type:'pdf',escape:'false'});">PDF</a></li>
<li><a href="#"
onClick="$('#table').tableExport({type:'json',escape:'false'});">JSON</a></li>
</ul>
</div>
</nav>
</div>
I have included .js files as:
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script
src="${pageContext.request.contextPath}/static/js/tableExport.js"></script>
<script
src="${pageContext.request.contextPath}/static/js/jquery.base64.js"></script>
<script src="${pageContext.request.contextPath}/static/js/base64.js"></script>
<script src="${pageContext.request.contextPath}/static/js/sprintf.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jspdf.js"></script>
For all above .js files please refer Ngiriraj Table Export demo.
Thanks in advance.
Related
I am trying to expand the option "Applications":
And this is its html:
What I have done until now:
// Wait until presence of navigation frame
element = wait.until(ExpectedConditions.presenceOfElementLocated(By.xpath("/html/frameset/frameset/frame[1]")));
// switch to navigation frame
driver.switchTo().frame(driver.findElement(By.name("navigation")));
// Wait until presence of Aplications option
element = wait.until(ExpectedConditions.presenceOfElementLocated(By.xpath("/html/body/div/div/table/tbody/tr[2]/td/div[5]/a")));
// Click to expand Aplicactions options
element.click();
When it step into click I can see it is positioned over the option of Aplications because it is showing the tooltip / title "Aplications" like if we put the mouse over the option and the href of this option downside left javascript:expandCollapse('2');
I know the code is running until here because the other piece of code for login is working.
What I am not sure is the switch to frame because I have looked up for frameset and it shows that we can switch directly to the frame.
I am new, I apologize if this is messy. If something is missing to find the error, tell me to edit the post.
Thanks in advance.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="" rel="styleSheet" type="text/css">
<title></title>
</head>
<frameset name="ISCmain" rows="35,*" frameborder="1" border="1" resize="yes">
<frame title="Header mark message" src="" name="header"
noresize="" scrolling="no" marginwidth="0" marginheight="0">
<frameset cols="25%,*" resize="yes">
<frame title="Navigation mark" src="" name="navigation"
style="border-right: 1px solid #d7d7d7;" resize="yes" marginwidth="10" marginheight="10">
<html>
<head>
</head>
<body style="direction:ltr" marginwidth="10" marginheight="10" onload="initAll();" class="navtree"
leftmargin="0" topmargin="0">
<div style="direction:ltr">
<link href="" rel="styleSheet" type="text/css">
<script language="javascript">
</script>
<div class="navBody" style="background-color:#FFFFFF;">
<table height="26" width="100%" cellspacing="0" cellpadding="0"
style="background-color:#FFFFFF;">
<tbody>
<tr height="26" style="border-left: 1px solid #3970B1;background-color:#FFFFFF">
<td class="wpsGpFilter" valign="center" align="left" width="100%"
style="background-image:url(/ibm/console/images/isclite/grpfilter_background.gif);background-repeat: repeat-x;">
<select name="navFilterSelection" id="navFilterSelection" dir="ltr"
onchange="determineAction();">
<option value="allTasks" selected="" label=""></option>
<option value="com.ibm.isclite.MyTaskFilter" label=""></option>
<option value="PF+com.ibm.websphere.product" label="">
</option>
</select>
<noscript>
<input type="submit" title='' value=''>
</noscript>
</td>
</tr>
<tr>
<td align="left" colspan="2" class="navtree" style="background-color:#FFFFFF">
<ul class="nav-child" dir="ltr">
<li class="navigation-bullet"><a style="text-decoration:none"
href="/ibm/console/navigation.do?wpageid=com.ibm.isclite.welcomeportlet.layoutElement.A&moduleRef=com.ibm.isclite.ISCAdminPortlet"
target="detail" dir="ltr" title=""></a></li>
</ul>
<div nowrap="" class="main-task" style="margin-left:0.3em;"><a
style="color:#000000;text-decoration:none;"
href="javascript:expandCollapse('0');" title=""><img
src="/ibm/console/images/arrow_collapsed.gif" title="Expand"
alt="Expand" id="I0" border="0" align="absmiddle"></a></div>
<div class="nav-child-container" style="margin-left: 0.3em; display: none;"
id="N0">
<ul class="nav-child" dir="ltr">
<li class="navigation-bullet"><a style="text-decoration:none"
href="/ibm/console/navigatorCmd.do?forwardName=guidedactivity.resource&WSC=true"
target="detail" dir="ltr" title=""></a></li>
</ul>
<ul class="nav-child" dir="ltr">
<li class="navigation-bullet"><a style="text-decoration:none"
href="/ibm/console/navigatorCmd.do?forwardName=guidedactivity.web&WSC=true"
target="detail" dir="ltr" title=""></a></li>
</ul>
</div>
<div nowrap="" class="main-task" style="margin-left:0.3em;"><a
style="color:#000000;text-decoration:none;"
href="javascript:expandCollapse('1');" title=""><img
src="/ibm/console/images/arrow_collapsed.gif" title="Expand"
alt="Expand" id="I1" border="0" align="absmiddle"></a></div>
<div class="nav-child-container" style="margin-left: 0.3em; display: none;"
id="N1">
<ul class="nav-child" dir="ltr">
<li class="navigation-bullet"><a style="text-decoration:none"
href="/ibm/console/navigatorCmd.do?forwardName=ApplicationServer.content.main&WSC=true"
target="detail" dir="ltr" title=""></a></li>
</ul>
<ul class="nav-child" dir="ltr">
<li class="navigation-bullet"><a style="text-decoration:none"
href="/ibm/console/navigatorCmd.do?forwardName=WebServer.content.main&WSC=true"
target="detail" dir="ltr" title=""></a></li>
</ul>
<ul class="nav-child" dir="ltr">
<li class="navigation-bullet"><a style="text-decoration:none"
href="/ibm/console/com.ibm.ws.console.sib.sibresources.forwardCmd.do?forwardName=SIBMQServer.content.main&WSC=true"
target="detail" dir="ltr" title=""></a>
</li>
</ul>
</div>
<div nowrap="" class="main-task" style="margin-left:0.3em;"><a
style="color:#000000;text-decoration:none;"
href="javascript:expandCollapse('2');" title="Aplications"><img
src="/ibm/console/images/arrow_expanded.gif" title="Expand"
alt="Expand" id="I2" border="0"
align="absmiddle">Aplications</a></div>
<div class="nav-child-container" style="margin-left: 0.3em; display: block;"
id="N2">
<ul class="nav-child" dir="ltr">
<li class="navigation-bullet"><a style="text-decoration:none"
href="/ibm/console/navigatorCmd.do?forwardName=ApplicationDeployment.content.main&WSC=true"
target="detail" dir="ltr" title=""></a>
</li>
</ul>
<ul class="nav-child" dir="ltr">
<li class="navigation-bullet"><a style="text-decoration:none"
href="/ibm/console/com.ibm.ws.console.appmanagement.action.forwardCmd.do?forwardName=appmanagement.upload&WSC=true"
target="detail" dir="ltr" title=""></a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<frame title="Content Mark"
src="/ibm/console/navigation.do?wpageid=com.ibm.isclite.welcomeportlet.layoutElement.A&moduleRef=com.ibm.isclite.ISCAdminPortlet"
name="detail" resize="yes" marginwidth="0" marginheight="0">
</frameset>
</frameset>
<noframes>
...
</noframes>
</html>
Whenever you encounter frameset remember you don't need to switch over it to let selenium interact with inside element.
Instead do switch to frame itself (Implementing WebDriverWait for more stability):
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.name("navigation")));
and finally your desired element you can pick :
element = wait.until(ExpectedConditions.presenceOfElementLocated(By.xpath("/html/body/div/div/table/tbody/tr[2]/td/div[5]/a")));
// Click to expand Aplicactions options
element.click();
It not a recommendation to use Absolute xpath switch to relative xpath.
Tried every possible way but could not locate the WebElement of WebTable.
Please find the below HTML excerpt and help me finding the WebElement "Project Costing " :
<!DOCTYPE html>
<html class="firefox win pc standard" lang="en" dir="ltr">
<head>
<body class="PSPAGE" onload="loadAllPgltData('portlets',1465250643644);">
<script type="text/javascript">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<tr>
<td>
<table id="ptpglts" width="100%" summary="">
<tbody>
<tr>
<td width="33%" valign="top">
<ul id="ptcol1" class="ptpgltdroppable">
<li id="ptpgltli_MENU" class="pthpli ">
<table id="MENU" class="PTPAGELET" width="100%" cellspacing="0" cellpadding="0" border="0" summary="">
<tbody>
<tr>
<tr id="ptpgltbody_row_MENU">
<td id="ptpgltbody_MENU" class="PTPAGELETBODY" width="100%">
<div id="MENU_Data" class="ptprtlcontainer">
<script id="ptPgltReloadThis" type="text/javascript">
<link type="text/css" href="https://pacefin.techmahindra.com/cs/PACEFIN/cache/PSSTYLEREQ_1.css;wad40e4d39521f1256" rel="stylesheet">
<link type="text/css" href="https://pacefin.techmahindra.com/cs/PACEFIN/cache/PSSTYLEDEF_TANGERINE_4.css;wa90f8b654ed2a321b" rel="stylesheet">
<script type="text/javascript">
<script src="https://pacefin.techmahindra.com/cs/PACEFIN/cache/PT_COMMON_MIN_1.js;waaedd9d526f2073e4" type="text/javascript">
<script src="https://pacefin.techmahindra.com/cs/PACEFIN/cache/PT_AJAX_NET_MIN_1.js;waf370f1177a8f9947" type="text/javascript">
<nav id="ptnav2pglt" aria-label="Menu">
<div id="ptnav2srch">
<div id="ptnav2pgltbody">
<ul id="ptnav2tree">
<li id="MYFAVORITES" class="ptnav2fldr" title="Create a list of frequently used transactions.">
<li id="MANAGE_QUOTE_SYSTEM" class="ptnav2fldr" title="Manage Quotes">
<li id="CO_EMPLOYEE_SELF_SERVICE" class="ptnav2fldr" title="">
<li id="CO_MANAGER_SELF_SERVICE2" class="ptnav2fldr" title="">
<li id="EPCO_CUSTOMERS" class="ptnav2fldr" title="Manage customer information.">
<li id="EPCO_CUSTOMER_CONTRACTS" class="ptnav2fldr" title="Access customer contracts.">
<li id="EPCO_ITEMS" class="ptnav2fldr" title="Manage all item-related options.">
<li id="EPPO_PURCHASING" class="ptnav2fldr" title="Manage requisitions, purchase orders, receipts, GPO contracts, and related data.">
<li id="EPCO_PROGRAM_MANAGEMENT" class="ptnav2fldr" title="Use program management tools to review program progress.">
<li id="EPCO_PROJECTS" class="ptnav2fldr" title="Access project costing.">
<div class="ptnav2toggle"> </div>
<a id="fldra_EPCO_PROJECTS" class="ptntop" href="https://pacefin.techmahindra.com/psp/PACEFIN/EMPLOYEE/ERP/s/WEBLIB_PTPP_SC.HOMEPAGE.FieldFormula.IScript_AppHP?pt_fname=EPCO_PROJECTS&FolderPath=PORTAL_ROOT_OBJECT.EPCO_PROJECTS&IsFolder=true">Project Costing</a>
For any further information regarding above Please ask.
Try below mentioned xpaths
option 1. //a[text()='Project Costing']
option 2. //*[#id='fldra_EPCO_PROJECTS'] in case this ID value is duplicate then try concatenating it with other attribute like this //*[#id='fldra_EPCO_PROJECTS'][#class='ptntop']
option 3. Or start with the table name //table[#id='ptpglts']/a
In case nothing works then try using the xpath sibling methods
option 4. Use the element just above a step above to your element //*[#class='ptnav2toggle']/following-sibling::a
im 'developing' an application made using Spring Boot, i am not so sure how to manage templates.
I've tought two ways to do this:
Using custom tags and returning the value of the HTML/JSP file as a String and use it
Something like this
<th:header></th:header>
<!-- This would be the header (The implementation of this tag in Java) -->
<body>
Things that are not common
<th:footer></th:footer>
<!-- This would be the footer -->
</body>
The other way could be using includes, but im not so sure how to do it...
Not sure if theres another way of doing this using Spring. Hope that you could understand me.
Thanks you before hand :·).
You could use Thymeleaf. Then you can use
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: common-header" />
<body>
<div th:replace="common/navbar :: common-navbar" />
<your content here>
</body
</html>
Then you would have the common-header and common-navbar thymeleaf fragments in separate files like so (note the th:fragment in the common files. Also note that these files are under a common folder):
<head th:fragment="common-header">
<title>DevOps Buddy</title>
<!-- Bootstrap core CSS -->
<link th:href="#{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<!-- Custom styles for this template -->
<link type="text/css" th:href="#{/css/styles.css}" rel="stylesheet" media="screen"/>
And so
<div th:fragment="common-navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a th:text="#{navbar.home.text}" href="/"></a></li>
<li><a th:text="#{navbar.about.text}" href="/about"></a></li>
<li><a th:text="#{navbar.contact.text}" href="/contact"></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li th:if="${#authorization.expression('!isAuthenticated()')}">
<a th:href="#{/login}" th:text="#{navbar.login.text}" />
</li>
<li th:if="${#authorization.expression('isAuthenticated()')}">
<form id="f" th:action="#{/logout}" method="post" role="form" class="navbar-form">
<button type="submit" th:text="#{navbar.logout.text}" class="btn btn-primary" />
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
I am setting up a test to perform a search and after the search is complete, i want to capture the results line that says "About xxx results (x.xx seconds)". I can get this to work using the firefox webdriver, but it does not work when I use IE or Chrome driver. I need help determining what is wrong with my code. Here is the code snippet:
public void runSearch(WebDriver driver) {
WebElement element = driver.findElement(By.name("search"));
element.sendKeys("Kearney");
element.sendKeys(Keys.RETURN);
String itext = driver.findElement( By.cssSelector("div#resInfo-0")).getText();
System.out.println("Search returned '" + itext + "'.");
}
Here is the html of my page after the search has been made:
<head></head>
<body>
<header id="main_header_iphone"></header>
<div class="clear"></div>
<header id="main-header"></header>
<section>
<div class="content_nn">
<div class="subnav">
<!--
<div class="bannerBox">
<div class="btn_events"><…
-->
<div class="logo"></div>
<!--
START Search
-->
<div class="search_container">
<div id="cse" style="width:100%;">
<div class="gsc-control-cse gsc-control-cse-en">
<div class="gsc-control-wrapper-cse" dir="ltr">
<form class="gsc-search-box" accept-charset="utf-8"></form>
<div class="gsc-results-wrapper-nooverlay gsc-results-wrapper-visible">
<div class="gsc-tabsAreaInvisible"></div>
<div class="gsc-tabsAreaInvisible"></div>
<div class="gsc-above-wrapper-area">
<table class="gsc-above-wrapper-area-container" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gsc-result-info-container">
<div id="resInfo-0" class="gsc-result-info">
About 31 results (0.11 seconds)
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="gsc-adBlockNoHeight" style="height: 0px; font-weight: normal; text-align: center;"></div>
<div class="gsc-wrapper"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/uds/?file=search&v=1&hl=en"></script>
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/api/search/1.0/65b21018ad4df09e3eb5a21326b72d0b/default+en.css"></link>
<script type="text/javascript" src="http://www.google.com/uds/api/search/1.0/65b21018ad4df09e3eb5a21326b72d0b/default+en.I.js"></script>
<!--
END Search
-->
</div>
<div class="text_rural_h2" style="float:left; width:100%"></div>
<div class="index_page_heading" style="float:left;"></div>
<div class="letest_news2" style="float:left;"></div>
</div>
<footer id="footer"></footer>
</div>
</section>
<div id="topcontrol" style="position: fixed; bottom: 25px; right: 10px; opacity: 0; cursor: pointer;" title="Scroll Back to Top"></div>
<table class="gstl_50 gssb_c" cellspacing="0" cellpadding="0" style="width: 137px; display: none; top: 153px; position: absolute; left: 97px;"></table>
<div style="display:none"></div>
</body>
It is possible, the search result page takes more time for loading than WebDriver expects.
I propose to wait until the next page is loaded with WebDriverWait methods.
element.sendKeys("Kearney");
element.sendKeys(Keys.RETURN);
// Wait!
WebDriverWait wait = new WebDriverWait(driver, 20);
By waitFor = By.cssSelector("div#resInfo-0");
WebElement lblSearchResults = wait.until(ExpectedConditions.ElementIsVisible(waitFor));
//
String itext = lblSearchResults.getText();
Please see also this topic - WebDriver: Advanced Usage
For IE and Chrome you need an extra driver. Start with the chrome driver and check if this solves you problem.
Hi I have created a JSP page. First tab contains a SELECT field. Based on the selected value I want to show the next tab. Can anyone help me please? I tried many times, but I am not getting.
<div class="navbar btn-navbar">
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#datacollector" target="main"
data-toggle="tab">Data Collector</a></li>
<li class="hidden"><a href="#fromDB" target="main"
data-toggle="tab">Data Load</a></li>
<li class="hidden"><a href="#fromFile" target="main"
data-toggle="tab">Data Load</a></li>
<li class="hidden"><a href="#email" target="main"
data-toggle="tab">Data Load</a></li>
<li><a href="ajax/DataFieldMapping.jsp" target="main" data-toggle="tab">Data
Map</a></li>
<li>Schedule</li>
</ul>
<br> <br> <br>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="datacollector">
<div class="container">
<div class="row">
<div class="span8">
<form name="selectType" action="selectType"
onsubmit="return validateForm()" target="#fromDB" method="get">
<fieldset>
</select> <label class="control-label" for="dataloadType">Data
load Type:</label> <select id="dataloadType" name="dataloadType">
<option>Choose Data load Type</option>
<option value="fromDB">From Database</option>
<option value="fromFile">From File</option>
<option value="email">E-mail</option>
<option value="webServices">Web Services</option>
</select>
<p>
<button id="nexttab" type="submit" class="btn btn-success">Submit</button>
</p>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="fromDB">
<iframe src="GenericFileUpload.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="fromFile">
<iframe src="GenericDB.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="email">
<iframe src="EmailService.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="datamap">
<iframe src="DataFieldMapping.jsp" width="1250" height="400"></iframe>
</div>
<div class="tab-pane fade" id="schedule">
<iframe src="UploadConfiguration.jsp" width="1250" height="400"></iframe>
</div>
</div>
</div>
</div>
If the user selects from File it should show the next tab with id fromFile and also it should hide the tabs with ids fromDB and email. Can someone help me out?
How to do using Jquery?
How to make a DIV visible and invisible with JavaScript
Just to add-on to this:
onchange event should be registered with a java-script function. This function will read the current selected value in the select box.
Based on the value, make only the div visible that's required, rest all to hidden.
$('#dataloadType').live('change',function(){
var value = $(this).val();
$('#tabs').tabs('select',value);
});