How can I pass HTML table data from a view to controller in grails? - grails

I'm quite new in grails. I'm creating an SMS send module for my project. Here I'm getting some contact number from the user and displaying it inside a dynamically created 'TD' value. Now I want to pass this 'TD' values as a list to my controller.
def controller(){
def var = params.name
}
won't work here as it's not a field value.

Get all table td into array comma separated contact numbers.
Both ways added in the below code. First, where the contact number is last column. And the second, where all td value have class name.
// First way
var contactNumbers= []
$("#example tbody tr").each(function() {
contactNumbers.push($(this).find("td:last-child").html());
});
console.log("If Contact number column is on last"+contactNumbers.join())
// Second way
var contactNumbers1= []
$(".cnTd").each(function(i){
contactNumbers1.push($(this).text())
})
console.log("Contact numbers by class"+contactNumbers1.join())
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table" id="example">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td class="cnTd">5675677567</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>90987786756</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>3455657457</td>
</tr>
</tbody>
</table>
</div>
Now you you send the collected values to controller using hidden form value or by sending ajax request or by query params. At contoller side simply use split(',') or tokenize(',') method to get list of numbers.
Hope this will helps you.

Related

How to retrieve data from a table in rails

I have a table that stores all billing history for each user. I need to display certain fields from this table in an invoice for the user. When I call the variables in my view I get a 'undefined method error'.
Here is a small example of what i have in the view.
<tbody>
<tr>
<td>
Invoice Number
</td>
<td>
<%= #billing_history.id %>
</td>
</tr>
<tr>
<td>
Issue Date
</td>
<td>
<%= #billing_history.created_at.strftime('%d/%m/%Y' ) %>
</td>
</tr>
<tr>
<td>Tax Number</td>
<td>
######
</td>
</tr>
</tbody>
Here is my controller
def invoice
#company = current_user.company
#billing_history = BillingHistory.find_by(id: params[:billing_id])
# raise 'not for you' if #billing_history.company != #company.id
render pdf: 'billings/invoice'
end
Here is my full error message
> `ActionView::Template::Error (undefined method `id' for nil:NilClass):
4: <meta charset="UTF-8" />
5: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6: <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7: <title>Invoice <%= #billing_history.id %></title>
8: <style>
`
try using byebug place it after
#billing_history = BillingHistory.find_by(id: params[:billing_id]) this line
then check what is the value of #billing_history if it's nil then use The Safe Navigation Operator (&.) like #billing_history&.id ,that won't raise any error.

Jenkins pipeline script to send customized email

I've been trying to use my customized content for the Jenkins build emails. I got stuck when I am trying to change the contents of html dynamically based on the results from previous stages. I am passing the contents of an html to a variable as below and when i try to access the hash list in that, the value of arrays(key and value of an array) are not getting printed.
def content = """\
<html>
<head>
<style>
</style>
</head>
<body>
<table style=" background-color:lightgreen; width:900px;margin:0;">
<tr>
<th>Build Results :</th>
</tr>
<tr>
<td>project Name : </td>
<td>project URL : </td>
</tr>
<tr>
<td>Build Number : ${var3} </td>
</tr>
<tr>
<td>Buid URL :</td>
</tr>
</table>
<table style=" background-color:lightblue; width:900px;margin:0;">
<tr>
<% stagearray.each { item ->
def key=item.key;
def value=item.value; %>
<td>${key}</td>
<td>${value}</td>
<% } %>
</tr>
this is the sample
<tr><td>This is test line </td></tr>
</table>
</body>
</html>
"""
Any help would be highly appreciated.

JSPDF-Autotable colspan/rowpan issue

I have an html table with rowspan/colspan.I am using jspdf and jspdf-autotable for exporting that html table to pdf. However the pdf getting saved has a table which doesn't contain rowspan/colspan in actual table.How to do colspan/rowspan using jspdf-autotable?
My current code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<script type="text/javascript">
function myFunction()
{
var doc = new jsPDF('p', 'pt');
var res = doc.autoTableHtmlToJson(document.getElementById("my-table"));
doc.autoTable(res.columns, res.data, {startY: 40});
doc.save("Report.pdf");
}
</script>
</head>
<body>
<table border='1' id="my-table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='2'>D</td>
<td colspan='2'>$100</td>
</tr>
<tr>
<td >E</td>
<td >F</td>
</tr>
</tbody>
</table>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
EDIT: Version 3 of the library supports rowspans and colspans, no hacks needed
The plugin doesn't support to automatically port colspans and rowspans from html. However you can do it manually. Check out this example (a demo is here).
In the meantime the plugin seems to support parsing the colspans from HTML. This should work:
<td colspan="2">Colspan</td>

Best way to render a map in Grails

I am new to groovy and grails, hence this simple doubt. I have a map like this: [0:[A,B,C,D], 1:[a,b,c,d]]. I want to display it as follows: A: aB:bC:cD:d How do you display the data column wise? The .gsp I have now is shown below and all it does is display the values row wise.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<title>Parsed Map</title>
</head>
<body>
<table>
<g:each in="${myMap}" var="element">
<tr>
<g:each in="${element.value }" >
<th>${it}</th>
</g:each>
</tr>
</g:each>
</table>
</body>
</html>
Pointing me in right direction for understanding maps in groovy will also be appreciated. Thank you.
Assuming that you have already validated that the columns and header lists have the same number of elements, you could do something like this...
<html>
<head>
<meta name="layout" content="main">
<title>Parsed Map</title>
</head>
<body>
<table>
<g:each var="heading" in="${headings}" status="counter">
<tr>
<th>${heading}</th>
<td>${values[counter]}</td>
</tr>
</g:each>
</table>
</body>
</html>
I assume your example is a simplified version of your real problem. Depending on what you are really trying to do, you have a number of options. A simple thing might be like this (organize the table however you like, but this should give you the idea...):
// grails-app/controllers/com/demo/DemoController.groovy
package com.demo
class DemoController {
def index() {
// presumably you got this Map from somewhere and it isn't hardcoded here
def someMap = [0:['A', 'B', 'C', 'D'], 1:['a', 'b', 'c', 'd']]
def headings = someMap[0]
def values = someMap[1]
[headings: headings, values: values]
}
}
// grails-app/views/demo/index.gsp
<html>
<head>
<meta name="layout" content="main">
<title>Parsed Map</title>
</head>
<body>
<table>
<tr>
<g:each var="heading" in="${headings}">
<th>${heading}</th>
</g:each>
</tr>
<tr>
<g:each var="value" in="${values}">
<th>${value}</th>
</g:each>
</tr>
</table>
</body>
</html>

Why is this not loading properly?

OK, so I've looked at the getting started examples on the documentation available at: http://mottie.github.io/tablesorter/docs/index.html#Demo
I am trying the to do the basic example provided in the documentation, however my table does not load with the tablesorter features (i.e. the sort icons on the header, or clickable header columns) as the online version demonstrates. What am I doing wrong?...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Something</title>
<!-- load tableSorter theme -->
<link href="http://mottie.github.io/tablesorter/css/theme.default.css" rel="stylesheet">
<!-- load jQuery and tableSorter scripts -->
<script type="text/javascript" src="./includes//jquery-2.1.0.js"></script>
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script>
<!-- load tableSorter widgets -->
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascropt">
$(document).ready(function(){
$("table").tablesorter({
theme : 'blue',
widgets : ['zebra','columns'],
sortList: [[0,0]],
debug : true,
widthFixed: false,
showProcessing : true
});
});
</script>
</head>
<body>
<table class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
It looks like the theme option is not being set. When you initialize tablesorter without any options:
$("#myTable").tablesorter();
The "default" theme is set, so make sure to include the "theme.default.css" file; but since it looks like you are loading the "blue" theme stylesheet, initialize the plugin as follows:
<script type="text/javascropt">
$(function(){
$("#myTable").tablesorter({
theme: "blue"
});
});
</script>
Now, from looking at the blue theme file name, it appears that it might be the original blue theme meant for tablesorter v2.0.5 ("/blue/style.css"). I would venture to guess that the tablesorter being used here is from my fork of tablesorter, so make sure to load the file named "theme.default.css".

Resources