3

Question: How to pop-up alert to a user when he/she navigate away from page without saving the Records in custom visual force page?

Details:

I have a custom visual force page i.e. "My Members" that have the following code:

<apex:page Controller="MyMember" >
<script>

function mytest() {
 if (!confirm('Are you sure to naviagte without saving Records?')) {

 }
 else {return true;}
}

window.onbeforeunload = mytest();
</script>
<apex:form id="form">


 <apex:pageblock title="Member List" >

<apex:pageBlocktable value="{!CheckSelectedList}" var="memLst" >
<apex:column title="Select" >
<apex:inputCheckbox value="{!memLst.checked}" ></apex:inputcheckbox>
</apex:column>
<apex:column headerValue="Name" >
<apex:actionRegion >
<apex:outputField value="{!memLst.KeepSelected.Name}" >
<apex:inlineEditSupport event="ondblClick"
showOnEdit="btnSave,btnCancel" hideOnEdit="btnAddSession" />
</apex:outputField>
</apex:actionRegion>
</apex:column>

</apex:pageBlocktable> 
<apex:pageblockButtons>
<apex:commandButton value="Save" action="{!save}" id="btnSave"
 style="display:none" />
 <apex:commandButton value="Cancel" action="{!cancel}" id="btnCancel"
 style="display:none" reRender="PanelId" />
</apex:pageblockButtons> 
 </apex:pageblock>
</apex:form>
</apex:page>

In my VF Page, I have a in-line edit support enable.

The issue is:

Whenever, I want to alert user when they edit records and navigate without saving the record using JavaScript (Please see above the JavaScript code I was trying). It doesn't seem to be working. Am I missing anything? Is it possible to do this using only JavaScript in Customer Visual Force Page? Need: I want when user edit the Record and leave the page without saving my function will execute and show the pop-up message.

My thoughts:

I was also thinking to execute my JavaScript function by using apex class? Should it be possible? Or any other technique how to invoke popup when the user navigate without saving the Edit records?

  • 2
    Something like this - truelogic.org/wordpress/2012/07/20/…? This is more of a JavaScript question and not Salesforce, though. – Mike Chale Jan 8 '14 at 17:23
  • I think OP is specificly questioning how this can be done from an VF page, in combination with force.com technologies. – Samuel De Rycke Jan 8 '14 at 19:57
  • The book 'Visualforce Development Cookbook' Chapter 7 'Trapping Navigation Away' also addresses this using jQuery – cropredy Jan 9 '14 at 3:00
4

As @Mike Chale mentions above, this can be done using the beforeunload JavaScript event handler (which fires when you are trying to leave the page). If is often easiest to leverage a framework like jQuery to make the actual implementation as simple as possible on your end, but the most basic version of it would look like the following:

jQuery(window).on('beforeunload', function()
{
  return 'Leaving this page will lose your changes. Are you sure?';
}

This would prompt the user, who would then be given the option of leaving the page or canceling to stay on the page.

I had to implement this a while ago, and wrote a blog post on some of the more intricate parts (determining when you allow the user to leave a page -- typically on submit).

http://michaelwelburn.com/2013/04/08/confirming-a-user-really-wants-to-leave-a-visualforce-page/

  • its almost similar to my need , but i'm using inline edit and i want to load the JavaScript event handler when i edit the record and navigate to without save record <apex:column headerValue="Name"> <apex:actionRegion > <apex:outputField value="{!my.Name}" > <apex:inlineEditSupport event="ondblClick" showOnEdit="btnSave,btnCancel"/> </apex:outputField> </apex:actionRegion> </apex:column> – Faisal Jan 15 '14 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.