I am trying to find a way to have the document.getElementById("1").innerHTML to get triggered based on a condition coming from jsp code.
For example I have the following jsp code on the jsp page,
<table border="1">
<c:forEach items="${elements}" var="element">
<tr>
<td>${element.elementNumber}<br /> ${element.isReserved}
</td>
</tr>
</c:forEach>
</table>
Based on "element.isReserved", I need to change an element (supposedly using .innerHTML)in html. The element in html looks like the following. I have several of these elements.
<div class="col-xs-2">
<div class="o-btn">
<a id="1" onClick="myFunction(this);">1</a>
</div>
<div class="clearfix"></div>
</div>
As shown above, it is displayed as a button with value "1". I want to change the value to "X" based on a condition. I can do this directly with js,
<script>
function myFunction(elmnt) {}
function isReserved() {
return 'X';
}
document.getElementById("1").innerHTML = isReserved();
</script>
But I need to make it dependent on the output from spring or the jsp code shown above. My desired output is that the "1" displayed on the button will change to a "X" when the element.isReserved() (inside the jsp code) evaluates to true. Since I have several of the button elements, I need to check for every button if element.isReserved() evaluates to true.
I was able to make it work. I found this article very helpful.
After understanding (and accepting reality) how JSP works with html, I had to slightly restructure my program.
From spring mvc, I added my variables to the model,
model.addAttribute("element1", 1);
On the jsp page I checked the variables with javascript,
if("${element1}" == 1) {
document.getElementById("1").innerHTML = 'X';
document.getElementById("1").style.color = 'red';
}
Probably there are better solutions, but for a newbie like me, it works great!
The article I mentioned above is indeed a good and important read for new comers.
Related
Its as simple as it gets, i want to change the text within <td> to be whatever the user enters in the prompt, i have tried many solutions. Such as putting the script element below body. Here is the java script code however it doesnt work although i assume everything is as it should.
var yourname = prompt("Enter your name");
document.getElementById("name").innerHTML = yourname;
Here is the HTML
<html><head>Cant figure this out</head>
<body>
<table>
<tr>
<td>Name</td>
</tr>
<tr>
<td id = "Name"></td>
</tr>
</table>
</body>
</html>```
I see a couple of problems with the code:
The html doesn't have a script-tag to use the javascript. Without that it won't load. To avoid these kind of problems please make the smallest code that have the problem and use copy-paste to get the exact code in questions.
Name != name. The case of the id differs between the html and the javascript.
You have additional characters last in the html: ```
I'm not a frontend developer and don't know if this will solve your current problem. But those issues should be handled either way.
in your HTML you gave the an id of "Name", yet in the javascript script you are searching for an element with id "name". The id is case sensitive, so you would have to search for "Name", not "name".
I want to get div value in a jsp and print it. so basically i have a code that looks like this
<td class = 'modelercol cellHeaderMultiviewString CellWithComment'>
<div id="desc" class="preserveText" style="margin-top: 0px;margin-bottom: 0px;"></div>
<i want to write code here to print the value of **desc**>
</td>
The value of div desc i am setting in a js code something like this:--
function setFieldTexts()
{
$("#desc").text("hello");
}
my question is how to get the same value in a jsp page.
as you can see in the picture when i click on the dropdown of the column Variable the java script function setFieldTexts is called. on call of the java script function what exactly it is doing is it is setting the div id=desc .. so my requirement is that i want to write a jsp function inside the so that i can print the value of the id desc..
I have a drag and drop UI. Its like a bucket list. What I have done is I have seperated the forms and the UI html for easier data manipulation. I have an empty form like this: (Take note that I am using spring form tags "form:")
<form:form method="POST" id="sampleForm" commandName="sampleForm" modelAttribute="sampleForm" class="navbar-form navbar-center">
<table id="formToBeSaved">
</table>
</form:form>
And then I have a script that is triggered whenever my other sortable receives an item. Sample below:
$("#sortable2").sortable({
connectWith : "#sortable2 ul",
scroll: false,
receive: function(event,ui) {
var saveElement = '<tr id="saveRow['+statusCounter+']"><td><form:input type="hidden" '+
'path="sampleFormModel['+statusCounter+']." class="form-control" '+
'id="name['+statusCounter+'].sampleForm" value="'+ someValue +'"></form:input></td></tr>'
console.log(saveElement);
$("#formToBeSaved").append(saveElement);
statusCounter = statusCounter + 1;
console.log(statusCounter);
};
},
Now the problem is, whenever I submit the form thru ajax an error occurs. It seems that the system does not recognize my < form:input > tag (since I am using spring) because I've just assigned it as a string into a variable. Is there a way to fix this? Thanks stackoverflow community!
You are using Spring XML templates, but the web browser can only work with HTML. This works when you are declaring your code in JSP files because Sprint will parse them and transform them to HTML.
So instead of manually adding JSP to the document, you should edit your JSP files in a way they generate the JSP you expect. In this case, you could use <c:forEach> to generate each <tr>. This answer could help you to do that.
If you only have access to the datas required by these <tr> dynamically, I do not know Sprint enough to help you. Maybe you could find some resources on this question.
I don't know if this is realizable, because i don't have strong knowledge in JavaScript.
I want to use Java variable in Javascript and XHTML code, i have a file path in java variable: applicationDadesVersioBB.rutaFitxerLog which i display as follows in XHTML page in a table as follows:
<tr>
<th scope="row">#{literalsCore['Entorn.FitxerLog']}</th>
<td>
#{applicationDadesVersioBB.rutaFitxerLog}
</td>
</tr>
until now everything is fine, but what I want to do is once the path is clicked, the file should be downloaded, which i am not able to do with: onClick="descarga([[${applicationDadesVersioBB.rutaFitxerLog}]])
the JavaScript descarga function:
<script type="text/javascript">
function descarga(file)
{
window.location=file;
}
</script>
I think the problem I have is the conversion of java variable values to javascript values.
I tried to do it changing the onClick="descarga([[${applicationDadesVersioBB.rutaFitxerLog}]])" to onClick="descarga("#{applicationDadesVersioBB.rutaFitxerLog}")"
but no way, any help?
I'm not sure about what you're trying to do but I remeber a useful "hack" to do that in PHP for example... You have to create a hidden input in your HTML file and set its value to applicationDadesVersioBB.rutaFitxerLog. Then in your click handler you just get the input element thanks to its id for example and you read the value.
Hope it helps
you need quotes around a string
onClick="descarga('[[${applicationDadesVersioBB.rutaFitxerLog}]]')"
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!