ajax events and manipulating DOM

2014-11-14 Thread 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: 'topdropholderpostponebtnsholdeript',
language: {
info: _START_-_END_ of _TOTAL_,
search: 
},
aaSorting: [],
aoColumnDefs: [
{'bSortable': false, 'aTargets': [ 0, 4, 7 ] }
],
'iDisplayLength': 12
});
$('.btns').html('buttonclass=btn btn-primarytype=buttonSend/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=cancelclass=cancel-order-btn 
btntype=buttonCancel/button
button  wicket:id=sendclass=btn btn-primarytype=buttonSend/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: 'topdropholderpostponebtnsholdeript',
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







Re: ajax events and manipulating DOM

2014-11-14 Thread Jason Novotny


Ok, to answer my own question, it was a jquery/javascript issue. Instead 
of removing dom, the approach that works is to use appendTo instead:


$('.actionbuttons').appendTo('.btns');

Jason

On 11/14/14, 6:13 PM, Jason Novotny wrote:

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: 'topdropholderpostponebtnsholdeript',
 language: {
 info: _START_-_END_ of _TOTAL_,
 search: 
 },
 aaSorting: [],
 aoColumnDefs: [
 {'bSortable': false, 'aTargets': [ 0, 4, 7 ] }
 ],
 'iDisplayLength': 12
 });
$('.btns').html('buttonclass=btn btn-primarytype=buttonSend/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=cancelclass=cancel-order-btn 
btntype=buttonCancel/button
 button  wicket:id=sendclass=btn btn-primarytype=buttonSend/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: 'topdropholderpostponebtnsholdeript',
 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