ajax events and manipulating DOM

[Jason Novotny]

Hi,

I'm using jquery datatables which allows customization of table header 
by creating html in javascript via "dom" attribute which creates a div :

$('#datatable').dataTable({

        "dom": '<"top"<"dropholder"><"postpone"><"btns"><"holder"ip>>t',
        "language": {
            "info": "_START_-_END_ of _TOTAL_",
            "search": ""
        },
        "aaSorting": [],
        "aoColumnDefs": [
            {'bSortable': false, 'aTargets': [ 0, 4, 7 ] }
        ],
        'iDisplayLength': 12
    });
$('.btns').html('<buttonclass="btn btn-primary"type="button">Send</button>');


However I need these buttons to be server-side actions.

My naive solution was to create additional wicket links on the page:

<div  class="actionbuttons">
    <button  wicket:id="cancel"class="cancel-order-btn 
btn"type="button">Cancel</button>
    <button  wicket:id="send"class="btn btn-primary"type="button">Send</button>
</div>

and then at the top of my page:

<script  type="text/javascript">
    $(function() {
        updateDataTable();      
    });
</script>

where I have

function updateDataTable() {

$('#datatable').dataTable({

        "dom": '<"top"<"dropholder"><"postpone"><"btns"><"holder"ip>>t',
        "language": {
            "info": "_START_-_END_ of _TOTAL_",
            "search": ""
        },
        "aaSorting": [],
        "aoColumnDefs": [
            {'bSortable': false, 'aTargets': [ 0, 4, 7 ] }
        ],
        'iDisplayLength': 12
    });

    var html = $('.actionbuttons').html();

    $('.btns').html(html);
    $('.actionbuttons').remove();

}
}

However, the send button when clicked needs to refresh the panel with an 
updated data table. So I have:

add(newAjaxSubmitLink("send") {
    @Override
    protected voidonSubmit(AjaxRequestTarget target, Form<?> form) {
                container.addOrReplace(createDataTable());
                target.add(container);
                target.appendJavaScript("updateDataTable()");

        }
});


Now this works the first time when the page loads. It removes the DOM 
section with wicket-ized links to the DOM section of the datatable. 
Clicking "send" results in an updated table. However, when I click 
"send" again, although the display looks good and it has replaced the 
DOM, the links seem to have no events associated and it doesn't do 
anything. I wonder if a disconnect is going on with the wicket event 
registration...

Is there a better way to do this, or am I missing something?

Thanks, Jason