Please find my code which intents to develop a Form. Help me in understanding why the CheckBox and NumberSpinner are rendered as TextFields.
I have imported all the required classes and dojo config attribute is configured properly
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%# taglib prefix="fmt" uri=`enter code here`"http://java.sun.com/jstl/fmt" %>
<%#include file="/webclient/admin/jspf/NotificationOperations.jspf" %>
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="/webclient/map/js/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>
require([
"dojo/parser",
"dijit/form/CheckBox",
"dijit/form/NumberSpinner",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
<%#include file="/webclient/common/jspf/jsUtility.jspf" %>
<html>
<head>
<body class="claro">
<style>
#import "/webclient/common/js/dojo/dgrid/css/skins/claro.css";
h2 {
margin: 12px;
}
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
.ui-widget{
margin: 10px;
}
</style>
<table width="100%" height="100%">
<tr><td>
<div id="DomainMapContainer" >
<tr class="spacer"><td> </td></tr>
<tr><td>
<form id="addProfile" data-dojo-type="dijit/form/Form" data-dojo-props='encType:"multipart/form-data", action:"/prov/createRFC2544TestProfile.do?action=createRFC2544TestProfile", method:"POST", target:"formSubmitIframe"'>
<table>
<tr>
<td><label for="profileName">Profile Name</label></td>
<td>
<input data-dojo-type="dijit/form/TextBox" data-dojo-props='id:"profileName", name:"profileName", required:"true"'/>
</td>
</tr>
<tr>
<td><label for="comments">Comments</label></td>
<td>
<input data-dojo-type="dijit/form/TextArea" data-dojo-props='id:"comments", name:"comments", rows:"5", cols:"40"'/>
</td>
</tr>
<tr>
<td><label for="frameSize">Frame Size</label></td>
<td>
<table>
<tr>
<td><label for="cb_1"><input data-dojo-type="dijit/form/CheckBox" id="cb_1" name="cb_1" value="64" checked/> 64</label></td>
<td><label for="cb_2"><input data-dojo-type="dijit/form/CheckBox" id="cb_2" name="cb_2" value="128"/> 128</label></td>
</table>
</td>
</tr>
</table>
<fieldset>
<legend><label> Throughput Test</label></legend>
<table>
<tr>
<td><label for="tTestDuration">Test Duration</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestDuration" value="60" data-dojo-props="smallDelta:1, constraints:{min:1,max:600,places:0}" name="tTestDuration"/>(Seconds)</td>
</tr>
<tr>
<td><label for="tTestMinFrameRate">Minimum Frame Rate</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestMinFrameRate" value="0" data-dojo-props="smallDelta:1, constraints:{min:1,max:10000,places:0}" name="tTestMinFrameRate"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestMaxFrameRate">Maximum Frame Rate</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestMaxFrameRate" value="100" data-dojo-props="smallDelta:1, constraints:{min:1,max:10000,places:0}" name="tTestMaxFrameRate"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestStepSize">Step Size</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestStepSize" value="5" data-dojo-props="smallDelta:1, constraints:{min:1,max:100,places:0}" name="tTestStepSize"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestAcceptableLoss">Step Size</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestAcceptableLoss" value="0" data-dojo-props="smallDelta:0.1, constraints:{min:0,max:10,places:0}" name="tTestAcceptableLoss"/>(%)</td>
</tr>
</table>
</fieldset>
</form>
</td></tr>
</div>
</td></tr>
</table>
</body>
</head>
</html>
I'm seeing a few things here, first of all you're missing a closing </tr> tag when you close the "frame size" table. I suppose that it won't cause errors, but you can never be too sure.
You're also closing your </head> tag at the bottom of the page. You should close it before the <body> starts.
Then the real problem is that your widgets are not working because there are errors while parsing your HTML. The cause of the error is the "comments" text area. The correct module name you should use is dijit/form/Textarea, so the "a" of area should be in lowercase.
Besides that, you should also add the dijit/form/Textarea module to your list of modules (in your require() block).
If you did all that it should work, as you can see in this fiddle: http://jsfiddle.net/9U5AB/
Related
I need to select radion button with id="optProfile" in 7th tr using text "Internet Users" in td/font tag. I am using below code but it is not working and selecting radio button from 1st tr row. Can anyone help
<html>
<head>
<body onmousedown="infCheckMouseDown(event);" onkeydown="infCheckDownKey(event);" onbeforeunload="INFIEExit();" onload="INFsetInitialFocus();window_onload();CreateScriptingFrames();">
<form action="PEINFCommon.ASP?WCI=Genericcreen&WCE=GenericEvent" onsubmit="return false" name="Genericcreen" method="post">
<table class="TopLevelTable" align="center" width="100%" border="0">
<tbody>
<tr>
<td width="100%">
<table width="100%" border="0">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<td width="100%">
<div align="center">
<center>
<table width="98%" cellspacing="0" cellpadding="0" border="0" cols="1">
<tbody>
<tr align="center">
<td align="left">
<table width="100%">
<tbody>
<tr>
<tr>
<tr>
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<td width="5%">
<input id="optProfile" type="Radio" callfunction="" value="" onblur="ResetScript(this);return true;" onfocus="HighlightScript(this);" onclick="" name="" size="11">
<font class="fLabel"></font>
<br>
<input id="hidCurrentProfile" type="hidden" onblur="ResetScript(this);" onfocus="HighlightScript(this);" value="N" callfunction="" size="11" name="/Root/ACORD/InsuranceSvcRs/nk_ck_com.cc_FetchUserProfileRs/nk_ck_com.cc_SecurityDetails/nk_ck_com.cc_AvailableProfile[12]/nk_ck_com.cc_CurrentProfileInd">
<input id="hidProfile" type="hidden" onblur="ResetScript(this);" onfocus="HighlightScript(this);" value="RACINTER" callfunction="" size="11" name="/Root/ACORD/InsuranceSvcRs/nk_ck_com.cc_FetchUserProfileRs/nk_ck_com.cc_SecurityDetails/nk_ck_com.cc_AvailableProfile[12]/nk_ck_com.cc_ProfileCd">
</td>
<td>
<font class="">Internet Users</font>
</td>
</tr>
<tr height="">
<tr height="">
<tr height="">
<tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
</tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
</frame>
<frame id="Script" scrolling="Yes" frameborder="0" noresize="">
</frameset>
</html>
you need to use ancestor instead of preceding:
//font[text()='Internet Users']/ancestor::tr[1]/td/input[#type='Radio']
and it's also a better practice to tell which one of the tr-ancestors you want -> [1] - since you want the first direct ancestor
Is there a reason why you are not using the id of the radio button?
WebElement wElement = wDriver.findElement(By.Id("optProfile"));
You can use the following XPath
//tr[.//font[text()='Internet Users']]//input[#id='optProfile']
This xpath looks for the tr containing the font tag with text "Internet Users" and then navigates to the input tag with id = 'optProfile'
You can use preceding as below-
By.xpath("//font[contains(text(),'Internet Users')]/preceding::input[#id='optProfile']")
Thanks everyone here for your help. I really appreciate it.Its working with below code
WebElement trs = GlobalVar.wDriver.findElement(By.xpath("//font[text()='Internet Users']/ancestor::tr[1]"));
trs.findElement(By.id("optProfile")).click();
I would try something like this
List<WebElement> trs = driver.findElements(By.cssSelector("table > tr"));
for (WebElement tr : trs)
{
List<WebElement> fonts = tr.findElements(By.tagName("font"));
if (!fonts.isEmpty() && fonts.get(0).getText().trim().equals("Internet Users"))
{
tr.findElement(By.id("optProfile")).click();
break;
}
}
You didn't show the TABLE tag in the HTML snippet so you will likely need to be more specific in the initial CSS selector. Basically this code loops through the TRs looking for "Internet Users" in the FONT tag. Once it finds it, it click the radio button with id=optProfile.
If you will post the TABLE tag in the HTML snippet I can help with the CSS selector.
Edit 1: changed the code to address the case where some TRs don't contain FONT tags.
I am using datatables plugin for my table, please note that I am using responsive datatables.
Also I am using bootstrap v3.2.0. I have put-up my responsive datatables on bootstrap modals dialog. But problem, I am facing is that my table is not becoming responsive on modal dialog, it becomes responsive on normal page though.
I have found if i remove the class name "modal" from modal code then it becomes responsive so it is clear that class modal is creating problem but i can not remove modal class as well otherwise modal won't work.
Here is css of modal class:
.modal {
bottom: 0;
display: none;
left: 0;
outline: 0 none;
overflow-x: auto;
overflow-y: scroll;
position: fixed;
right: 0;
top: 0;
z-index: 1050;
}
My Modal code:
<div class=" fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Send File Popup</h4>
</div>
<div class="modal-body">
<table id="filepopupTable" class="display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th class="padding10"> <div class="ckbox ckbox-default">
<input type="checkbox" id="selectall" value="1" class="mt0 mr10" />
<label for="selectall" class="mr5">Select All</label>
</div></th>
<th>File Name</th>
<th>Size</th>
<th>Uploaded On</th>
<th data-sort-ignore="true">Quick Action</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td class="thmb">
<div class="ckbox ckbox-default">
<input type="checkbox" id="check1" value="1" />
<label for="check1"></label>
</div>
</td>
<td>Life brochure.doc</td>
<td>3 kb</td>
<td> Jan 03, 2014</td>
<td class="table-action">
<i class="glyphicon glyphicon-send"></i>
</td>
</tr>
<tr class="even gradeC">
<td class="thmb">
<div class="ckbox ckbox-default">
<input type="checkbox" id="check2" value="1" />
<label for="check2"></label>
</div>
</td>
<td>Provider_list.xlxs</td>
<td>34 kb</td>
<td> Jan 03, 2014</td>
<td class="table-action">
<i class="glyphicon glyphicon-send"></i>
</td>
</tr>
<tr class="odd gradeA">
<td class="thmb">
<div class="ckbox ckbox-default">
<input type="checkbox" id="check3" value="1" />
<label for="check3"></label>
</div>
</td>
<td>My_logo.png</td>
<td>443 kb</td>
<td> Jan 03, 2014</td>
<td class="table-action">
<i class="glyphicon glyphicon-send"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
Please everyone, check this issue and try to fix it.
Help is much appreciated!!
Its not so much that the modal class is causing the issue as it is the fact that the modal class hides its contents by default.
The Responsive DataTables extension will not run on a table that is hidden during initialization.
To work around this issue after you show the modal recalculate the column widths. First the table:
var myTable = $("#myTable").DataTable({});
Then later showing when you show the modal
$("#myModal").modal('show');
myTable.responsive.recalc();
More information can be found here: http://datatables.net/extensions/responsive/reference/api/responsive.recalc%28%29
To add to what KyleT said, make sure you wait until the modal has been shown before calculating the dimensions, this can done like so...
//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
//Get the datatable which has previously been initialized
var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
//recalculate the dimensions
dataTable.columns.adjust().responsive.recalc();
});
Is this any help to you: http://codepen.io/panchroma/pen/nBmbL ?
HTML is unchanged. CSS is as above with the addition of
.modal-content{
min-width: 300px; /* adjust as necessary */
}
As you can see, I'm stopping the modal window from collapsing too small.
Good luck!
Try adding <div class="table-responsive"></div> wrapper around your table. It worked for me (sort of). I couldn't get it to work inside a panel, but it did work a lot better with the wrapper.
<html>
<head>
<!--Modal Goes First -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<!--Modal End -->
<!-- DataTable -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Bootstrap 3</title>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<!-- DataTable End -->
<script type="text/javascript" class="init">
var $j = jQuery.noConflict();
$j(document).ready(function (){
$j('#example').DataTable();
});
$(document).ready(function(){
});
</script>
</head>
<body>
<a data-toggle="modal" href="#myModal" class="btn btn-success btn-lg" data-target="#myModal">My Modal</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<table id="example" class="table table-striped table-bordered" style="width:100%"></body>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<div class="modal-footer">
Close
<button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
/* I had similar issue , I needed datatable (search/sort/pagination) inside modal, fully functioning code here: */
I have a table with 4 columns. The second column displays an email address and i'd like that column to take up the maximum amount of width within the table that it can. Then when the viewport size becomes smaller, the column width should be responsive and the email displayed should truncate if it becomes too large for the column.
All the solutions i've found so far either use table: {table-layout:fixed;} or set a max-width value on the td. Which are no good for me as they force the columns to specific widths.
This is what i'm trying to achieve regarding the column width layout, but the truncation fails. I read on an SO comment (showing the max-width solution) that setting width: 100% and min-width: 1px would have the desired affect, but it doesn't appear to work.
http://plnkr.co/edit/gIC5u6wq6oCYhF5pCJJp?p=preview
This is a max-width example where at least the text truncates, but the column widths are wrong.
http://plnkr.co/edit/e8sj2iqRUpBytMomddCS?p=preview
I've also tried wrapping the email text in a div, setting the width of the td to 100% and then setting the truncation on the inner div (also with width: inherit) but that didn't work either.
Add a class to other columns i.e Checkbox, Staff and Client columns and fix their width by giving appropriate widths.
Below is the HTML and CSS code:
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Email</th>
<th class="text-center">Staff</th>
<th class="text-center">Client</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
<tr>
<td class="text-center other-col">
<input type="checkbox">
</td>
<td class="email-col">
example#example.com
</td>
<td class="text-center other-col">
yes
</td>
<td class="text-center other-col">
no
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
You can find that an additional class other-col is added in the above code.
CSS
/* Styles go here */
.email-col {
/*width: 100%;
min-width: 1px;*/
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.other-col {
width:10%;
}
Add style for that cell
word-break: break-all;
below is the html code
<html dir="ltr" __expr-val-dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<body onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" scroll="yes">
<form id="aspnetForm" onsubmit="javascript:return WebForm_OnSubmit();" action="/Lists/Bedrifter/NewForm.aspx?RootFolder=%2FLists %2FBedrifter&ContentTypeId=0x010089708C9D4BD6934C8E5AAD8CA5960372&Source=http%3A%2F%2Fbrbaker%2Eiqubes%2Ecom%2FLists%2FBedrifter %2FAllItems%2Easpx" method="post" name="aspnetForm">
<div>
<script type="text/javascript">
<script type="text/javascript" src="/WebResource.axd?d=4d6EoZshmx02OmMScHE3DbHlrYbV8g3RhGO1crQQDRnSnV0ocSltu- h2JR6NPXUrSq6UdfWCYI3o0DJF_ZfaK3a8coA1&t=634605546709717464">
<script>
<script language="JavaScript" type="text/JavaScript">
<script src="/_layouts/datepicker.js" language="javascript">
<script language="javascript">
<script language="javascript">
<script type="text/javascript">
<script type="text/javascript" src="/ScriptResource.axd?d=Lim-50lYe1ZDrlX4mMFL650sLf8k9DOdc77CA32d5iqCcwZgC0o44-JDQvjWVdOvFNhnh9Rv8ET6IZprG0J0- hy3RwAt6a8wzZYDlicHIDUEUV3EM6jVmf-3rAG4gzDt7vMtWA2&t=ffffffffe0ec361c">
<script type="text/javascript" src="/ScriptResource.axd?d=kzC4QkzPw8VSUFfZJOZJBiUuRCJh8hH4jceOz-aS9SoZHjrHyO0- qLxFSc_CZdZWHipnmUwdugwDjjJUVkJPeY6Lu2n5NvmKbB5lpZ-yM3GAfcBKWP54a0try64gthczZoxjy1sDHJib8zf8iHnFyopgObE1&t=23ac280b">
<script type="text/javascript" src="/ScriptResource.axd?d=Glp6MnJF7a1dHB7t8aIwFln7LYIjT8Kl_yKq1264_-9QdU3Y7jwHZhcKumPfVlZ3bLuoCPjTZgTerzZfJQex- 7jEIxOZZewN1qSYBhLI3WDJOu1cpD5txPFEu4or9SHjqQ-3ZCDMbq-5NF6lo2Fvf-OSqgUnrMwO8kWZBqN8GlLP10qd0&t=23ac280b">
<script type="text/javascript" src="/WebResource.axd?d=xYoo8lVwQo4Vp8QZN5OAU9ZNIsutUO_7HeMk_xB4mc0J5qXChkZyGSQUm- GEsHBbkeAr07Gg56nkgPJwAT9UisVxGYs1&t=634605546709717464">
<script type="text/javascript">
<div>
<script type="text/javascript">
<table class="ms-iqubes-body" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="ms-globalbreadcrumb" colspan="4">
<td width="3%" valign="middle" style="padding-left:3px; padding-right:6px;">
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<tr>
<tr height="100%">
<td>
<table class="iqubes-background" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<tr>
<td id="LeftNavigationAreaCell" class="ms-leftareacell" valign="top" height="100%">
<td>
<td class="ms-bodyareacell" valign="top">
<placeholder id="ctl00_MSO_ContentDiv">
<table id="MSO_ContentTable" class="ms-propertysheet" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="ms-bodyareaframe" valign="top" height="100%">
<a name="mainContent"></a>
<script type="text/javascript" language="javascript">
<table id="onetIDListForm" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="MSOZoneCell_WebPartWPQ5" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" toplevel="">
<tbody>
<tr>
<td valign="top">
<div id="WebPartWPQ5" style="" allowdelete="false" width="100%" haspers="false" webpartid="bac1b910-309d-4e46-47b4-0b8a052b0579">
<span id="part1">
<table id="ctl00_m_g_bac1b910_309d_4e46_47b4_0b8a052b0579_ctl00_toolBarTbltop" class="ms-formtoolbar" width="100%" border="0" cellspacing="0" cellpadding="2">
<table id="ctl00_m_g_bac1b910_309d_4e46_47b4_0b8a052b0579_ctl00_ctl01_ctl00_toolBarTbl" class="ms-toolbar" width="100%" border="0" cellspacing="0" cellpadding="2">
<table class="ms-formtable" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 8px;">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<td class="ms-formlabel" width="190px" valign="top" nowrap="true">
<td class="ms-formbody" width="400px" valign="top">
<span dir="none">
<select id="ctl00_m_g_bac1b910_309d_4e46_47b4_0b8a052b0579_ctl00_ctl04_ctl15_ctl00_ctl00_ctl04_ctl00_Lookup" title="Parent company" name="ctl00$m $g_bac1b910_309d_4e46_47b4_0b8a052b0579$ctl00$ctl04$ctl15$ctl00$ctl00$ctl04$ctl00$Lookup">
<br>
I used almost all method's for selecting drop down as below
new Select(driver.findElement(By.xpath("//*[#id='ctl00_m_g_bac1b910_309d_4e46_47b4_0b8a052b0579_ctl00_ctl04_ctl15_ctl00_ctl00_ctl04_ctl00_Lookup']"))).selectByVisibleText("Baker Brazil");
i tried with id, name etc but i am getting error
org.openqa.selenium.NoSuchElementException: Unable to find element with xpath =="".
I am using IE 10 to do testing of a share point site.
Finally i got the answer i just followed steps in this blog
driver.findElement(By.xpath("//SPAN[#id='part1']/TABLE[3]/TBODY/TR[16]/TD[2]/SPAN")).click();
driver.findElement(By.xpath("//SPAN[#id='part1']/TABLE[3]/TBODY/TR[16]/TD[2]/SPAN")).sendKeys(Parentcompany);
Just give a try with below locator.
new Select(driver.findElemet(By.cssSelector("select[title='Parent company']"))).selectByVisibleText("Baker Brazil");
I think the id is auto generated one (usually .net/share point applications do). Try the below code
example:
new Select(driver.findElemet(By.xpath("//*[contains(#id='Lookup')]"))).selectByVisibleText("Baker Brazil");
Or just check which part of id is getting auto generated and modify the xpath accordingly using xpath functions (starts-with() or ends-with() or contains()) as shown in example
I checked in one of the share point application that the form/web table is located in the iframe. This is the reason why you were getting the exception.
Try the below code directly, no need to go for table proceedure
driver.findElement(By.linkText("Add new item")).click();
//give your iframe class name, which will be on top of the topmost table tag
driver.switchTo().frame(driver.findElement(By.className("ms-dlgFrame")));
//use below xpath
Select list = new Select (driver.findElement(By.xpath("//select[#title='Parent Company']")));
list.selectByVisibleText("Baker Brazil");
When i add this as Gadget to google calendar ,it partially goes out of the screen...How should i correct such that the gadget will appear with in the screen...
Here is a code where it creates a gadget asking for username and password and login button..
I just want to know the procedure too make the gadget to appear with in the screen
enter code here
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="ABC Google Calendar Gadget" width="180" author="abc" author_email="abcgmail.com" description="My First Test">
<Require feature="dynamic-height"/>
<Require feature="google.calendar-0.5"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<html style="overflow: hidden;">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
//.login {
// display: block;
//}
//.event {
// display: none;
/}
</style>
</head>
<body class="loc-en ff ff3">
<script>
var _message = 'This is My first Gadget!';
function validateForm(){
alert("Hello");
$('.login').hide();
$('.event').show();
}
function createEventfun(){
alert("create event");
var eventData = {
title: 'NewYear',
details: 'Hi all',
location: 'My room',
allDay: true,
startTime: {year: 2013, month: 04, date: 21},
endTime: {year: 2013, month: 04, date: 22},
attendees: [
{email: 'nirupama.ninusah#gmail.com'}
],
rrule: 'RRULE:FREQ=YEARLY'
};
google.calendar.composeEvent(eventData);
}
function load()
{
alert("Page is loaded");
}
function changeWidth(){
var e1 = document.getElementById("gadgetcell");
e1.style.width = 180;
alert("Page is loaded and width of gadgetcell is modified to 180");
}
</script>
<div class="login" align="left">
<table border="1" height="200" width="100%">
<tr>
<td>
<image src="http://abc.com/Portals/78096/images/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="left">
<table border="0">
<tr>
<td>Userid</td>
<td><input type="text" name="userid" size=10/><br></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" size=10/><br></td>
</tr>
<tr>
<td>VidyoURL</td>
<td><input type="text" name="url" size=10/><br></td>
</tr>
<tr>
<td><button onClick="validateForm()" style="background-color:red;color:white">LOGIN</button></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="event" style="width: 180px;">
<table border="1">
<tr>
<td>
<image src="http://abc.com/Portals/78096/image/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="center">
<table border="0" height="200" width="100%">
<tr>
<span>User Successfully Aunthenticated</span>
</tr>
<tr>
<button onclick="createEventfun()" style="background-color:red;color:white">CREATE VIDYO EVENT</button>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
]]></Content>
</Module>
Look at Managing Gadget Height:
- A <Require feature="dynamic-height"/> tag (under <ModulePrefs>) to tell the
gadget to load the dynamic-height library.
- A call to the JavaScript function gadgets.window.adjustHeight() whenever there
is a change in content, or another event occurs that requires the gadget to
resize itself.
I added this script to all views and it works:
<script type="text/javascript" charset="utf-8">
function resize(){
gadgets.window.adjustHeight();
}
window.onload=resize;
</script>
Don't forget about "Required feature" tag