How to have clickable table row send parameters to Struts action class? - javascript

I have a HTML table where each row is clickable. Here is how I have them clickable:
$(".clickable-row").click(function() {
window.document.location = "${pageContext.request.contextPath}/ActionClass";
});
<tr class="clickable-row">
<td class="text-left">some parameter</td>
...
</tr>
I am not sure how to pass the data from the clicked table row to the struts action since I am using a Javascript function to handle the click/navigation. In the past I was able to use something like:
<s:url action="ActionClass" var="actionLink" >
<s:param name="param1">${param1}</s:param>
<s:param name="param2">${param2}</s:param>
</s:url>
<s:a href="%{actionLink}">go to Action</s:a>
But I can't use the <s: tags inside the JS function. What is the best way to go about this?
Not really a duplication question. This was more specific how to get a table row parameter sent to an action by a clickable row. I was able to get a parameter to send by a column button, but never received an answer that helped with a clickable row.

You can create a column with hyper link that passes parameters to action like:
<td>
<s:a href="test.action?param1=%{param1}><s:property value="param1"/></s:a>
</td>

I decided to add a select button column that submits a form for the row the button is on.

Related

How To Add Row Dynamic with Rowspan in Table with JavaScript

I have 2 add button. First add button on header, click this button will add 1 new row. Second add button in table (such as image on my post), click this button will add new row such as image my post. I want add row in table such as below image, but i haven't thought of a solution yet. Hope to be got your helps!
View Image Here
The insertRow() method allows you to add rows to a <table> and returns a reference to a new row. Adding that to an onClick() function should be easy! :)
Here's the relevant information on Mozilla's site .
To solve this, you have to add a new table inside td, like this
function addNewRow() {
let table = document.getElementById("add");
table.innerHTML += '<table><tr><td><b>This is a test</b></td></tr></table>';
}
<html>
<body>
<button onclick="addNewRow()">Add</button>
<table id='my-table'>
<tr>
<td>This is one td</td>
<td id='add'>This is another td</td>
</tr>
</table>
</body>
</html>

Hiding specific rows in a table until an Ajax request completes

I have a specific rows in a HTML table that I do not want to be displayed when the page loads.
There will be an Ajax request made after the page loads that returns values that would populate the table rows.
So I would want to display these rows only after the Ajax returns with a response and until then I want to display a 'loading' message in place of these rows.
I tried adding these rows in a div and used jquery's show()/hide() appropriately but that didn't work.
I'm new to JS and jQuery, so any help is appreciated.
<html>
<body onload="my_ajax_func()">
<table>
.
. <!-- Other rows that will be displayed-->
.
<tr>
<th colspan=2 class="custHeader">High Value Flags</th>
</tr>
<tr>
<td align=right><div id="loading_msg"><b>Loading..</b></div></td>
</tr>
<tr>
<td id="val_header" class=caption>Value Tier: </td><td id="val"> </td>
</tr>
<tr>
<td id="hypo_val_header" class=caption>Hypo Value Tier: </td><td id="hypo_val"> </td>
</tr>
<tr>
<td id="service_type_header" class=caption>Service Type: </td><td id="service_type"></td>
</tr>
</table>
</body>
<script>
function my_ajax_func() {
//retrieves values for table rows
//on success calls another func, say display_data
}
function display_data() {
$("loading_msg").hide();
document.getElementById("val").innerHTML = <some_value>;
document.getElementById("hypo_val").innerHTML = <some_value>;
document.getElementById("service_type").innerHTML = <some_value>;
}
</script>
</html>
Basically, I want a div for 'loading' message which would be displayed by default. Once Ajax request completes successfully, that div must be hidden and another div (with these 2 table rows) must be displayed in it's place.
To hide your rows at page loading, just create two css classes like this:
.displayNone{
display:none;
}
.displayBlock{
display:block;
}
and use this class in your rows
<tr class="displayNone"></tr>
So when page loads, this rows will be hidden.
So, in ajax success put this js:
$(".displayNone").removeClass("displayNone").addClass("displayHidden");
Then, download some loading gif image like this:
http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif
After that, wrap this img tag in a div with "displayNone" class too, and use inverse way of your rows:
Before your ajax call, remove "displayNone" class from it, and put "displayBlock".
Finally, in ajax success, remove "displayBlock" class from div, and put back "displayNone" to hide it again.
Hope it help.
Some doubts, please let me know.
Regards
You Can use .done() method
$.post( "example.php", function() {
alert( "success" );
})
.done(function() {
alert( "ajax request completed" );
})
If you only need to change text values in the rows, you might be able to get away with a class value of "display: none" in CSS for each complete row, until you are ready to update it. But you are going to have to have some unique ID for each, or way of counting children, in order to find that row again when you need to update it. Also, your table needs to be valid without those rows.
The other way to handle this would be to just add new rows dynamically. If you do this, remember the rows do not exist in DOM until you insert them there, and so you can't reference them before.
as mentioned above ajax has some methods like before and done where you have opportunity to show and hide your elements.
<table>
<thead>
<tr><th>header 1</th><th>header2</th><th>header3</th><tr>
<tr id="loadingrow"><th colspan=3>Loading Data...</th><tr>
</thead>
<tbody>....
$.ajax({
url: "http://fdafdas",
beforeSend: function( ) {
$('#loadingrow').show();
}
})
.done(function( data ) {
$('#loadingrow').hide();
//load your data
}
});

I need to concatenate url with sharepoint list tr id

I need to extract the ID from ms-unselectedtitle which is a child element of ms-vb-title in a SharePoint 2007 list. This would then be concatenated with a url to open a new window. The window needs to open with the window.open() method so i can control the size and turn off menus. Creating a link in the list by calculated column won't work as it just opens a new window in a tab with all menus. I found code here ("How to get ID value from tables nested in other tables with jQuery") that is close but it returns an array of ID's, not by table row. I'm new to javascript/jquery so I'm a bit stuck. Note that the ID I'm using is embedded in the "Title" field of the list. Html section is here...
<TD class=ms-vb-title height="100%" sizset="50" sizcache011076027996994381="6">
<TABLE onmouseover=OnItem(this) id=284 class=ms-unselectedtitle height="100%"
cellSpacing=0 Type="" SUrl="" UIS="1024"
CId="0x010010381707B6E7FC45825D794C02F54155" CType="Item" MS="0" CSrc="" HCD=""
COUId="" OType="0" Icon="icgen.gif||" Ext="" Perm="0x400001f07ee71bef"
DRef="sites/site1/M/S/Lists/MAINT_ACTIONS" Url="/sites/site1/M/S/Lists
/MAINT_ACTIONS/284_.000" CTXName="ctx1" sizset="50" sizcache011076027996994381="6">
<TBODY beenthere="1">
<TR>
<TD class=ms-vb width="100%"><A onclick="GoToLink(this);return false;"
onfocus=OnLink(this) href="/sites/site1/M/S/Lists/MAINT_ACTIONS
/DispForm.aspx?ID=284" target=_self>Item <IMG class=ms-hidden border=0
alt="Use SHIFT+ENTER to open the menu (new window)." src="/_layouts/images
/blank.gif" width=1 height=1></A></TD>
<TD><IMG style="VISIBILITY: hidden" alt=Edit src="/_layouts/images
/menudark.gif" width=13></TD>
</TR>
</TBODY>
</TABLE>
</TD>
The code that is close is below...
// filter out all tables with immediate parent td.ms-vb-title
// returns a collection
var ids = $('.ms-unselectedtitle').filter(function() {
return $(this).parent('td').hasClass('.ms-vb-title');
// from resulting collection, grab all IDs
}).map(function() {
return this.id;
// convert to array
}).get();
Could someone help me here? Note that I'm trying to access the ID from a clickable link in the row.
I was able to resolve this by creating three columns in the SharePoint list with a final one to put them together.
getWin1 held ...onClick='javascript:window.open("... the first part of the
script and was made default text for this single line text column.
getWin2 held ...","_blank","toolbar=0,menubar=0,top=50,left=50,width=1024,
height=800,scrollbars=0,resizable=0,location=0");return false;'... the
second single line text column.
getUrl concatenated the url to the ID from the list.
=CONCATENATE("<span><input ",getWin1,getUrl,getWin2," type='image'
src='https://sof.socom.mil/sites/SORDAC/M/SharePoint_System_Files/Icons
/Magnification_16.png'/></span>")... was put into the last column to
combine the three columns.
I have Text to HTML CEWP to convert it to HTML script. Not the optimal solution but it works. Note that the ... just marks the start and end of the script.

Print each loop of <c:foreach> individually using javascript

Currently I'm printing the whole page with print icon using following code:
<a href="javascript:window.print()">
<img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" />
</a>
I am reading a list of objects in JSP and displaying the object details using <c:foreach>.
I want to display a print icon beside details of each object and print(to external printer) that individual object details only, when clicked on it. The whole page is in single div.
I'm not sure whether this can be done or not. Can I control the each loop using some sort of ID?
Edit:
Example:
<c:forEach var="case" items="${distributions}">
<table>
<tr>
Print case details
</tr>
</table>
</c:foreach>
If I have 10 distributions, I get 10 tables so want a print icon beside each table and when clicked on it, print that individual table only.
I have not done the following but theoretically it should work:
1) define a print stylesheet, with:
body.detail-print .detail-item{display:none}
body.detail-print .detail-item.current{display:block}
2) define an event listener, e.g. with jQuery
$(".detail-item .print").click(function(e) {
$("body").addClass("detail-print");
$(this).closest(".detail-print").addClass("current");
window.print();
});
This should only print what is visible in your print stylesheet.
The only problem I see here: If someone wants to print the whole page afterwards, the browser will only print the last selected item. You could use a setTimeout to reset the classes. I have no better idea for now...
In your block you could put the data in a td then use the method described in this post to print the contents of that td.
<script type="text/javascript">
$(function(){
$(".printable").each(function(){
var $td = $(this);
var $printIconTD = $('<td><img src="images/printIcon.gif" alt="Print the Records" width="40" height="40" border="0" /></td>');
$td.parent().append($printIconTD);
$printIconTD.click(function(){
Popup($td.html());
});
});
});
</script>
....
<c:forEach var="case" items="${distributions}">
<table>
<tr>
<td class="printable">Print case details</td>
</tr>
</table>
Only problem with this solution is god and everyone has pop-ups disabled, so you will have to put a notice of sorts on the page letting users know
A different way to what has been suggested would be to reload the page showing only the selected object and then call the printer dialog (e.g. on document load). So the printer icons next to the objects could link to the same page and pass it a parameter that you'll be printing and the ID of the object that you want to print.

How to create dynamic row of table using Struts 1.3 and javascript

I have a contact table, this table contains a first name, a last name, and multiple phone numbers. So my model is something like
Contact {
String firstName;
String lastName;
List phones;
}
Phone {
String category; //home, work, mobile, etc
String phoneNumber;
}
So it will have web page contains two input text for first name and last name, and an add phone button. When add button is clicked, it will generate two input text again for category and phone number, and an delete button to that row.
I have tried using indexed=true, it will generate an html like
<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
The problem is, i dont know how to write the javascript, because i dont know what is current index if user click add button, how about if user have clicked delete button and then add button, what index it will be? It is ok if i have missing index? Something like
<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
<input type="text" name="phone[3].category" ... />
<input type="text" name="phone[3].phoneNumber" ... />
Note: please consider for the edit scenario too.
The first thing here is to use well the indexed and logic:iterate tags to generate the code. If having doubts about this, check out this answer given by me, which explains in detail how to use indexed attributes in struts: indexed and logic:iterate
Then, you have to consider the scenario where an user wants to add or delete rows, and update indexes correctly so struts will be able to retrieve data as you submit the form. I encountered this problem once and what I did was:
on add: using javascript, find out what is the last line of the table and, by looking at the generated code of the page, generate a new table row with empty contents, the index inside the square brackets. Finally, add to table
EXAMPLE:
a table:
<table><tr><td name='whatever[0].something'>asdf</td></tr>
<tr><td name='whatever[1].something'>asdf</td></tr>
<tr><td name='whatever[2].something'>asdf</td></tr>
</table>
to add a row, create it in javascript like this:
var newRow = '<tr><td name='whatever[3].something'>asdf</td></tr>
and append it to the table.
on del:Using the same technique as above find out which line (or corresponding index) was deleted. Then, edit the indexes of the remaining rows so that it matches the order of elements for the subsequent rows.
EXAMPLE:
a table:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[1].something'>asdf1</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>
let's say you delete asdf1 by removing it from the dom. then, the new table will look like this:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>
now we have to update indexes so it matches the right order, by changing the name of the second td to have an index of 1, that way, the table is back to a struts indexed format:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[1].something'>asdf2</td></tr>
</table>
I hope it's clear enough. I obviously can't write all the js functions, since they require some work, but with this information you can make it on your own.

Categories

Resources