Are you sure you want to navigate away from this page? Browser popup to avoid accidental tab closure while editing

Question

Is there a way to force my browser (Chrome) when I edit (JCE) an article on frontend to display a message preventing accidental tab closure or redirection?

I often make that mistake on to close a tab and lose all my work.

Sometime by clicking backward I can get back my work, but it often doesn't work.

Notice that I'm aware I should be careful where I click and that I should save often.

EDIT:

function getJavaScript($message) {


    $javascript .= 'if(window.addEventListener){ // Mozilla, Netscape, Firefox' . "\n";
    $javascript .= '    window.addEventListener("load", function(){ alert("' . $message . '");}, false);' . "\n";
    $javascript .= '} else { // IE' . "\n";
    $javascript .= '    window.attachEvent("onload", function(){ alert("' . $message . '");});' . "\n";
    $javascript .= '}';
    return $javascript;
}

$doc = JFactory::getDocument();
$doc->addScriptDeclaration( getJavaScript( 'Make sure you have saved your JCE content.' ) );

EDIT 2: C:My templates\protostar\html\com_content\form\edit.php file

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_content
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

JHtml::_('behavior.tabstate');
JHtml::_('behavior.keepalive');
JHtml::_('behavior.calendar');
JHtml::_('behavior.formvalidation');
JHtml::_('formbehavior.chosen', 'select');
JHtml::_('behavior.modal', 'a.modal_jform_contenthistory');

// Create shortcut to parameters.
$params = $this->state->get('params');
//$images = json_decode($this->item->images);
//$urls = json_decode($this->item->urls);

// This checks if the editor config options have ever been saved. If they haven't they will fall back to the original settings.
$editoroptions = isset($params->show_publishing_options);
if (!$editoroptions)
{
    $params->show_urls_images_frontend = '0';
}
/// lodder code pour pop up front end
$js = '
    var needToConfirm = true;

    window.onbeforeunload = confirmExit;
    function confirmExit() {
        if (needToConfirm) {
            return "Make sure you have saved your JCE content";
        }
    }    
';


/// end lodder code pour pop up front end


?>

<script type="text/javascript">
    Joomla.submitbutton = function(task)
    {
        if (task == 'article.cancel' || document.formvalidator.isValid(document.getElementById('adminForm')))
        {
            <?php echo $this->form->getField('articletext')->save(); ?>
            Joomla.submitform(task);
        }
    }
</script>
<div class="edit item-page<?php echo $this->pageclass_sfx; ?>">
    <?php if ($params->get('show_page_heading', 1)) : ?>
    <div class="page-header">
        <h1>
            <?php echo $this->escape($params->get('page_heading')); ?>
        </h1>
    </div>
    <?php endif; ?>

    <form action="<?php echo JRoute::_('index.php?option=com_content&a_id='.(int) $this->item->id); ?>" method="post" name="adminForm" id="adminForm" class="form-validate form-vertical">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-primary" onclick="Joomla.submitbutton('article.save')">
                    <span class="icon-ok"></span>&#160;<?php echo JText::_('JSAVE') ?>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn" onclick="Joomla.submitbutton('article.cancel')">
                    <span class="icon-cancel"></span>&#160;<?php echo JText::_('JCANCEL') ?>
                </button>
            </div>
            <?php if ($params->get('save_history', 0)) : ?>
            <div class="btn-group">
                <?php echo $this->form->getInput('contenthistory'); ?>
            </div>
            <?php endif; ?>
        </div>
        <fieldset>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#editor" data-toggle="tab"><?php echo JText::_('COM_CONTENT_ARTICLE_CONTENT') ?></a></li>
                <?php if ($params->get('show_urls_images_frontend') ) : ?>
                <li><a href="#images" data-toggle="tab"><?php echo JText::_('COM_CONTENT_IMAGES_AND_URLS') ?></a></li>
                <?php endif; ?>
                <li><a href="#publishing" data-toggle="tab"><?php echo JText::_('COM_CONTENT_PUBLISHING') ?></a></li>
                <li><a href="#language" data-toggle="tab"><?php echo JText::_('JFIELD_LANGUAGE_LABEL') ?></a></li>
                <li><a href="#metadata" data-toggle="tab"><?php echo JText::_('COM_CONTENT_METADATA') ?></a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="editor">
                    <?php echo $this->form->renderField('title'); ?>

                    <?php if (is_null($this->item->id)) : ?>
                        <?php echo $this->form->renderField('alias'); ?>
                    <?php endif; ?>

                    <?php echo $this->form->getInput('articletext'); ?>
                </div>
                <?php if ($params->get('show_urls_images_frontend')): ?>
                <div class="tab-pane" id="images">
                    <?php echo $this->form->renderField('image_intro', 'images'); ?>
                    <?php echo $this->form->renderField('image_intro_alt', 'images'); ?>
                    <?php echo $this->form->renderField('image_intro_caption', 'images'); ?>
                    <?php echo $this->form->renderField('float_intro', 'images'); ?>
                    <?php echo $this->form->renderField('image_fulltext', 'images'); ?>
                    <?php echo $this->form->renderField('image_fulltext_alt', 'images'); ?>
                    <?php echo $this->form->renderField('image_fulltext_caption', 'images'); ?>
                    <?php echo $this->form->renderField('float_fulltext', 'images'); ?>
                    <?php echo $this->form->renderField('urla', 'urls'); ?>
                    <?php echo $this->form->renderField('urlatext', 'urls'); ?>
                    <div class="control-group">
                        <div class="controls">
                            <?php echo $this->form->getInput('targeta', 'urls'); ?>
                        </div>
                    </div>
                    <?php echo $this->form->renderField('urlb', 'urls'); ?>
                    <?php echo $this->form->renderField('urlbtext', 'urls'); ?>
                    <div class="control-group">
                        <div class="controls">
                            <?php echo $this->form->getInput('targetb', 'urls'); ?>
                        </div>
                    </div>
                    <?php echo $this->form->renderField('urlc', 'urls'); ?>
                    <?php echo $this->form->renderField('urlctext', 'urls'); ?>
                    <div class="control-group">
                        <div class="controls">
                            <?php echo $this->form->getInput('targetc', 'urls'); ?>
                        </div>
                    </div>
                </div>
                <?php endif; ?>
                <div class="tab-pane" id="publishing">
                    <?php echo $this->form->renderField('catid'); ?>
                    <?php echo $this->form->renderField('tags'); ?>
                    <?php if ($params->get('save_history', 0)) : ?>
                        <?php echo $this->form->renderField('version_note'); ?>
                    <?php endif; ?>
                    <?php echo $this->form->renderField('created_by_alias'); ?>
                    <?php if ($this->item->params->get('access-change')) : ?>
                        <?php echo $this->form->renderField('state'); ?>
                        <?php echo $this->form->renderField('featured'); ?>
                        <?php echo $this->form->renderField('publish_up'); ?>
                        <?php echo $this->form->renderField('publish_down'); ?>
                    <?php endif; ?>
                    <?php echo $this->form->renderField('access'); ?>
                    <?php if (is_null($this->item->id)):?>
                        <div class="control-group">
                            <div class="control-label">
                            </div>
                            <div class="controls">
                                <?php echo JText::_('COM_CONTENT_ORDERING'); ?>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
                <div class="tab-pane" id="language">
                    <?php echo $this->form->renderField('language'); ?>
                </div>
                <div class="tab-pane" id="metadata">
                    <?php echo $this->form->renderField('metadesc'); ?>
                    <?php echo $this->form->renderField('metakey'); ?>

                    <input type="hidden" name="task" value="" />
                    <input type="hidden" name="return" value="<?php echo $this->return_page; ?>" />
                    <?php if ($this->params->get('enable_category', 0) == 1) :?>
                    <input type="hidden" name="jform[catid]" value="<?php echo $this->params->get('catid', 1); ?>" />
                    <?php endif; ?>
                </div>
            </div>
            <?php echo JHtml::_('form.token'); ?>
        </fieldset>
    </form>
</div>

Lodder · Accepted Answer · 2014-07-23 12:20:09Z

6

You can use the following Javascript which will bring up a alert box asking if you want to leave the page or stay on it when you go to close a browser tab.

<script>
    window.onbeforeunload = function() {
        return 'Make sure you have saved your JCE content';
    }
</script>

If you're wondering where to add your code, you can either:

Add it to your admin template index.php file, however this is a core hack to any template updates will override this change.
You can create a small Plugin which executes this code.
Create a Template Override for com_content view and inject the above code into the head using Joomla's addScriptDeclaration() function.

Update:

$js = '
    var needToConfirm = true;

    window.onbeforeunload = confirmExit;
    function confirmExit() {
        if (needToConfirm) {
            return "Make sure you have saved your JCE content";
        }
    }    
';
$doc = JFactory::getDocument();
$doc->addScriptDeclaration($js);

edited Jul 23 '14 at 12:20

answered Jul 14 '14 at 16:03

Lodder

23.9k3 gold badges37 silver badges80 bronze badges

2

This code would have to be added only when the article is being edited. If it is generically added without detection for JCE it will alert the user even if they are a guest/member. Although detection for a super user could get around all of it. – Jordan Ramstad Jul 14 '14 at 22:30
@lodder Thanks! Jordan is right, this script alerts even when a simple visitor navigate on my website. Is there a way to make this alert appear only when an article is edited on front-end? – JinSnow Jul 15 '14 at 8:29
Sorry, when I said template index.php, I was referring to your admin template, not the frontend one ;) I've updated my answer with another option too – Lodder Jul 15 '14 at 8:33
@Lodder I could find the administrator/components/com_content folder but I am not sure in which file I am suppose to add the code. Is it: administrator/components/com_content/views/article/view.html.php ? – JinSnow Jul 15 '14 at 9:34
com_content\views\article\tmpl\edit.php, however as mentioned in my answer, you should create a template override rather than edit the core file – Lodder Jul 15 '14 at 9:36

| show 22 more comments

Eva Farkasne · Accepted Answer · 2014-07-25 08:32:25Z

My idea would be to add js script with a module called Jumi , set which pages to appear on and the permissions to limit it to editors or administrators only. http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content/1023

Stack Exchange Network

current community

your communities

more stack exchange communities

Are you sure you want to navigate away from this page? Browser popup to avoid accidental tab closure while editing

2 Answers 2

Update:

Your Answer

Not the answer you're looking for? Browse other questions tagged joomla-3.x editor jce front-end browser-detection or ask your own question.

Hot Network Questions

Are you sure you want to navigate away from this page? Browser popup to avoid accidental tab closure while editing

2 Answers 2

Update:

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged joomla-3.x editor jce front-end browser-detection or ask your own question.

Related

Hot Network Questions