web-dev-qa-db-ja.com

モーダルウィンドウのJForm

私が説明したように、カスタムツールバーボタンをクリックすると、モーダルウィンドウを作成します here そして、いくつかのデータを送信する必要があるため、このモーダルウィンドウのJFormを作成する方法に疑問があります。私はそれらが別のビューのように扱われるかどうか、またはそれらが「モーダル」であるウィンドウ内で定義される必要があるかどうかを知りません。現在、すべての動作は、「モーダル」であるウィンドウの/tmpl/default.phpファイルで定義されています。

ありがとうございました！

joomla-3.xjformmodal
3
republicca

このためには、独自のカスタムhrefを使用してカスタムHTMLツールバーボタンを作成する必要があります。これを達成するには、以下を使用します。

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

そしてdefault.phpに、

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

Joomla！以来、カスタムJSも追加する必要があります！ 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>

また、ビューはmodal-header、modal-body、modal-footerのコンテンツで応答する必要があります。

例えば：

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

Joomlaでテストしました！ 3.4.3。うまくいきました。

2
Rene Korss

追加のパラメーターを使用して任意のページを呼び出し、コンポーネント（tmpl = component）のみを表示できます。

たとえば、ツールバーにカスタムボタンを追加するには：

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

他の回答を確認できます ここ

1
Anibal

Bootstrap.modalを使用する場合、フォームはビュー内にあり、プロパティ$ formはModelを通じてアーカイブされます（モデルはJModelFormである必要があります）。 iframeでモーダルを使用する場合（Joomla Article Chooseと同様）、新しいフォームのビューを作成する必要があります。

1
Pham Minh

Joomlaのモーダルで同様の問題が発生しました。

残念ながら、通常のスタックオーバーフローに質問を投稿しました。
しかし、それはまだ一部の人々を助けることができます。

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

JFormsがmootoolsをロードし、それが残りの部分で正しく動作しないため、jFromsからVisformsに切り替えました...

これはBootstrapを使用した動的モーダルであり、ikitを使用した新しいバージョンも使用できます。

コード

これはUikit付きのバージョンです。エレガントだからといって。

基本的なモーダル構造は、インデックスファイルの先頭にあります。

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

トリガーリンクは次のようになります。

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

脚本：

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

.modal-triggerクラスとのリンクごとに、必要なUikitデータ属性data-uk-modal", "{target:'#modal'}を追加し、リンクを取得して.uk-modal-contentにロードします。

新しいコンテンツを読み込むために、モーダルを閉じた後、すべてのコンテンツが削除されます。

0
zenbormi