I'm trying to get a piece of html, something like:
<tr class="myclass-1234" rel="5678">
<td class="lst top">foo 1</td>
<td class="lst top">foo 2</td>
<td class="lst top">foo-5678</td>
<td class="lst top nw" style="text-align:right;">
<span class="nw">1.00</span> foo
</td>
<td class="top">01.05.2015</td>
</tr>
I'm completely new to JSOUP, and first what came to mind is to get it by the class name but, the thing is that number 1234 is dynamically generated. Is there a way to get it by part of the class name or there is better approach?
Assuming a simple html containing two tr, but only one tr has the class you mentioned, this code shows how to get the tr using CSS selector:
CSS selector tr[class^=myclass] explained:
Select all elements of type "tr" with a class attribute that starts (^) with myclass:
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.select.Elements;
public class Example {
public static void main(String[] args) {
String html = "<html><body><table><tr class=\"myclass-1234\" rel=\"5678\">"
+ "<td class=\"lst top\">foo 1</td>"
+ "<td class=\"lst top\">foo 2</td>"
+ "<td class=\"lst top\">foo-5678</td>"
+ "<td class=\"lst top nw\" style=\"text-align:right;\">"
+ "<span class=\"nw\">1.00</span> foo"
+ "</td>"
+ "<td class=\"top\">01.05.2015</td>"
+ "</tr><tr><td>Not to be selected</td></tr></table></body></html>";
Document doc = Jsoup.parse(html);
Elements selectAllTr = doc.select("tr");
// Should be 2
System.out.println("tr elements in html: " + selectAllTr.size());
Elements trWithStartingClassMyClass = doc.select("tr[class^=myclass]");
// Should be 1
System.out.println("tr elements with class \"myclass*\" in html: " + trWithStartingClassMyClass.size());
System.out.println(trWithStartingClassMyClass);
}
}
doc.select("tr[class~=myclass.*]");
Will select any div where the content of theclass attribute starts with myclass.
Related
I'm trying to figure out how to remove rows from a table. More specifically, rows that user might have ADDED.
Essentially my table gets data from a DB. I have a link "Add Row" that seems to work okay. It'll add a row, and add along the 'save' and 'delete' button on the row. See:
As you can see, the idea is to be able to 'cancel' this newly added row. However, I cannot find simple examples on how to do it, nor can I even seem to trigger the click() of the delete button!
My code:
$(function() {
/* <table id="tableX"> tag to specify different tables to be threated by the Tablesorter */
var $table = $('#table1');
var enabledlbl = localejs.gettext("Enabled");
var disabledlbl = localejs.gettext("Disabled");
var fieldRequiredlbl = localejs.gettext("This field is required!");
var dayslbl = localejs.gettext("days");
var monthslbl = localejs.gettext("months");
var savelbl = localejs.gettext("Save");
var deletelbl = localejs.gettext("Delete");
var accStatuslbl = localejs.gettext("Account Status");
/***************************
* main tablesorter config
***************************/
$table.tablesorter( {
theme : "bootstrap",
widthFixed: true,
/* click on column header a 3rd time to disable sorting, else need to ctrl+click */
sortReset: false,
// widget code contained in the jquery.tablesorter.widgets.js file
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
// the uitheme widget is NOT REQUIRED!
// PROY: eventually also look at the Output Widget
widgets : [ "columns", "zebra"],
widgetOptions : {
// using the default zebra striping class name, so it actually isn't included in the theme variable above
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
zebra : ["even", "odd"],
// class names added to columns (need 'columns' widget) when sorted
columns: [ "primary", "secondary", "tertiary" ]
}
});
/***************************
* Add row function
***************************/
$('.addrow').click(function() {
var row = '' +
'<tr class="newrow">' +
'<td><input type="hidden" name="id" value="0"></td>' +
'<td>'+
'<select name="isActive" id="isActive" class="form-control pl-2" aria-label="' + accStatuslbl + '" aria-describedby="isActiveReq">' +
' <option value="1" selected>' + enabledlbl + '</option>' +
' <option value="0">' + disabledlbl + '</option>' +
'</select>' +
'<div id="isActiveReq" class="pl-1 invalid-feedback">' + fieldRequiredlbl + '</div>' +
'</td>' +
'<td>' +
'<input type="text" name="days" id="days" class="form-control"' +
' placeholder="'+ dayslbl +'"' +
' aria-label="' + dayslbl + '"' +
' aria-describedby="daysReq"' +
' value=""' +
' required/>' +
'<div id="daysReq" class="pl-1 invalid-feedback">' + fieldRequiredlbl + '</div>' +
'</td>' +
'<td>' +
'<input type="text" name="months" id="months" class="form-control"' +
' placeholder="'+ monthslbl +'"' +
' aria-label="' + monthslbl + '"' +
' aria-describedby="monthsReq"' +
' value=""' +
' required/>' +
'<div id="monthsReq" class="pl-1 invalid-feedback">' + fieldRequiredlbl + '</div>' +
'</td>' +
'<td class="text-right text-nowrap">' +
' <input type="submit" name="btnSave" value="' + savelbl + '" style="font-weight: normal; font-size: 1.1em; color: red;">' +
' <input type="button" name="btnDelete" value="' + deletelbl + '" class="delrow" style="font-weight: normal; font-size: 1.1em;">' +
'</td>' +
'</tr>';
$row = $(row),
// resort table using the current sort; set to false to prevent resort, otherwise
// any other value in resort will automatically trigger the table resort.
resort = true;
$table
.find('tbody').append($row)
.trigger('addRows', [$row, resort]);
return false;
});
/***************************
* Delete row function
***************************/
$('.delrow').click(function() {
alert("delete row..");
});
});
<!doctype html>
<html lang="en">
<head>
<!-- jQuery tablesorter related -->
<link href="/css/jquery-tablesorter/theme.bootstrap_4.prestadesk.css" rel="stylesheet" type="text/css">
<script src="/js/jquery-tablesorter/jquery.tablesorter.combined.min.js"></script>
<script src="/js/prestadesk.tablesorter.onem_conditions.js"></script>
</head>
<body>
<table class="table table-striped table-md table-responsive-lg w-auto" id="table1">
<thead class="pt-2">
<th scope="col" data-priority="critical" data-label="ID" data-filter="false" class="colID">ID</th>
<th scope="col" data-priority="critical" data-sorter="false" data-filter="false" class="colStatus" data-label="STATUS" data-placeholder="" class="">STATUS</th>
<th scope="col" data-priority="critical" data-sorter="false" data-filter="false" data-label="DAYS">DAYS</th>
<th scope="col" data-priority="critical" data-sorter="false" data-filter="false" data-label="MONTHS">MONTHS</th>
<th data-priority="critical" data-sorter="false" data-filter="false" data-columnSelector="disable" data-label="SPACER" data-name="SPACER"> </th>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>STATUS</th>
<th>DAYS</th>
<th>MONTHS</th>
<th> </th>
</tr>
<tr>
<td colspan="5" class="pl-3 pt-2 pb-2" style="border-bottom-style: hidden;">
<div class="row ">
<div class="col-auto pr-2">
[ Add Row ]
</div>
<div class="col-auto pl-0 ml-0">
* save the added row before inserting new ones!
</div>
</div>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<!-- ID -->
<td class="pl-3 data-rowheader">
<input type="hidden" name="id" value="1">
1
</td>
<!-- STATUS -->
<td class="text-nowrap">
<select name="isActive" id="isActive" class="form-control pl-2">
<option value="1" selected>Enabled</option>
<option value="0" >Disabled</option>
</select>
</td>
<!-- DAYS -->
<td>
<input type="text" name="days" id="days" class="form-control"
placeholder="days"
value="156"
required/>
</td>
<!-- MONTHS -->
<td>
<input type="text" name="months" id="months" class="form-control"
placeholder="months"
value="18"
required/>
</td>
<!-- FORM BUTTONS -->
<td class="text-right text-nowrap">
<input type="submit" name="btnSave" value="Save" style="font-weight: normal; font-size: 1.1em;">
<input type="button" name="btnDelete" class="delrow" value="Delete" style="font-weight: normal; font-size: 1.1em;">
</td>
</tr>
</tbody>
</table>
</body>
</html>
It seems that the $('.delrow').click(function()... gets properly called if I add the class="delrow" to the main, existing 'delete' buttons, but upon adding a row, even if the new added row button has the 'delrow' class, it doesn't go through the $('.delrow').click even at all.
That is my first problem. Second, as mentioned initially, I can't seem to find a simple example. I am not using any particular widgets here or anything. It's a simple table... Should I ?
I did came across Pager plugin - examples of how to add and remove rows. from https://mottie.github.io/tablesorter/docs/example-pager.html, however, frankly, I do now understand it. Why would I need the pager just to remove a row? And frankly it seems way overkill, no ?
If anyone can shed a light on this... Many thanks! pat
Use delegated binding on the delete button:
$table.on('click', '.delrow', function() {
$(this).closest('tr').remove();
$table.trigger('update');
});
I always use the hard coded way for submitting temp table in MVC
Ex: I have to submit the following temp table after Jquery manipulating
#using (Html.BeginForm("GridSumbit", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table class="Vista" id="table1">
<thead>
<tr>
<th>
col 1
</th>
<th>
col 2
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="submit" value="Submit" />
}
Jquery
function AddRow(val1,val2) {
var col1 = '<input name="col1" type="hidden" value="' + val1 + '" />';
var col2 = '<input name="col2" type="hidden" value="' + val2 + '" />';
$('#table1 tbody:last').append('<tr><td>' + col1 + '</td><td>' + val2 + '</td></tr>');
}
Controller
public ActionResult GridSumbit(List<GridRows> grid)
{
.....
Model
public class GridRows {
public string col1 {set;get;}
public string col2 {set;get;}
}
Is there an alternative way to do this ? more organized way...
For model binder to correctly map the form data to your action method parameter, which is a list of GridRow class, your form element's name attribute value should be like
[{index}].col1
where {index} is the zero based index.
So if you are adding 2 rows, your inputs should be like this
<input name="[0].col1" type="hidden" value="a" />
<input name="[0].col2" type="hidden" value="b" />
<input name="[1].col1" type="hidden" value="c" />
<input name="[1].col2" type="hidden" value="d" />
You can do this by fixing your AddRow method. Here is a simple solution where i am reading the table row length and using that to derive the index. Based upon your HTML markup/client side code, make adjustments to this. All you need is the correct name attribute value in the above format.
function AddRow(val1, val2) {
var index = $('#table1 tr').length-1;
var col1 = '<input name="[' + index+'].col1" type="text" value="' + val1 + '" />';
var col2 = '<input name="[' + index +'].col2" type="text" value="' + val2 + '" />';
$('#table1 tbody:last').append('<tr><td>' + col1 + '</td><td>' + col2 + '</td></tr>');
}
I have this html:
Picture with html code
I need to show in my View : Бавария Майнц -2.25
I try write this:
HtmlDocument htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(
"https://www.parimatch.com/sport/futbol/germanija-bundesliga");
foreach (HtmlNode table in htmlDoc.DocumentNode.SelectNodes("//div[#id='oddsNote']/table/tbody"))
{
foreach (HtmlNode row in table.SelectNodes("tr"))
{
HtmlNodeCollection cells = row.SelectNodes("td");
if (cells == null)
{
continue;
}
foreach (HtmlNode cell in cells)
{
ViewBag.Results += cell.InnerText;
}
}
}
but my table always null. Where I have a mistake?
and what are the other options to output in View except Viewbag?
My HTML:
<div id ="z_container">
<div id = "Z_contentw">
<div id = "OddList">
<form name ="f1" id = "f1">
<div class = "container_grey">
<div class = "wrapper">
<table id = "4529899" class ="dt_twp">
<tbody class ="row1 processed">
<tr class ="bk">
<td> "02/03" <br> "21:00"</td>
<td class ="l"> <a class ="om" id ="a738">Bavaria Mainc</a></td>
<td> <b 3.5></td>
</tr>
</tbody>
<tbody class ="row2 processed">
<tr class ="bk">
<td> "03/03" <br> "19:00"</td>
<td class ="l"> <a class ="om" id ="a739">Roma Milan</a></td>
<td> <b 2.5></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
</div>
I need to show: 02/03 21:00 Bavaria Mainc 03/03 19:00 Roma Milan
Your xpath has an id that is not in the html you provided other than that
If you want the text in one line as you showed then it can be
var text = string.Join(" ", doc.DocumentNode.SelectNodes("//tr[#class='bk']//text()[normalize-space()]").Select(t=>t.InnerText));
If you want to model the data then use the indices of the td, the first one has the time the second has the teams so create a simple model
class FootballMatch
{
public string Time;
public string Teams;
}
and get the data using the following
var matches = doc.DocumentNode.SelectNodes("//tr[#class='bk']").
Select(tr => new FootballMatch() {
Time = string.Join(" ", tr.SelectNodes("./td[1]//text()").Select(t => t.InnerText)),
Teams = tr.SelectSingleNode("./td[2]//text()[normalize-space()]").InnerText,
});
I'm using dynamic finders to search, but when I search for fields in other tables there is an error.
This is my action
def searchResults ={
if (request.method == 'POST') {
def criteria = Incident.createCriteria()
def results = criteria {
and {
like('status', '%' + params.status + '%')
like('severity', '%' + params.severity + '%')
assignmentGroup {
like('groupId', '%' + params.assignmentGroup + '%')
}
}
}
render(view:'list', model:[ incidentInstanceList: results ])
}
This is my view where I let the user select values:
<g:form action="searchResults" controller="incident">
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top" class="name">
<label for="status"><g:message code="incident.status.label" default="Status" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'status', 'errors')}">
<g:select name="status" from="${incidentInstance.constraints.status.inList}"
value="${incidentInstance?.status}" valueMessagePrefix="incident.status" />
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="severity"><g:message code="incident.severity.label" default="Severity" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: incidentInstance, field: 'severity', 'errors')}">
<g:select name="severity" from="${incidentInstance.constraints.severity.inList}"
value="${incidentInstance?.severity}" valueMessagePrefix="incident.severity" />
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="assignmentGroup"><g:message code="incident.assignmentGroup.label"
default="Assignment Group" /></label>
</td>
<td valign="top"
class="value ${hasErrors(bean: incidentInstance, field: 'assignmentGroup', 'errors')}">
<g:select id="groupSelect" name="assignmentGroup.id" from="${app.Usergroup.list()}" optionKey="id"
value="" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="buttons">
<span class="button"><g:submitButton name="searchResults" class="searchResults" value="searchResults" /></span>
</div>
</g:form>
For the first two values it is working fine. But with the assignmentGroup there is an error.
Error 500: Executing action [searchResults] of controller [app.IncidentController] caused exception:
IllegalArgumentException occurred calling getter of app.Usergroup.id
Incident class:
package app
class Incident {
Usergroup assignmentGroup
User assignId
String severity
String status
static constraints = {
servity(inList:["low","high"])
status(inList:["Open","Closed","WIP"])
createdOn()
assignmentGroup()
}
}
Usergroup class:
package app
class Usergroup {
String groupId
static hasMany = [members : User]
static belongsTo = User
static mapping = {
table "group_"
}
static constraints = {
groupId(blank:false)
}
String toString (){ groupId }
}
Did you try criteria something like that:
def results = criteria {
and {
like('status', '%' + params.status + '%')
like('severity', '%' + params.severity + '%')
assignmentGroup {
like('groupId', '%' + params.assignmentGroup + '%')
}
}
}
I think the problem is that you are using 'like' for the assignmentGroup. I would
try something like...
def results = criteria {
like('status', '%' + params.status + '%')
like('servity', '%' + params.servity + '%')
eq('assignmentGroup', params.assignmentGroup)
}
Christian
My problem is this: I want to create a grails domain instance, defining the 'Many' instances of another domain that it has. I have the actual source in a Google Code Project but the following should illustrate the problem.
class Person {
String name
static hasMany[skills:Skill]
static constraints = {
id (visible:false)
skills (nullable:false, blank:false)
}
}
class Skill {
String name
String description
static constraints = {
id (visible:false)
name (nullable:false, blank:false)
description (nullable:false, blank:false)
}
}
If you use this model and def scaffold for the two Controllers then you end up with a form like this that doesn't work;
My own attempt to get this to work enumerates the Skills as checkboxes and looks like this;
But when I save the Volunteer the skills are null!
This is the code for my save method;
def save = {
log.info "Saving: " + params.toString()
def skills = params.skills
log.info "Skills: " + skills
def volunteerInstance = new Volunteer(params)
log.info volunteerInstance
if (volunteerInstance.save(flush: true)) {
flash.message = "${message(code: 'default.created.message', args: [message(code: 'volunteer.label', default: 'Volunteer'), volunteerInstance.id])}"
redirect(action: "show", id: volunteerInstance.id)
log.info volunteerInstance
}
else {
render(view: "create", model: [volunteerInstance: volunteerInstance])
}
}
This is my log output (I have custom toString() methods);
2010-05-10 21:06:41,494 [http-8080-3] INFO bumbumtrain.VolunteerController - Saving: ["skills":["1", "2"], "name":"Ian", "_skills":["", ""], "create":"Create", "action":"save", "controller":"volunteer"]
2010-05-10 21:06:41,495 [http-8080-3] INFO bumbumtrain.VolunteerController - Skills: [1, 2]
2010-05-10 21:06:41,508 [http-8080-3] INFO bumbumtrain.VolunteerController - Volunteer[ id: null | Name: Ian | Skills [Skill[ id: 1 | Name: Carpenter ] , Skill[ id: 2 | Name: Sound Engineer ] ]]
Note that in the final log line the right Skills have been picked up and are part of the object instance. When the volunteer is saved the 'Skills' are ignored and not commited to the database despite the in memory version created clearly does have the items. Is it not possible to pass the Skills at construction time? There must be a way round this? I need a single form to allow a person to register but I want to normalise the data so that I can add more skills at a later time.
If you think this should 'just work' then a link to a working example would be great.
If I use the HTML Select then it works fine! Such as the following to make the Create page;
<tr class="prop">
<td valign="top" class="name">
<label for="skills"><g:message code="volunteer.skills.label" default="Skills" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: volunteerInstance, field: 'skills', 'errors')}">
<g:select name="skills" from="${uk.co.bumbumtrain.Skill.list()}" multiple="yes" optionKey="id" size="5" value="${volunteerInstance?.skills}" />
</td>
</tr>
But I need it to work with checkboxes like this;
<tr class="prop">
<td valign="top" class="name">
<label for="skills"><g:message code="volunteer.skills.label" default="Skills" /></label>
</td>
<td valign="top" class="value ${hasErrors(bean: volunteerInstance, field: 'skills', 'errors')}">
<g:each in="${skillInstanceList}" status="i" var="skillInstance">
<label for="${skillInstance?.name}"><g:message code="${skillInstance?.name}.label" default="${skillInstance?.name}" /></label>
<g:checkBox name="skills" value="${skillInstance?.id.toString()}"/>
</g:each>
</td>
</tr>
The log output is exactly the same! With both style of form the Volunteer instance is created with the Skills correctly referenced in the 'Skills' variable. When saving, the latter fails with a null reference exception as shown at the top of this question.
Hope this makes sense, thanks in advance!
Gav
Replace your create.gsp <g:checkbox...> code by:
<g:checkBox name="skill_${skillInstance.id}"/>
Then inside the save action of your controller, replace def volunteerInstance = new Volunteer(params) by :
def volunteerInstance = new Volunteer(name: params.name)
params.each {
if (it.key.startsWith("skill_"))
volunteerInstance.skills << Skill.get((it.key - "skill_") as Integer)
}
Should work. (code not tested)
I would reader send id list of your has many elements because this can be easily assigned by default in Grails.
Your .gsp should look like:
<g:each in="${skills}" var="skill">
<input type="checkbox"
name="skills"
value="${skill?.id}"
</g:each>
and in your controller you can simply stores the value like this:
person.properties = params
person.validate()
person.save()
It's pretty easy, isn't it? :-)
Grails does not provide data-binding support when you use a checkbox and you want to bind ToMany associations. At least, up to version 2.2.0
Workaround ?
1º option - Write gsp code which behaves like a select component
<g:each var="skillInstance" in="${skillInstanceList}">
<div class="fieldcontain">
<g:set var="checked" value=""/>
<g:if test="${volunteerInstance?.skills?.contains(skillInstance)}">
<input type="hidden" name="_skills" value="${skillInstance?.id}"/>
<g:set var="checked" value="checked"/>
</g:if>
<label for="${skillInstance?.name}">
<g:message code="${skillInstance?.name}.label"
default="${skillInstance?.name}" />
</label>
<input type="checkbox" name="skills" value="${skillInstance?.id}"
${checked} />
</div>
</g:each>
2º Create your own TagLib
/**
* Custom TagLib must end up with the TagLib suffix
*
* It should be placed in the grails-app/taglib directory
*/
class BindingAwareCheckboxTagLib {
def bindingAwareCheckbox = { attrs, body ->
out << render(
template: "/<TEMPLATE_DIR>/bindingAwareCheckboxTemplate.gsp",
model: [referenceColletion: attrs.referenceColletion,
value:attrs.value])
}
}
Where <TEMPLATE_DIR> should be relative to the /grails-app/views directory. Furthermore, templates should be prefixed with _.
Now you can use your custom TagLib as follows
<g:bindingAwareCheckbox
referenceCollection="${skillInstanceList}"
value="${volunteerInstance?.skills}"/>
Once done, binding process will occur automatically. No additional code needed.
GSP
<g:checkBox name="skills" value="${skillInstance.id}" checked="${skillInstance in volunteerInstance?.skills}"/>
Groovy
def volunteerInstance = new Volunteer(params).save()
def skills = Skill.getAll(params.list('skills'))
skills.each{ volunteerInstance.addToSkills(it).save() }