Develop Reference

Need to display javascript value in anchor tag of jsp

I need to pass the userid variable through anchor tag .. Here I attached code for that.
Code :
<td colspan="2" align="right"><div align="center">User Id</div></td>
<td><input class="textbox" type="text" id="userid" ><a href="access.jsp?userid='+userid'"
"></a></td></tr>
Javascript :
var userid ="MK";// this value is getting fetched correctly using document.getElementByName
Just I need to display in anchor tag.How can I do this?

Please, try to be more clear with your Question.
You should show all related parts of your code so people can figure out what exactly you need.
Also Stackoverflow provides some markup so you can insert blocks of code - very useful, I recommend looking it up :)
Assuming you already have the anchor <a> tag
HTML
JS
// your code (fetching data) ...
document.getElementById('anchor').setAttribute('href', 'google.com?userid=" + userid)

Javascript Manipulation on included DOM element

Basically what I am doing is dynamically loading external HTML files depending on a drop-down selection in classic ASP. It's an old system for someone I work for, so there's not really many choices I have except to figure this out. The included HTML is only a table of data such as this;
<table cellspacing="0" cellpadding="0" style="vertical-align:top; width:100%; ">
<tr style="line-height:14px;" >
<td width="150"><b style="color:#888888;">Symbol<b></td>
<td ><b style="color:#888888;">Security</b></td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Amount</b></td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Mkt Value</b> </td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Est.Next Date</b></td>
</tr>
<tr style="line-height:14px; background-color: #f0f0e8;">
<td>QPRMQ</td>
<td>BANK DEPOSIT SWEEP PRGRAM FDIC ELIGIBLE</td>
<td style="text-align:right;">100.00%</td>
<td style="text-align:right;">$191.77</td>
<td style="text-align:right;" id="NextSWPDate">11/15/2010</td>
</tr>
</table>
I want to run a function on the TD element with the ID of "NextSWPDate", but since this is "included" html I just receive the error of;
Unable to set value of the property 'innerHTML': object is null or undefined
My function is just generic right now trying to do any manipulation on the object I can, after I get that set, I can write the real logic quickly and easily.
function SetNextSWPDate(){
document.getElementById("NextSWPDate").innerHTML = "this is a test";
}
Thank you,
NickG

Your tag mentioned jQuery, so I hope a jQuery solution is acceptable. A standard $("#NextSWPDate").text("whatever"); worked just fine for me. http://jsfiddle.net/pCx9K/

In case of included HTML or generated HTML, you might want to wait with executing javascript until the DOM is fully loaded.
To do so, try using the window.onload of javascript or the $(document).ready function of jQuery.

The property is read/write for all objects except the following, for
which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE,
TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
Colin's work-around (setting innerText on the td instead of innerHTML on the tr)
is a good one in your case. If your needs become more complex, you'll have to
resort to The Table Object Model.
Source from Why is document.getElementById('tableId').innerHTML not working in IE8?
Refer http://msdn.microsoft.com/en-us/library/ms533899%28v=vs.85%29.aspx

Ok, so you must implement a callback function to your jQuery.load function : $("#yourDiv").load("youExternalFile",function(){//your stuff here ... }); see api.jquery.com/load/#callback-function – mguimard 3 hours ago

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.

to retain values in form using struts tags and dynamic behaviour through Javascript

I have a JSP page containing a ADD button to add the rows(a HTML code) via Javascript.
I now need to retain the value in my form by replacing the codes in JSP by struts-tags.
How should I then communicate from struts-tags and JS. Since all the HTML code lies in JS, how should it use struts-tags???
Please help!!

Your question is too vague to give an appropriate answer. However, I recently did something similar to this so I will try and give you a few guidelines.
1.) If you are hoping to populate these rows with information from the server this will require an ajax call. Most likely to an action that returns a snippet of jsp containing only a table row.
I suggest avoiding the struts2-jquery plugin for this unless you already are using it in your application. I would just use jQuery - http://api.jquery.com/jQuery.ajax/
2.) If you wish to gather user input in these rows you will just have to make sure to use appropriate naming for your fields.
Eg: In your java action you have a List< String > names.
You would need to generate the following html via js.
<tbody>
<tr>
<input type="text" name="names[0]">
</tr><tr>
<input type="text" name="names[1]">
</tr><tr>
<input type="text" name="names[2]">
</tr>
</tbody>
3.) If you wish to keep track of the number of added rows you could use this in your jsp...
<s:hidden name="rowsCount" id="rowsCount" value="0">
then within your javascript change the value of that input.
Hope one of those 3 helped!

Update textfield based on combobox selection using JQuery - accessing list problem

I have a Spring MVC application, use JSP+JQuery for view, and what I need is to, based on combo box selection (which gets me an index of element in list) to populate text field.
listProduct - list of products that is in the model
<form:form method="POST" commandName="productForm" name="insertRacun">
<table>
<tr>
<td class="ui-widget">Product:</td>
<td><form:select path="productListId" id="productCombobox">
<form:options items="${listProduct}"itemLabel="name" itemValue="productId"/>
</form:select>
</td>
<td class="ui-widget">Product price:</td>
<td><form:input path="priceList"
class="ui-widget ui-widget-content" id="priceInput" />
</td>
<script type="text/javascript">
var comboIndex = $("#productCombobox").val();
$("#priceInput").val(${listProduct[comboIndex].price})
});
</script>
My question is: When i put number in listProduct[] i.e. listProduct[0] it works just fine and price field gets populated, but when i want put "comboIndex" in brackets, it does nothing.
If there is another solution (not using JQuery), please post it

You are mixing client and server side code. You cannot pass a JS variable to your server code, as your server code is parsed before the page has been served up to the client.
You will need to pass the price corresponding to a particular product ID to the client by other means.

The relevant code (probably in a change event handler) should reference productCombobox selectedIndex instead:
var comboIndex = $("#productCombobox").attr("selectedIndex"); //
$("#priceInput").val(${listProduct[comboIndex].price});