Bug in a delete button in JSF page

Question

I'm trying to implement JSF table with delete button. This is the JavaScript which displays the dialog:

function dialog(a){              
    $("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                $("#myHiddenButtonID").click();
                $(this).dialog("close"); 
            }, 
            "Cancel": function(event) { 
                $(this).dialog("close");
                event.preventDefault();
            } 
        }
    });

}

I use second hidden button to delete the rows when the user confirms from the dialog:

<!-- hidden button -->
<h:commandButton id="myHiddenButtonID" value="DeleteHiddenButton" action="#{bean.deleteSelectedIDs}" style="display:none">
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>

<!-- the button -->
<h:commandButton value="Delete">
    <f:ajax execute="@form" onevent="dialog('demo test')"></f:ajax>
</h:commandButton>

When I click on the delete button the dialog appears to confirm the deletion of the table rows. Then I click YES nothing happens. I suppose that the hidden button id is the problem but when I try to fix it nothing happens. The managed bean method is not called.

Related: http://stackoverflow.com/questions/7927716/how-to-select-primefaces-ui-or-jsf-components-using-jquery — BalusC, May 22 '12 at 13:52

score 2 · Accepted Answer · edited May 22 '12 at 13:50

2

Look in the firebug or view source on you hidden button , look at its complete id , it might be with some prefix like form1ID:myHiddenButtonID or some other prefix, if thats the case you should write a better id (form1ID:myHiddenButtonID for example)

like this

$("#form1ID\\:myHiddenButtonID").click();

also, you can remove the style="display:none" from that button and click it manually to see that its really functioning as expected...

You also can try the Attribute Ends With Selector

like this

$('input[id$="myHiddenButtonID"]').click();

edited May 22 '12 at 13:50

BalusC

1,082,665
372
3,610
3,555

answered May 22 '12 at 11:59

Daniel

36,833
10
119
200

this is the id into the HTML page: `id="form:myHiddenButtonID"`. But when I change the JavaScript this way `$("#form:myHiddenButtonID").click();` thee dialog freezes. When I click on the YES button I can't close it – user1285928 May 22 '12 at 12:10
Is there any other "name" like `id` that I can assign to the hidden button and call it from the JavaScript? – user1285928 May 22 '12 at 12:21
try $('input[id$="myHiddenButtonID"]').click(); and you don't need to have `execute="@form"` in both buttons only in the visible one – Daniel May 22 '12 at 12:24
By the way, how this code `$('input[id$="myHiddenButtonID"]').click();` works? – user1285928 May 22 '12 at 12:30
edited my answer with a link to that specific jQuery Selector, also you better remove the execute attribute in the visible button... – Daniel May 22 '12 at 12:31
I removed `render="@form" execute="@form"` from the visible button. Now it's working fine. – user1285928 May 22 '12 at 12:36
better `execute="@form"` in visible and `render="@form"` in hidden... (just like in my original answer to your confirm dialog question) – Daniel May 22 '12 at 12:38
Thanks to @BalucS for the edit... i Forgot that you need to add \\ before the :myHiddenButtonID... that's why $("#form1ID:myHiddenButtonID").click(); didn't worked for you – Daniel May 22 '12 at 13:55
I tested the example with `$('input[id$="myHiddenButtonID"]').click();`. It works very well. I'm going to work with it. I suppose that there is no big difference. – user1285928 May 22 '12 at 17:56
I'll tell you the difference and you will decide... $('input[id$="myHiddenButtonID"]') selector selects all input element with id that ends with myHiddenButtonID , so if you got some othe button with id="somePrefixmyHiddenButtonID" it will be selected by the selector too, and it will be clicked too... while the $("#form1ID:myHiddenButtonID") selector will select a specific button and click it only... – Daniel May 22 '12 at 18:16
Yes, it's better to use $("#form1ID:myHiddenButtonID") – user1285928 May 22 '12 at 19:28
oops , I meant `$("#form1ID\\:myHiddenButtonID")` with the `\\` – Daniel May 22 '12 at 20:00

Bug in a delete button in JSF page

1 Answers1