I have a template with parameter like this :
#(people: List[models.Person])
<html>
<head>
</head>
<body>
<table class="centered" id="table_people">
<thead>
<tr class="table_header">
<th></th>
<th class="people_column">Name</th>
<th class="people_column">Active</th>
</tr>
</thead>
<tbody>
#for(p <- people) {
<tr>
<td><button id="timesheet_view_" >View</button</td>
<td><b>#p.getName()</b></td>
<td>#p.isActive()</td>
</tr>
}
</tbody>
</table>
That code shows a list of people. And now, i wanna when click on button view, it shows information of people. To do that, i have to write something like that:
<script>
$( "#timesheet_view_<%= people[i].id %>" )
.button()
.click(function() {
people = '<%= people[i].name %>';
showTimeSheet('current', '<%= people[i].name %>');
})
</script>
But i can't find how to get value people parameter of template in Javascript. I try to use # character, but it doesn't work.
First, you have to fix your HTML code:
<td><button id="timesheet_view_" >View</button</td>:
close the button element correctly: </button with a '>'.
Second, you have to give every button a unique ID:
Your code:
#for(p <- people) {
<tr>
<td><button id="timesheet_view_" >View</button</td>
<td><b>#p.getName()</b></td>
<td>#p.isActive()</td>
</tr>
}
Try it with:
#for(p <- people) {
<tr>
<td><button id="timesheet_view_#p.id">View</button></td>
<td><b>#p.getName()</b></td>
<td>#p.isActive()</td>
</tr>
}
<script>
$(document).ready(function() {
// There are better ways to do this, but it's just for your example
#for(p <- people) {
$("#timesheet_view_#p.id").click(function(e) {
... // your javascript code here
});
}
});
</script>
In my opinion it's better to use a link here (instead of a button), because for every button you need to code extra javascript for the onclick event. Try it with a link and Play! will do the work for you:
#for(p <- people) {
<tr>
<td><a class="btn" href="#routes.Application.view(p.id)">View</a></td>
<td><b>#p.getName()</b></td>
<td>#p.isActive()</td>
</tr>
}
Btw, if you use Twitter Bootstrap you can use class="btn" and your link looks like a button.
Start your Play! application and have a look in the HTML source code. You will see your code <button id="timesheet_view_#p.id">View</button> will looks like this:
<button id="timesheet_view_1">View</button>
<button id="timesheet_view_2">View</button>
...
<button id="timesheet_view_9">View</button>
Hope this helps.
Best regards,
gfjr
You can't do it that way. Javascript is running client-side whereas Play is running server-side.
At the time your Javascript is running, the page has already been rendered and Play has done it's part.
What you can do is to capture relevant data from people and put it in data attributes.
<tbody>
#for(p <- people) {
<tr data-people-id="#p.getId()" data-people-name="#p.getName()">
<td><button class="timesheet_view" >View</button</td>
<td><b>#p.getName()</b></td>
<td>#p.isActive()</td>
</tr>
}
</tbody>
And in your script you can get the data attributes.
<script>
$( ".timesheet_view" )
.button()
.click(function() {
var row = $(this).closest("tr");
var peopleId = row.data("peopleId");
var peopleName = row.data("peopleName");
// Do whatever you want with this data...
// Not sure how the showTimeSheet is working so leave it up to you
//showTimeSheet('current', '<%= people[i].name %>');
});
</script>
Related
I want to get a data from listing and retrieve to popup.. when I use getElementById, it will only get a single id from another input. not from listing that i want.. so, I've come an idea to use array.. but I don't know how.. I'm using Java Play Framework
here is my code..
display.html
<script>
function openModifySchedule(staffId) {
if (!checkRequiredField()) {
alert("There Is Error(s) In The Form. Please Fix It Before Proceed.");
return;
}
var staffId = document.getElementById("staffId").value;
if (staffId == "") {
alert("Please Select Doctor Before Proceed");
return;
}
var url = "/DoctorSchedules/modifySchedulePopup?staffId=" + staffId;
mywindow = window.open(url,"mywindow","location=no,resizable=1,width=700,height=650,menubar=no,center=yes");
mywindow.moveTo(420,100);
}
</script>
<input type="hidden" id="staffId" name="staffDetails.staffId" value="${staffDetails?.staffId}">
<tbody>
#{list items:staffScheduleList , as:'stffSchedule'}
<tr id="list" align="center">
<td></td>
<td id="scheduleDate">${stffSchedule.scheduleDate}</td>
<td id="staffId"><a onClick="openModifySchedule()" href="#">${stffSchedule.staffId}</a></td>
<td id="staffName">${stffSchedule.staffName}</td>
<td id="deptName">${stffSchedule.deptName}</td>
<td></td>
<td></td>
<td></td>
<td id="contactNo">${stffSchedule.contactNo}</td>
</tr>
#{/list}
</tbody>
here is the function in controller..
display.java
public static void modifySchedulePopup(String staffId){
StaffDetails staffDetails = StaffDetails.find("byStaffId", staffId).first();
StaffSchedule staffSchedules = StaffSchedule.find("byStaffId", staffId).first();
renderTemplate("DoctorSchedules/doctorScheduleModifyPopup.html", staffDetails,staffSchedules);
}
hope someone can explain.
In the DOM, no two elements may have the same id attribute. Since all of the "td" elements in your table have id="staffId", getElementById() is free to return any one of them.
Since Play! comes with JQuery, you might was well use that instead of straight JavaScript (it's much easier). Briefly, you attach the same "click" event handler to all of the links and the click event handler knows which element was being clicked.
Here's simple snippet that demonstrates this:
<script>
$(function() {
$(".staff-id").click(function() { // attach the click event handler
var staffId = $(this).text();
alert(staffId); // open your new window here
});
});
</script>
#{list items:staffScheduleList, as:'stffSchedule'}
<tr id="list" align="center">
<td></td>
<td>${stffSchedule.scheduleDate}</td>
<td><a class="staff-id" href="#">${stffSchedule.staffId}</a></td>
<td>${stffSchedule.staffName}</td>
<td>${stffSchedule.deptName}</td>
<td></td>
<td></td>
<td></td>
<td id="contactNo">${stffSchedule.contactNo}</td>
</tr>
#{/list}
I have the following code, it's part of a Java servlet, html, javascript/jQuery web app.
<Table border=1>
<Tr>
<Td><button id=Current_1 type=button></button></Td>
<Td><button id=Current_2 type=button></button></Td>
<Td><button id=Current_3 type=button></button></Td>
<Td><button id=Current_4 type=button></button></Td>
<Td><button id=Current_5 type=button></button></Td>
<Td><button id=Current_6 type=button></button></Td>
</Tr>
</Table>
What can I do on the Java servlet side to get all the text in each of the buttons, I'm thinking about having another submit button when it's clicked, some jQuery gets all those buttons and loop through them to get each button's text.
The text in those buttons originally have nothing, but during the app user can click and change values, so at the end I need to give user a way to save the content on those buttons and pass them to the servlet, what's the best way to achieve that, any sample code ? But what I need help the most is how to get hold of the buttons and loop through them to get their text ?
Edit : Maybe I didn't express it very clearly.
If Button_1 has text "B1"
Button_2 has text "B2"
...
Button_6 has text "B6"
The result I expect after user click another submit button is : B1B2B3B4B5B6
fairly simple to make array of objects using jQuery
var buttonData = $('button[id^="Current"]').map(function(){
return {id: this.id, text: $(this).text()};
}).get();
Produces:
[
{id:"Current_1", text: "Button #1 Text"},
{id:"Current_2", text: "Button #2 Text"},
....
{id:"Current_6", text: "Button #6 Text"}
]
A class selector would probably be cleaner or target them from selector on row
EDIT: If all you want is combined text with no delimiters you can actually get the whole collection of text without even looping the elements.
$('button[id^="Current"]').text();
for most value getters in jQuery this approach will only return the vlue of first element but with text() it returns all
As you mentioned you can use another button to get the text of each of the button. Just use a common class and loop through them
$(document).ready(function(){
$("#Current_7").click(function(){
$(".myButton").each(function(){
console.log($(this).text())
})
})
})
WORKING EXAMPLE
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('button[id^="Current"]').each(function(){
console.info($(this).attr('id') + '----' + $(this).text())
});
});
</script>
</head>
<body>
<Table border=1>
<Tr>
<Td><button id=Current_1 type=button>button_1</button></Td>
<Td><button id=Current_2 type=button>button_2</button></Td>
<Td><button id=Current_3 type=button>button_3</button></Td>
<Td><button id=Current_4 type=button>button_4</button></Td>
<Td><button id=Current_5 type=button>button_5</button></Td>
<Td><button id=Current_6 type=button>button_6</button></Td>
</Tr>
</Table>
</body>
</html>
In my report design's layout I have a label, table and HTML button.
How do I get values from tables, labels, etc. using the HTML button's OnClick event?
The table and label can't be accessed easily using "elementname".getValue(); Am I missing something?
Thanks.
Alright, this solution can be modified to how your actual table structure looks like, and what actual information you need. You can do this many different ways, but this solution utilizes jQuery to get the label element and also the 'td' cells from a Table and Twitter Bootstrap for styling. You can see a jsFiddle here that I made to visualize this. If it doesn't fit your needs, I would suggest looking at the jQuery API to modify how exactly you should get the data you need.
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<label id="label">This is my Table</label>
<table class="table table-striped">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter#mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
</tr>
</tbody>
</table>
<button type="button" id="getInfo" class="btn btn-primary">Get Info</button>
<br/>
<p>Your Results Object once you hit Get Info button</p>
<div id="results"></div>
<!-- Get jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
This is the Javascript:
// This solution uses jQuery
// A $( document ).ready() block.
$( document ).ready(function() {
// declares an object literal named 'results' to save future results
// declares an array literal named 'tableData' to save table data
var results = {},
tableData = [];
// this executes once you click
// the HTML button with ID '#getInfo'
$('#getInfo').click(function() {
//loop through each 'td' cell which has information
$('td').each(function() {
var value = $(this).text();
tableData.push(value);
});
// assign the label to object 'results' with property label
results.label = $('#label').text();
results.tableData = tableData;
document.getElementById("results").innerHTML =
JSON.stringify(results);
});
});
I've been trying to fix a problem in my app for a couple of days now and I can't figure out what's happening.
I'm developing a MVC 4 application. I have a view in which there's a div that I load with more html with an ajax call that is executed on the $(function() { ... });. That ajax call works fine.
Problems start when I make the second ajax call. I paste the code below :-
In the main view :-
<div class="body" id="loadedData">
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
loadData("#Url.Action("Authorizations","User", new { id = Model.ID })");
});
function loadData(url){
$.ajax({
type: 'GET',
url: url,
success: function (data) {
$("#loadedData").html(data);
}
});
}
</script>
And the partial view that is loaded in the div it's this:
#if (ViewBag.UserAuths != null){
<table>
<tr>
<th>
Operations
</th>
<th></th>
</tr>
#foreach (var prod in ViewBag.UserAuths){
<tr>
<td>
#prod[0]
</td>
<td>
Remove
</td>
</tr>
}
</table>
}
The problem happens when I click on the link in the HTML that's loaded by ajax (Remove). When i click, the page 'blinks' but nothing happens. I've put a breakpoint in the RevokeAccess function in UserController and it never stops.
Please help!
Edit:
There's other thing, when i click on the link, in the Chrome console it's shown a "Uncaught SyntaxError: Unexpected token )" message, but it disappears very quickly, i don't know why.
As you are using jQuery don't use inline events. Bind click event using jQuery. As you are fetching Partial View you can use .load() which is much simpler.
Script
<script type="text/javascript">
$(function(){
$("#loadedData").load("#Url.Action("Authorizations","User", new { id = Model.ID })");
$("#loadedData").on('click', '.anchor', function(event){
event.preventDefault();//Stop default action
$("#loadedData").load(
$(this).data('url'), //Url
{ id: $(this).data('id'), op : $(this).data('op')}, //Parameters
function(){
//Perform any action if any
}
);
})
});
</script>
Change Your Partials as
#if (ViewBag.UserAuths != null){
<table>
<tr>
<th>
Operations
</th>
<th></th>
</tr>
#foreach (var prod in ViewBag.UserAuths){
<tr>
<td>
#prod[0]
</td>
<td>
<a class='anchor' href="#" data-url='#Url.Action("RevokeAccess", "User")' data-id="#ViewBag.UserID" data-op="#Int32.Parse(prod[1])">Remove</a>
</td>
</tr>
}
</table>
}
I want to add a table to my website with jquery´s append function when the user hovers over the image $("#dot0003"). Dreamweaver already tells me that there is a syntax error but I don't understand where.
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('
<table id="table1" class="info0004" border="4">
<tr>
<td>roomnumber</td>
<td>200</td>
</tr>
<tr>
<td>number of bathrooms</td>
<td>2</td>
</tr>
<tr>
<td>number of beds</td>
<td><img src="_index/_dots/dot.gif" width="20" height="20"></td>
</tr>
</table>')
})
})
Any help appreciated!
Are you sure this is what you're trying to do? Meaning, when you hover over dot0003, it's going to keep trying to append this data. See the fiddle here.
With that said, your issue is with your spaces. See the fiddle above. Either remove your spaces or build your string like:
var myContent = '<table id="table1" class="info0004" border="4">'
myContent += '<tr>'
...
But this produces invalid HTML markup as your adding tables in your table like such:
<table>
<tr><td></td></tr>
<table>
...
I think you should use jQuery's after method instead of append.
Good luck.
Your adding dynamic table syntax has a space so remove space then run
You can try to run using simple dynamic div
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('<div>ss</div>')})})
But when you will write syntax with space it will show error
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('<div>ss
')})})
Try with this code after removing extra space
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('<table id="table1" class="info0004" border="4"> <tr><td>roomnumber</td><td>200</td></tr> <tr><td>number of bathrooms</td> <td>2</td></tr><tr><td>number of beds</td> <td><img src="_index/_dots/dot.gif" width="20" height="20"></td></tr></table>')
})
})