Javascript prevents rendering of correct View
Hi,
I need to delete a record from the DB but before deletion I prompt the user with a confirmation message. I have a Javascript function which I call from the onclick event of a <h:commandLink>. This function then triggers the action in my backing bean if the user confirms the deletion.
<h:commandLink value="#{msg.Delete}" onclick="deleteItem(#{types.index});"/>
<div style="display:none">
<h:commandLink styleClass="deleteConfirmation#{types.index}" value="#{msg.Delete}" action="#{backingBean.checkDelete}">
<t:updateActionListener property="#{backingBean.selectedType}" value="#{types}" />
</h:commandLink>
</div>
The js code is:
function deleteItem(rowIndex)
{
var className = "deleteConfirmation" + rowIndex;
var elements = getElementsByClass(className, null, "a");
var deleteLinkId = elements[0].id;
var deleteLink = document.getElementById(deleteLinkId);
if(confirm("Are you sure you want to delete this item?"))
{
deleteLink.click();
}
}
The problem I'm facing is that the selected record DOES get deleted in the back-end, but this change is not reflected in the view when the page is redisplayed after submission. If I bypass the Javascript function and call the action directly from the hidden command link, everything works fine. But I need the confirmation before deletion.
Can anyone suggest what the solution could be? Thanks in advance.
[1531 byte] By [
ajanea] at [2007-11-27 5:51:18]
# 1
This is a somewhat odd use of a confirmation dialog ..
Replace it by<h:commandLink action="#{myBean.delete}" onclick="return confirm('Delete?');" />
If it returns true, then the action will be invoked. Else if it returns false, then the action won't be invoked. If you don't know how to retrieve the selected row of the datatable, take a look here: http://balusc.xs4all.nl/srv/dev-jep-dat.html how to use HtmlDataTable#getRowData().
Anyway, back to the real problem:
> but this change is not reflected in the view when the page
> is redisplayed after submission.
Then there's likely something wrong in your data loading logic. Take a look there.
# 2
Hi BalusC
Thanks a lot for your answer. I have tried what you've suggested but the action is being invoked even though the javascript function is returning false, i.e. even if the user clicks Cancel, the selected row is being deleted. But when the page is redisplayed, this time it does not show the deleted item.
Any idea what might be wrong? And how I can get it to work correctly?
ajanea at 2007-7-12 15:40:17 >
# 3
Show your onclick code. Likely it actually doesn't return false. For example, if you're calling a function, then you still have to put the 'return' statement in the onclick.
onclick="return someFunction();"
where someFunction() can return true or false.
# 4
Actually I did not have return in the onclick event but now that I've added it as such
onclick = "return confirmDelete('#{msg.Item}', '#{types.name}', '#{msg.confirmMsg}');"
function confirmDelete(item, itemName, msg)
{
return confirm(msg + " " + item + " '" + itemName + "'?");
}
The action is not called even when the user clicks OK. The page is submitted (refreshed) but the action is not called.
What else might be wrong?
ajanea at 2007-7-12 15:40:17 >
