JForm in modal window

Question

I create a modal window when clicking on a custom toolbar button, like I was explained here and now the doubt I have is on how to create the JForm for this modal window, because they should submit some data. I guess what I don't know is if they are treated like a different view or if they should be defined inside the window they "modal" from. Right now all the behaviour is defined in the /tmpl/default.php file of the window they "modal" from.

Thank you!

Answer 1

For this you have to create custom HTML toolbar button with your own custom href. To achieve this, use:

// 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);

And in default.php, add

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

You also have to add custom JS, since Joomla! uses 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>

And your view should response with contents of modal-header, modal-body and modal-footer.

For example:

<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>

Tested it in Joomla! 3.4.3. Worked fine.

Answer 2

You can call any page with an additional parameter to show only the component (tmpl=component).

For example, to add a custom button in toolbar:

$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');

You can review other answers here

Answer 3

If you use bootstrap.modal , the form will be within your view, then the property $form should be archived through Model ( the model should be JModelForm ). If you use modal with iframe , ( similar to Joomla Article choose ) , you have to create view for the new form.

Answer 4

I had some similar problems with modals in Joomla.

Unfortunately I posted my question on the normal stackoverflow.
But maybe it can still help some people.

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

I switched from jFroms to Visforms because jForms loads mootools and that does not work properly with the rest...

It's a dynamic modal with Bootstrap and also I have a new version with Uikit.

Code

This is the version with Uikit. Just because it is more elegant.

The basic modal structure sits at the top of the index file:

<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>

The trigger links look like this:

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

Script:

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();
    }
});

On every link with the .modal-trigger class it adds the needed Uikit data attributes data-uk-modal", "{target:'#modal'}, grabs the link and loads it into the .uk-modal-content.

All content will be removed after closing the modal in order to load new content.