Develop Reference

call innerHTML based on a condition from jsp code in spring mvc

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.

Div acting as a form input (onclick)

I have a page which connects to a database where I have some users. Then, it takes each user and puts a div for each one of them, so I have 6 divs (a user in each div).
What I want is that, when somebody clicks in a div, it would give me the id of that user like if it was a form with an input.
I mean: the page takes the id and the name of each user from the database, so if I used a normal input, I would make that when the form is submitted, the form would return me the id of the selected user, but as I am using divs and no buttons, it would be nice to achieve that.
This is how my page looks (number 4 is where my mouse is):
The structure is basically, as I said, 6 divs, each one containing the name and the id of the user (I hide the names for privacy).
So, what can I do? If I haven't explained well I can give you more details... Thanks!!

Your HTML should be generated similar to this (each div has an attribute to point to its corresponding user from the DB)
<form id="select-user" action="formActionPage.php" method="POST">
<input id="selected-user" type="hidden" value="0">
</form>
<div id="1" class="user"></div>
<div id="2" class="user"></div>
<div id="3" class="user"></div>
The form has no submit button as you mentioned but has an input which is hidden notice that value=0 is a default value chosen by me .. you may control this in the action page ..
JQuery:
$("div").on('click', function() {
$('#selected-user').val($(this).attr('id'));
$('#select-user').submit();
});
EDIT
you may use div.[classname] div.user in my example, because you just don't want to apply this for any div

Use this:
HTML code:
<div><span id='userId'>10</span></div>
<div><span id='userId'>11</span></div>
jQuery code:
$("div").on('click', function() {
var userId = $("span", $(this)).text();
console.log(userId);
});
CSS code:
span {
display: none;
}
Main idea is to create in each div hidden span in which you will store user id, connected to this div. Also, you need onclick event, which will find this span and show needed id. Simple. Demo below.
DEMO
Note, that it is just an example. You can edit it as you need

Dynamic forms AUI Liferay

I am doing a portlet in Liferay with a form like this:
<form method="post" action="<%=actionAddRule.toString() %>" id="myForm" >
<aui:select name="attribute" style="float: left;">
<c:forEach var="attr" items="${fields}">
<aui:option value="${attr}" selected="${condition.attribute==attr}">${attr}</aui:option>
</c:forEach>
</aui:select>
<aui:input type='button' value="Add Condition" name='addCondition' onClick="addCondition();" %>'></aui:input>
<div id='conditions'></div>
</form>
I want that when someone click the button add a new select, but I don't know how do a new . I tried do it with JavaScript with:
var conditions = document.getElementById('conditions');
conditions.innerHTML('<aui:select ...>...</aui:select>');
and
document.createElement('<aui:select>');
I tried too with AUI script doing:
var nodeObject = A.one('#divAtr');
nodeObject.html('<aui:input type="text" name="segment21" label="Segment" value="lalal" />');
But it doesn't work because is html and doesn't can make AUI, and if I make the new select with HTML normal, when I catch the values some are lost.
Thanks.

As #Baxtheman stated, this won't work because the tag is not a client-side HTML tag, but a server-side tag from the aui-taglib.
To dynamically load the contents of the select box you would want to follow these steps:
add an element in your JSP, but make it hidden
<aui:select id="conditions" style="display: none;"><aui:select>
From your javascript, when the event occurs that you want to use to load your second select box, you would select the dropdown box and add the options you wish to it with something like the answer from this post Adding options to select with javascript
Make sure you set the select box to be visible after loading the options.
document.getElementById('<portlet:namespace/>conditions').style.display = 'block';
For more clarity, the reason you're missing information on POST if you add a normal HTML select box, is because of the way the aui:form serializes the data. I believe the ends up with a custom onSubmit that gathers only the aui elements.

<aui:select> is a JSP taglib, not the final HTML markup.
If you understand this, you resolve.

show submit <a href> link onchange and pass the value of the input box changed

I am not a JavaScript person really, I write in ASP and use a SQL database in the backend. But our marketing director requested a change that will use JavaScript.
On our view cart page, we're currently displaying an input box with a modify button to allow customers to change the quantity of the listed item (in that row... there could be multiple products in their cart, each having their own quantity input).
<form method="post" action="updateitem.asp">
<input type="hidden" name="product_id" value="<%= PRODUCT_ID %>">
Quantity: <input type"text" name="quantity">
<input type="image" name="Submit" src="/graphics/modify.gif" align="middle" border="0" alt="Continue">
</form>
What I'd like to make work is something like this. Hrm, assuming I need to do my form/div name differently for each product? I can easily write the product_id into the id tags but then assuming I'd also need to loop through my function for each one. I've gotten this far in writing the replacement code:
Get Dataset from Database (items in cart) and loop through:
<form method="post" action="updateitem.asp" id="updateitems<%= PRODUCT_ID %>">
Quantity: <input type="text" name="qty<%= PRODUCT_ID %>" OnChange="Javascript:UpdateQty()")
<div id="showlink<%= PRODUCT_ID %>">
<br /><span class="BodyTiny">update</span>
</div>
</form>
END LOOP
So if the quantity changes, it displays the word "update" where they can click and it passes whatever quantity that is in the quantity field to the updateitem.asp (in a way I can then update it in the database in ASP/SQL). In the code above, if we could just insert the new # in the a href statement after quantity=, then I could fix it in the updateitems.asp page without a problem.
I'm not sure where to even begin honestly, I have this so far:
LOOP through dataset so each product has its own function
<script Language="JavaScript">
<!--
function UpdateQty(updateitems<%= PRODUCT_ID %>) {
Show div updateitems<%= PRODUCT_ID %>
Replace NEWQUANT within that div with the value in the input field qty<%= PRODUCT_ID %>
}
//-->
</script>
END LOOP
I'm having a few problems...
I am not sure how to write the function UpdateQty. It should A) display the stuff in div id=showlink, and B) add the # from the input named quantity quantity to the href so I can update it in the database on the next page
If they have JavaScript turned off, they should be able to enter a new quantity and just hit enter for it to submit the form. I believe this will work as its a form with 1 text input and 1 hidden one, so just hitting enter in the text input should submit it. But that should still work with whatever JavaScript is added to make the showlink div show if it changes.
Do I need to add a class to my CSS for showlink? If so, what do I need to put in it?
Any help would be greatly appreciated!
Mahalo!

so what you can do for updateQty is have one function that will be correct for all products in a list just by making a function that finds all the necessary elements by relative paths.
//in this function the context is the element, so the
//`this` variable can be used rather than a param
//for the product id
function updateQty() {
//show the update link
var parent = this.parentNode;
//assumes only the update text uses the class bodyTiny, and that there
//is only one element using it. obviously making this invariant true
//would be trivial by adding a different class name
var updateText = parent.getElementsByClassName("bodyTiny")[0];
updateText.style.display = 'block';
var updateLink = updateText.parentNode
, updateHref = updateLink.href;
//next we find the current quantity and replace it with the input
updateHref = updateHref.replace(/qty=(\d*)/, 'qty='+this.value);
//then we set the link element's attribute
updateLink.href = updateHref;
//now when you mouse over the link you should see the url has changed
}
You can also set your form to POST the equivalent data, and then I guess on the server side you will have your OnGetPage and OnPostback both delegate to the same method with the parameters either parsed out of the query string or out of the post data.
You can see it running on jsfiddle. Hopefully this helps!

Dynamically added data not loaded in TextBoxes in jQuery mobile/java script. data has [object HTMLInputElement] instead of value

I have implemented an application for iphone and android in phoneGap using jQueryMobile
My app is already completed for single html page aND works fine.
now for better performance i used to implemented in separate multiple html files.
in a js file i have implemented code for edit employee information as follows.
EditInfoButton.click(function()
{
var row = backupInformation;
alert(row.Emp_Name);
$('#editEmpName').val(row.Emp_Name);
...
...
});
here alert(row.Emp_Name); popups correct result when click the button but not displayed in textbox
And in a html file for edit page i have implemented text box using jQuery mobile as follows
using **`id = "editEmpName"`**
text box in One of my Html:
<div data-role="fieldcontain" >
<label for="Empname" class="ui-input-text" ><b>Employee Name</b></label>
<input name="Empname" type="text" id="editEmpName"/>
</div>
But in html page one button action onClick="alert(editEmpName)" popus [object HTMLInputElement]
y this [object HTMLInputElement] how to get my value from editEmpName
and hows'd i get the correct value in texbox

The code which produces the incorrect alert is displaying the HTML element itself, rather than the value of the element. Where does the variable editEmpName get initialised in your JavaScript? If its set to the input element with id 'editEmpName' then you can just do
onClick="alert(editEmpName.value)"