Quantcast
Channel: Apache Timeline
Viewing all articles
Browse latest Browse all 5648

ajax events and manipulating DOM

$
0
0
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

Viewing all articles
Browse latest Browse all 5648

Trending Articles