Say we have the following HTML code
<label for="467578">AgendaShowCapacity (1 remaining)</label>
I tried with the following xpath expression in Chrome but can't locate to that element:
//label[text()='AgendaShowCapacity (1 remaining)']
I was wondering whether the parenthese is to be blamed for this. If it is, how should I deal with it under such situation?
Any comments would be appreciated, thanks!
Edit 2012-9-18 real code block posted below
<div id="pageContent">
<fieldset>
<legend>Agenda</legend>
<ol class='fieldList custom' data-section='0'>
<li class="checkboxLeft" data-id="467578" data-z="1">
<div class="fieldHolder1">
<input id="467578" type="checkbox" name="467578" />
</div>
<div class="fieldHolder2">
<label for="467578">AgendaShowCapacity (1 remaining)</label>
</div>
</li>
<li class="checkboxLeft" data-id="467579" data-z="2">
<div class="fieldHolder1">
<input id="467579" type="checkbox" name="467579" />
</div>
<div class="fieldHolder2">
<label for="467579">AgendaHideReached</label>
</div>
</li>
<li class="checkboxLeft" data-id="467580" data-z="3">
<div class="fieldHolder1">
<input id="467580" type="checkbox" name="467580" />
</div>
<div class="fieldHolder2">
<label for="467580">AgendaShowMessage</label>
</div>
</li>
<li class="checkboxLeft" data-id="467584" data-z="4">
<div class="fieldHolder1">
<input id="467584" type="checkbox" name="467584" />
</div>
<div class="fieldHolder2">
<label for="467584">AgendaWaitlist</label>
</div>
</li>
</ol>
</fieldset>
<div class="buttonGroup">
<button type="button" name="ctl00$cph$ctlNavigation$btnAddAnother" class="button" onclick="SubmitForm(this);return false;">Add Another Person</button>
<span class="textBetweenButtons">or</span>
<button type="submit" name="ctl00$cph$ctlNavigation$btnContinue" class="button" onclick="SubmitForm(this);return false;">Continue</button>
</div>
</div>
Here is the essential part of the html page in which I want to locate to that //label element.
Second edit 2012/9/19
Sample C# code using selenium-webdriver to locate that element.
IWebDriver driver = new FirefoxDriver();
IWebElement = driver.FindElement(By.XPath("//div[#id='pageContent']//legend/following-sibling::ol/li/div/label[text()='AgendaShowCapacity (1 remaining)']"));
// Do something to that element
Related
I have some problems with the construction of my portfolio CV someone who understands HTML, CSS and JavaScript could help you thank you for your help.
My doubts are as follows:
My title of my image gallery has disappeared, how do I make the title "My Portfolio" be like in the 2nd file below?
How do I center my source code so that my image gallery is like in the image below (attached)?
I send the source code. And i appreciate you for your help with source code.
https://codepen.io/Quencyjones79/pen/XWYNwxj
index.html
`
<section class="container" id="portfolio">
<div class="main-title">
<h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
</div>
<p class="port-text">
Here is some of my work that I've done in various programming languages.
</p>
<div class="container_images">
<div class="full-view"></div>
<div class="preview-list">
<ul>
<li>
<input type="radio" id="tab-1" name="gallery-group">
<label for="tab-1">
<div class="tab">
<img
src="img/bandacoldplay.jpeg" />
</div>
</label>
<div class="content">
<img
src="img/bandacoldplay.jpeg" />
</div>
</li>
<li>
<input type="radio" id="tab-2" name="gallery-group">
<label for="tab-2">
<div class="tab">
<img
src="img/mascaraNY.jpg" />
</div>
</label>
<div class="content">
<img
src="img/mascaraNY.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-3" name="gallery-group">
<label for="tab-3">
<div class="tab">
<img
src="img/Dutchplan.jpg" />
</div>
</label>
<div class="content">
<img
src="img/Dutchplan.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-4" name="gallery-group" checked>
<label for="tab-4">
<div class="tab">
<img
src="img/planogeralPonteLima.jpg" />
</div>
</label>
<div class="content">
<img src="img/planogeralPonteLima.jpg" />
</div>
</li>
</ul>
</div>
</div>
</section>
`
(continue in codepen)
I have a html view and this view displays list of elements. All elements have two buttons (edit and delete). When I click on delete all is working correctly but when I click on edit new view is not displayed. When I want to enter my direct url to edit it, all is working...
This is fragment of my code:
<div class="container">
<!-- topics -->
<div class="row topic" th:each="user : ${users}">
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-at"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.email}"></a>
</p>
</div>
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.fullName}"></a>
</p>
</div>
<div class="col-2">
<form action="#" th:action="#{'/user/drop/{id}'(id=${user.getId()})}" th:method="delete" >
<input type="hidden" name="_method" value="delete" />
<button type="submit" class="btn btn-danger">Usuń użytkownika</button>
</form>
</div>
<div class="col-2"></div>
<!--My failed button-->
<button type="submit" class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</button>
</div>
</div>
</div>
A <button> has no href attribute. What you're looking for is a "link" (an <a> "anchor" tag to be specific):
<a class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</a>
The reason your other button "works" is because it's part of a <form> and it submits that form. It doesn't follow any kind of href attribute. You could also make this button part of a form, but that doesn't appear to be the intended functionality. The intended functionality here is to direct the user to a new page, so a link is appropriate.
I have a problem with FormValidation to validate a form in multi-tab (Bootstrap theme).When I click on submit button in #tab-1, formValidation work correctly. but when I change to #tab-2 or #tab-3, field validation in #tab-1 don't work and submit form without validation.
<form id="newstext" method="post" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-message="This value is not valid"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><i class="green ace-icon fa fa-home bigger-120"></i>tab-1</li>
<li><i class="red ace-icon fa fa-folder bigger-120"></i>tab-2</li>
<li><i class="blue ace-icon fa fa-exchange bigger-120"></i>tab-3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">title *</label>
<input id="title" name="title" type="text" placeholder="" class="form-control"
data-fv-notempty="true"
data-fv-notempty-message="The title is required" />
</div>
<div class="form-group">
<label class="control-label">abstract </label>
<input id="abst" name="abst" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">name</label>
<input id="namee" name="namee" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">show</label>
<input name="show_callme" value="1" id="show_callme" type="checkbox">Ok
<input name="show_callme" value="1" id="shows" type="checkbox">Bold
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
Please see my code in Codepen
This example might be helpful: formvalidation.io/examples/bootstrap-tab
JQuery FormValidation Has solved the problem Validation
That by replacing the jquery, validation between tabs work
You can add "ignore" in validate function, this worked fine with me
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});
Here my code consists 2 fields(1.select field, 2.input filed),i am displaying data into these fields based on id's (using json data through ajax call)like ($("#allergictoId").val(data.allergy.allergicTo1)).Now my requirement changed like if i click on button (save and add allergy)the copy of that is added to previous code.Once he added clones and clicks on save the entire data will saved on database.Now he clicks again edit i can display the entire data with clones jsp code.Here is my jsp code
<div id="divHideAllergies" class="clone">
<div class="copy">
<div class="col-md-12">
<div class="portlet box carrot ">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-medkit"></i> Allergies
</div>
</div>
<div class="portlet-body form">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Allergy Type:</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-medkit"></i></span>
<select class="form-control" id="allergy_type">
<option selected value="">--Select One--</option>
<option value="Drug">Drug</option>
<option value="Environmental">Environmental</option <option value="Food">Food</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Allergic to:</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-medkit"></i></span>
<input type="text" class="form-control" name="first name" id="allergictoId"/>
</div>
</div>
</div>
</div>
</div><a class="btn btn-lg green pull-right" id="addallergy">Save and Add Allergy <i class="fa fa-plus"></i></a>
<a class="btn btn-lg red" id="removeallergy"><i class="fa fa-times"></i> Cancel</a>
</div>
</div>
</div>
</div>
</div>
I am not sure I can understand your question at 100% but here are some thoughts:
Check the "Processing JSON objects in JSP" question. Here they are using scriptlets but you can do basically the same with JSTL.
Your JSP seems to have lack of JSP code in it - it is just a HTML - and that's fine, but you can consider using JavaScript to process you JSON response since it is so much natural (at least to me).
I am trying to log some input values into an array via jquery and then use those to run a method server side and get the data returned as JSON.
The HTML looks like this,
<div class="segment">
<div class="label">
<label>Choose region: </label>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Nationwide]" id="inp_Nationwide">
</div>
<div class="label ">
<label for="inp_Nationwide">Nationwide</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Lancashire]" id="inp_Lancashire">
</div>
<div class="label ">
<label for="inp_Lancashire">Lancashire</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
</div>
<div class="label ">
<label for="inp_West_Yorkshire">West Yorkshire</label>
</div>
<div class="s"> </div>
</div>
<div class="s"> </div>
</div>
I have this javascript the detect whether the items are checked are not
if($('input.radio:checked')){
}
What I dont know is how to get the values of the input into an array so I can then send the information through AJAX to my controller. Can anyone help me?
You can use jQuery's each() function.
$('input.radio:checked').each(function() {
//put each of the selected check boxes into an array
});
You need to serialize your input with - serialize()
var data = $('#MYFORM').serialize();