How to detect change in form if added a new row in prime faces datatable

Question

I have requirements to disable save and cancel buttons in my page on page load. I should enable save and cancel buttons if user changes something in the page. To achieve this, I am using
http://plugins.jquery.com/are-you-sure/

This plugin is working fine but there is need for customization in many scenarios, one like below

I have a page like Item groups which consists of three panels.

LeftPanel : List of item groups in the system
CenterPanel : List of items assigned to a selected item group
RightPanel : List of items to assign to an item group

Now Assume I have a datatable

 <p:dataTable var="itms" value="#{myBean.listOfItems}" rows="10"
    paginator="true"
    paginatorTemplate="{CurrentPageReport}  
                       {FirstPageLink} 
                       {PreviousPageLink} 
                       {PageLinks}  
                       {NextPageLink} 
                       {LastPageLink} 
                       {RowsPerPageDropdown}"  
    rowsPerPageTemplate="10,50,100">
 </p:dataTable>

To assign items to the item group I would select items in the right panel and click on assign button which would add to the listOfItems to show in the center panel

 listOfItems.addAll(selectedItems);

I am calling rescan method defined in the plugin on assign button oncomplete to detect the changes and track new records added because I want to consider addition or removal of fields also a change.

Now on page load if an item group is selected and it has 13 items assigned then I could see the first page with 10 records. If any items added then they will be added in the list at back end list. Since I'm in first page and page is having complete rows plugin is unable to find any changes in form.

How to find a change in this scenario.

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

Since you say you want to consider any addition or removal of fields also a change to make sure that your users save the changes, one way to do it could be like this:

You can have a hidden input:

<h:inputHidden id="hiddenInput" />

And in your assign button oncomplete you mentioned you can add:

oncomplete="$('#hiddenInput').val('dirty').change();"

This would add the 'dirty' string (for example) to the hidden input and call change() to tell the plugin that something changed, and the plugin would mark the form as dirty (changed).

And in the oncomplete of your saving button, all you have to do is clear that value and reinitialize the plugin to start again:

oncomplete="$('#hiddenInput').val('');$('#formId').trigger('reinitialize.areYouSure');"

Also it would be good to add some checking or to do that at the end of the action (link).

NOTE: If you add and delete the same 'item', technically there aren't changes, but you want to keep the form as changed right? This solution will work for that. Correct me if I'm wrong and you want to manage this particular case. You would have to add some logic in which you compare old and new values and clear or dirty the hidden input accordingly.

edited May 23 '17 at 12:29

Community

1
1

answered Sep 23 '14 at 19:01

mrganser

1,113
1
13
27

Thanks for the answer. It still enables the save button if I didn't select any thing in the right panel and click on assign button. There are validations which would prevent assigning some records to the center panel. So this solution would not work for me. I have figured out a way to do this. I am exploring to make it generic So the delay in posting here. I appreciate your effort. Thanks once again :) – Srikanth Ganji Oct 01 '14 at 07:02
@Srikanth Ganji I also mentioned that in the answer, that it would be good to add some checking like [this](http://stackoverflow.com/a/16796033/4056222). But I can be more specific if you want. You can check everything there, client side validations and you can also check callBackParams if you passed them after the action or... you can execute what you have in the `oncomplete` at the end of your action after you know everything worked. I don't know the validations you personally have so I didn't specified them. Anyway, if you have a better solution than this hiddenInput thing, I'll read it :) – mrganser Oct 01 '14 at 07:27
My idea is to have a outputtext which always holds a value of the list size and updates on every ajax opeartion to the latest datatable size. I would ammend the plugin to monitor this value also to trigger a change. It perfectly works fine in all the scenarios. But it makes you to have an outputtext to all the pages thought it is not a big deal. I have another idea to rely on currentPageReportTemplate = "(Number of Records: {totalRecords})" attribute of primefaces datatable.With this no need to have either outputtext or input hidden – Srikanth Ganji Oct 01 '14 at 07:58
@SrikanthGanji I'm not sure about that, if you rely on the size of the datatable to compare... if you add an item and delete a different one, you would have the same size but with changes you should take into consideration right? – mrganser Oct 01 '14 at 09:48
@SrikanthGanji I'm curious, how did this end? :) – mrganser Oct 17 '14 at 13:28

How to detect change in form if added a new row in prime faces datatable

1 Answers1

Linked