3

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!

2

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.

  • I'm having some problems implementing this, I think it's because of the urls I put. When I render the button which url should I use? The same one as I use inside the Ajax call? – republicca Aug 19 '15 at 11:49
  • 1
    Only thing you should edit, is $buttonHTML row. Change href to correct URL to view and change button text. That should get it working. Later you can change modal ID if you want etc. Don't change ajax call. It will work with every URL. – Rene Korss Aug 19 '15 at 11:52
  • Now when I load the new view in modal mode in will add <div class="modal-backdrop fade in"></div> and make it darker with every button click making it so that i have to click many times to be able to go back to the "back window". Any ideas? – republicca Aug 19 '15 at 14:11
  • @republicca is it working now? – Rene Korss Aug 19 '15 at 19:19
  • The modal windows are working, but the problem with the clicks is still going on. I think it has sth to do with the new views, maybe the view.html.php automatically writes this div or sth like this. – republicca Aug 20 '15 at 6:50
1

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

1

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.