web-dev-qa-db-fra.com

Faire le message "article enregistré avec succès" disparaître après x secondes

Disons que je modifie et enregistre un article. Le message "Article enregistré avec succès" apparaît dans le system-message-container div et colle là. Disons que maintenant je suis en train de faire des montages et que je suis interrompu par autre chose et que je reviens au bout d'un moment sur mon article. Je vois le message "Article enregistré avec succès" et cliquez sur fermer. Après cela, j'ai réalisé que le message était là depuis la première sauvegarde et que je n'ai pas sauvegardé la deuxième édition.

Je sais que je pourrais accorder plus d'attention (pas seulement à l'édition sur le Web), mais existe-t-il un moyen de faire disparaître le message "Article sauvegardé avec succès" après 20 secondes?.

PS: * Vous allez me dire que je peux cliquer sur enregistrer et fermer si je ne suis pas sûr mais je me suis retrouvé dans la situation lorsque j'ai gâché l'article à mon retour et parce que j'ai vu ce message, je me suis dit "ok pas de problème, fermez simplement l’article et rouvrez-le sans enregistrer. Vous obtiendrez la version que vous aviez à votre retour mais ... ".

Edit: contenu de administrator\templates\isis\html\layouts\joomla\system\message.php:

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  Template.Isis
 *
 * @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;

$msgList = $displayData['msgList'];

$alert = array('error' => 'alert-error', 'warning' => '', 'notice' => 'alert-info', 'message' => 'alert-success');
?>
<div id="system-message-container">
    <?php if (is_array($msgList) && $msgList) : ?>
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <?php foreach ($msgList as $type => $msgs) : ?>
            <div class="alert <?php echo $alert[$type]; ?>">
                <h4 class="alert-heading"><?php echo JText::_($type); ?></h4>
                <?php if ($msgs) : ?>
                    <?php foreach ($msgs as $msg) : ?>
                        <p><?php echo $msg; ?></p>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

contenu de administrator\templates\isis\js\template.js:

/**
 * @package     Joomla.Administrator
 * @subpackage  Templates.isis
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @since       3.0
 */

(function($)
{
    $(document).ready(function()
    {
        $('*[rel=tooltip]').tooltip();

        // Turn radios into btn-group
        $('.radio.btn-group label').addClass('btn');
        $('.btn-group label:not(.active)').click(function()
        {
            var label = $(this);
            var input = $('#' + label.attr('for'));

            if (!input.prop('checked')) {
                label.closest('.btn-group').find('label').removeClass('active btn-success btn-danger btn-primary');
                if (input.val() == '') {
                    label.addClass('active btn-primary');
                } else if (input.val() == 0) {
                    label.addClass('active btn-danger');
                } else {
                    label.addClass('active btn-success');
                }
                input.prop('checked', true);
            }
        });
        $('.btn-group input[checked=checked]').each(function()
        {
            if ($(this).val() == '') {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-primary');
            } else if ($(this).val() == 0) {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-danger');
            } else {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-success');
            }
        });
        // add color classes to chosen field based on value
        $('select[class^="chzn-color"], select[class*=" chzn-color"]').on('liszt:ready', function(){
            var select = $(this);
            var cls = this.className.replace(/^.(chzn-color[a-z0-9-_]*)$.*/, '\1');
            var container = select.next('.chzn-container').find('.chzn-single');
            container.addClass(cls).attr('rel', 'value_' + select.val());
            select.on('change click', function()
            {
                container.attr('rel', 'value_' + select.val());
            });

        });
    });
})(jQuery);
joomla-3.xadministrator
3
MagTun

Vous pouvez utiliser le jQuery suivant pour cela:

setTimeout(function() {
    $('#system-message-container').fadeOut('fast');
}, 5000);

5000 est de 5 secondes, vous pouvez donc changer cette valeur pour ce que vous voulez

Où puis-je ajouter ce code?

Option 1: C'est une méthode longue et sinueuse. Vous pouvez créer un petit plugin qui appelle ce code jQuery.

Option 2: Ajoutez simplement le code ci-dessus au fichier suivant:

administrator/templates/isis/js/template.js

Veuillez noter que l'option 2 est considérée comme un piratage principal. Par conséquent, si vous installez une mise à jour de Joomla et que des modifications ont été apportées au modèle d'administration, ces modifications seront remplacées.

Mise à jour >> Option 3:

Je viens de remarquer que vous pouvez également ajouter ceci à la substitution de modèle pour les messages système. Alors, ouvrez le fichier suivant dans un éditeur de texte:

administrator/templates/isis/html/message.php

Vous devriez voir à la ligne 14, $buffer = null;. Directement au-dessous, ajoutez ce qui suit:

$buffer .= "<script>
                setTimeout(function() {
                    jQuery('#system-message-container').fadeOut('fast');
                }, 5000);
            </script>";

Pour les messages succès uniquement, utilisez ceci:

$buffer .= "<script>    
                setTimeout(function() {
                    jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
                }, 5000);
            </script>";

J'espère que cela t'aides

5
Lodder

Cela fonctionne bien mais seulement une fois. S'il y a un deuxième message rendu, le script n'est pas déclenché.

Si vous utilisez ceci, cela fonctionne Everytime pour atténuer une alerte de succès:

setInterval(function() {
    jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
}, 5000);

Je l'utilise dans le front-end en ajoutant ceci:

$buffer .= "<script>    
            setInterval(function() {
              jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
            }, 5000);
            console.log('timout triggered');
            </script>";

après la ligne 14 dans messages.php (qui se trouvait à l’origine dans templates/beez3/html/layouts/joomla/system) et mettez-la dans votre dossier template/html.

1
TLWebdesignNL