How to stop request with javascript in rich:datascroller RF4?

[merlincaf]

Hi,

in my JSF page (RichFaces 4.3.7) I have a rich:datatable with editable data (input text or checkbox). I wish that when the user changes the data and then he clicks on another page on the component rich:datascroller he may receive a corfirm window: if he clicks on OK button he proceeds in the request, instead if he clicks on Cancel button he remains in the same page.

For the classic h:commandbutton I made this functionality through JavaScript using the attribute

onclick = "return checkUnsavedData()"

where

function checkUnsavedData(){       
     if(unsaved){  
           if(confirm('Unsaved data. Do you want to proceed?')){  
                unsaved=false;  
                return true;  
           }else{  
                return false;  
           }  
      }  
 }

and it works fine. In rich:datasroller onclick attribute doesn't exist and with onbegin attribute it doesn't work. Can you suggest me any solution?
Thanks

[merlincaf]

Do nobody know a solution to the problem?

Thanks

[bluez974]

Hello, you could overload the javascript functions of the component described here : Component Reference

<rich:dataScroller id="dtScroller" page="#{bean.pager}" for="tableId" oncomplete="rewriteScrollerFunction(#{rich:component('dtScroller')})"/>
  <h:outputScript>
       jQuery(document).ready(function() {
            rewriteScrollerFunction(#{rich:component('dtScroller')});

       });
       function rewriteScrollerFunction(scroller) {
            scroller.switchToPageBase = scroller.switchToPage;

            scroller.switchToPage = function(pageIndex) {
                 if (confirm('GO ?')) {
                      return this.switchToPageBase(pageIndex);
                 }
            }
       }
  </h:outputScript>

[merlincaf]

Thanks, this solution is great, but

1. I click OK and I switch to another page
2. in this page I click on dataScroller
3. I click OK to switch to another page but I see multiple confirm window and the datascroller not switch

This solution works fine only in the first time, why?

My datascroller is in the footer of the dataTable and the dataTable is render by datascroller:

...
<f:facet name="footer">
  <rich:dataScroller id="myDataScroller" for="tableMemberships"  maxPages="5" fastControls="hide" scrollListener="#{usersBean.pageListener}" render="@form" page="#{usersBean.currentPage2}" status="loadStatus"  oncomplete="rewriteScrollerFunction(#{rich:component('myDataScroller')})" title="#{label['title.paginator.cert.alert']}">
  </rich:dataScroller>
  <h:outputScript >
       jQuery(document).ready(function() { 
            rewriteScrollerFunction(#{rich:component('myDataScroller')}); 

       }); 
       function rewriteScrollerFunction(scroller) { 
            scroller.switchToPageBase = scroller.switchToPage; 

            scroller.switchToPage = function(pageIndex) { 
                 if (confirm('GO ?')) { 
                      return this.switchToPageBase(pageIndex); 
                 } 
      } 
       } 
  </h:outputScript>
</f:facet>    
</rich:dataTable>

[bluez974]

I think it's because you specify to render the form in your scroller. So the rewriteScrollFunction is called twice :

the first time through the jquery(document).ready which is called when the form is reRenred

the second time in the oncomplete of the element

you can try to remove the oncomplete of the dataScroller and keep the render="@form"

or to put the outputScript outside the form so that it is just called on the first load of the page

have a good we

[merlincaf]

removing the onComplete everything works fine.

Thank you so much, you were very helpful!