web-dev-qa-db-fra.com

JForm dans la fenêtre modale

Je crée une fenêtre modale lorsque je clique sur un bouton de la barre d’outils personnalisée, comme je l’ai été expliqué ici et je doute maintenant de la façon de créer le formulaire JForm pour cette fenêtre modale, car ils doivent soumettre des données. J'imagine que ce que je ne sais pas, c'est si elles sont traitées comme une vue différente ou si elles doivent être définies dans la fenêtre à partir de laquelle elles sont modales. Actuellement, tout le comportement est défini dans le fichier /tmpl/default.php de la fenêtre à partir de laquelle ils ont "modalé".

Merci!

joomla-3.xjformmodal
3
republicca

Pour cela, vous devez créer un bouton de barre d'outils HTML personnalisé avec votre propre href personnalisé. Pour ce faire, utilisez:

// Toolbar object
$toolbar = JToolBar::getInstance('toolbar');

// Render the popup button
$buttonHTML = "<a class='btn btn-small' data-toggle='modal' href='".JRoute::_('index.php?option=COM_YOURCOMPONENT&view=modal&tmpl=component')."' data-target='#ajax-modal'><i class='icon-new'></i>Open modal from another view</a>";
$toolbar->appendButton('Custom', $buttonHTML);

Et en default.php, ajouter

<div class="modal fade" id="ajax-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Ajax content will be loaded here -->
        </div>
    </div>
</div>

Vous devez également ajouter un JS personnalisé, car Joomla! utilise Bootstrap 2.

<script>
jQuery(document).ready(function(){
    jQuery('#ajax-modal').on('show', function () {
        // Load view vith AJAX
        jQuery(this).find('.modal-content').load(jQuery('a[data-target="#'+jQuery(this).attr('id')+'"]').attr('href'));
    })
});
</script>

Et votre vue devrait répondre avec le contenu de modal-header, modal-body et modal-footer.

Par exemple:

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
     <h4 class="modal-title">Modal title</h4>

</div>
<div class="modal-body"><div class="te"></div></div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
</div>

Testé dans Joomla! 3.4.3. A bien fonctionné.

2
Rene Korss

Vous pouvez appeler n'importe quelle page avec un paramètre supplémentaire pour afficher uniquement le composant (tmpl = composant).

Par exemple, pour ajouter un bouton personnalisé dans la barre d’outils:

$bar = JToolbar::getInstance('toolbar');
$button = "<a class=\"btn btn-small\" onclick=\"window.open(this.href,'{$title}','scrollbars=yes,resizable=yes,location=no,menubar=no,status=no,toolbar=no,left=0,top=0,width=960,height=720');return false;\" href=\"index.php?option=com_mycomponent&view=calendar&tmpl=component\" target=\"_blank\" data-original-title=\"{$title}\" rel=\"tooltip\"><i class=\"{$icon}\"></i> {$title}</a>";
$bar->appendButton('Custom', $button, 'calendar');

Vous pouvez consulter d'autres réponses ici

1
Anibal

Si vous utilisez bootstrap.modal, le formulaire se trouve dans votre vue, la propriété $ form doit être archivée via Model (le modèle doit être JModelForm). Si vous utilisez modal avec iframe (comme dans l'article Joomla), vous devez créer une vue pour le nouveau formulaire.

1
Pham Minh

J'ai eu des problèmes similaires avec les modaux dans Joomla.

Malheureusement, j'ai posté ma question sur le stackoverflow normal.
Mais peut-être que cela peut encore aider certaines personnes.

https://stackoverflow.com/questions/33481030/joomla-3-use-form-in-modal

J'ai changé de jFroms à Visforms parce que jForms charge mootools et que cela ne fonctionne pas correctement avec le reste ...

C'est un modal dynamique avec Bootstrap et j'ai aussi une nouvelle version avec Uikit .

Code

Ceci est la version avec Uikit. Juste parce que c'est plus élégant.

La structure modale de base se situe en haut du fichier d'index:

<div id="modal" class="uk-modal">
    <div class="uk-modal-dialog">
        <div class="uk-modal-header">
            <a class="uk-modal-close uk-close"></a>
        </div>

        <div class="uk-modal-content">
            ...
        </div>
    </div>
</div>

Les liens de déclenchement ressemblent à ceci:

<a href="some internal link" class="modal-trigger">Open modal</a>

Scénario:

var $modalTrigger = $(".modal-trigger");
var $modal = $("#modal");
var $modalContent = $(".uk-modal-content");
var spinner = '<div class="uk-modal-spinner"></div>';

if( $modalTrigger.attr("href") ){
    $modalTrigger.attr("data-uk-modal", "{target:'#modal'}");
};

$modalTrigger.click(function() {
    $modalContent.append(spinner);
    $modalContent.load( $(this).attr("href") );
});

$modal.on({
    'hide.uk.modal': function(){
        $modalContent.empty();
    }
});

Sur chaque lien avec le .modal-trigger classe il ajoute les attributs de données Uikit nécessaires data-uk-modal", "{target:'#modal'}, saisit le lien et le charge dans le .uk-modal-content.

Tout le contenu sera supprimé après la fermeture du modal afin de charger du nouveau contenu.

0
zenbormi