I am trying to create an edit link, such as, when it is clicked, it opens the details for that row in read-only mode.
Here is the link:
<c:set var="deletableBook" value="0"/>
<a href="" title="Edit Book Info" onClick='resetDateAndMakeReadOnly(${deletableBook}); return performAction(${item.bookId}, "bookEdit");'>Edit</a>
And here's the function that gets called:
function resetDateAndMakeReadOnly(allEditable) { var e22 = document.getElementById('book_Date'); var e3 = document.getElementById('book_type'); var e4 = document.getElementById('book_Number'); if (allEditable){ e22.readOnly=false; e3.disabled=false; e4.readOnly=false; alert("read and write"); } else { e22.readOnly=true; e3.disabled=true; e4.readOnly=true; alert("readOnly new"); } e22.value = "<c:out value='${params.book_Date}'/>"; return false; }
And currently nothing seems to change when this method is run. I've confirmed that it makes it to the correct part of the logic, but things are still editable.
It is because you are using link with empty href
to trigger your javascript function which will reload your page. Use javascript:void(0);
inside href
.
<a href="javascript:void(0);" title="Edit Book Info" onClick='resetDateAndMakeReadOnly(${deletableBook}); return performAction(${item.bookId}, "bookEdit");'>Edit</a>