javascript alert if information not saved

I have a site that uses javascript on textareas to watch for changes.

If the user tries to navigate away from the page without clicking the submit button to save or cancel button to cancel changes, then a javascript alert pops up telling them "you are about to navigate away from the page. You have not saved your information" or something similar.

I do this by using javascript to watch for changes on the text area, then set a changed flag. I also watch for the onbeforeunload event, which makes the "you are about to navigate away from the page" message come up when something changes.

I would like to do something similar with FCK. I can't find a javascript hook that would allow FCK to call a function when the user has changed the text.

I need an onChange event for FCK.

Has any one found any way to make a message such as this pop up when using FCK?

Wed, 06/11/2008 - 01:08

douglassdavis

Joined: 08/06/2008

Posts: 20

Re: javascript alert if information not saved

Ok, so just figured this out.

it's like this


unsaved_changes='N';

function sc_change_made()
{
   unsaved_changes='Y';
}


function sc_FCK_check(editorInstance)
{
   if (editorInstance.IsDirty() ) {
      sc_change_made();
   }
}

function sc_watch_FCK(editorInstance)
{
  editorInstance.Events.AttachEvent( 'OnSelectionChange', sc_FCK_check ) 
}


function FCKeditor_OnComplete(fck_editor) 
{
   sc_watch_FCK(fck_editor);
}


function sc_ask()  {
   if (unsaved_changes=='Y'){
      return 'You changed some information, but did not save it.';
   }
}

window.onbeforeunload = sc_ask;

I think this is all of the code, but it will ask the user if they want to leave the page if they don't save.

Note that all Save and Cancel buttons need to set unsaved_changes to N before they submit/leave the page.

Fri, 06/13/2008 - 09:38

fredck

Joined: 19/01/2007

Posts: 898

Re: javascript alert if information not saved

What about making the IsDirty() check when "onbeforeunload" is fired only? I would be much simpler and would perform better.

Frederico Knabben
CKEditor Project Lead and CKSource Owner
--
Follow us on: Twitter | Facebook | Google+ | LinkedIn

Fri, 06/13/2008 - 14:54

douglassdavis

Joined: 08/06/2008

Posts: 20

Re: javascript alert if information not saved

fredck wrote:What about making the IsDirty() check when "onbeforeunload" is fired only? I would be much simpler and would perform better.

good idea.

i had turned a solution for textareas and text boxes/w onChange into this solution, so that's how i came up with this one.

It works fine for me because I still may have four FCK editors on screen or FCK editors along with text boxes.

Now all I have to do is put each text box in the saveChange class and each submit button/cancel button in the submitButton/cancelButton class and this run this function on page load:

<input class='saveChange' type='text' name='somename'>


function sc_initialize()
{
   watchable = document.getElementsByClassName('saveChange');

   for(i = 0; i < watchable.length; i++) {
      Event.observe(watchable[i], 'change', sc_change_made);
   }

   buttons = document.getElementsByClassName('saveButton');
   buttons = buttons.concat(document.getElementsByClassName('cancelButton'));
         
   for(i = 0; i < buttons.length; i++) {
      Event.observe(buttons[i], 'click', function() {sc_saved_or_cancelled(); return true;} );
   }

   window.onbeforeunload = sc_ask;
}


Event.observe(window, 'load', sc_initialize, false);

So, really instead of a specialized solution for FCK, it was originally a more general solution. But,i agree the other way would be more efficient for FCK editors.

Sat, 10/04/2008 - 14:12

nekkro-kvlt

Joined: 04/10/2008

Posts: 1

Re: javascript alert if information not saved

Here my solution:

var fckInstances=new Array();
var fckTimer;
function FCKeditor_OnComplete( editorInstance )
{
    fckInstances.push(editorInstance);
    startTimer();
    //editorInstance.Events.AttachEvent( 'OnAfterSetHTML', fckUpdated ) ;
   // editorInstance.Events.AttachEvent( 'OnSelectionChange', fckUpdated ) ;

}
function fckUpdated( editorInstance )
{
   alert(editorInstance.Name);
}
function startTimer() {

   fckTimer = window.setInterval("timerCallback()",60000); //1 minute
   return false;
}
function timerCallback()
{
   for(var i=0; i<fckInstances.length;i++)
   {
      if(fckInstances[i].IsDirty())
      {
         alert(fckInstances[i].GetHTML( true ));
         fckInstances[i].ResetIsDirty();
      }
   }
}

function clearTimer()
{
   window.clearInterval(fckTimer);
   return false;
}

You just have to adjust the timer to the desired value