使用JavaScript在模塊中加載表單視圖，在Yii2中

我發現了一段YouTube視頻，演示瞭如何使用模態和JavaScript創建彈出窗體。我能夠實現這個按鈕，我有。但是，我想擴展相同的功能來覆蓋我在同一視圖中的幾個按鈕。我以爲我可以使用相同的JS代碼來實現這一點，但只有第一個按鈕工作，後續按鈕不起作用。只有當我重寫JS代碼並更改每個按鈕的id時纔有可能;這對我來說效率低下，並引入了大量的逐字記錄。使用JavaScript在模塊中加載表單視圖，在Yii2中

同樣，在將表單數據保存到模式彈出窗口後，我希望模型視圖以彈出窗口模式加載，而不必將頁面重定向到controller/view頁面。我不是JavaScript的大師，但不知何故，我覺得這是可能的。這裏是鏈接到YouTube Video。

main.js文件

$(function() { 
    // get the click of the create button 
    $('#btnSeat1').click(function() { 
     $('#modal').modal('show') 
      .find('#modalContent') 
      .load($(this).attr('value')); 
    }); 
});

下面是按鈕啓動事件的onclick和模態

<?= Html::button('Book Now &raquo;', ['value' => Url::to('create'), 'class' => 'btn btn-primary', 'id' => 'btnSeat1', 'schedule_id' => $model->schedule_id]) ?> 

<?php 
    Modal::begin([ 
     'header'=>'<h4>Book Seat</h4>', 
     'id'=>'modal', 
     'size'=>'modal-lg', 
    ]); 

    echo "<div id='modalContent'></div>"; 

    Modal::end(); 
?>

來源

2017-05-27 japheth

你可以用它代替ID級別。

變化：

<?= Html::button('Book Now &raquo;', ['value' => Url::to('create'), 'class' => 'btn btn-primary', 'id' => 'btnSeat1', 'schedule_id' => $model->schedule_id]) ?>

喜歡的東西：

<?= Html::button('Book Now &raquo;', ['value' => Url::to('create'), 'class' => 'btn btn-primary loadPopup', 'schedule_id' => $model->schedule_id]) ?>

通知我已刪除了部分id並添加loadPopup類。

現在JS：

$(function() { 
    // get the click of the create button 
    $('.loadPopup').click(function() { 
     $('#modal').modal('show') 
      .find('#modalContent') 
      .load($(this).attr('value')); 
    }); 
});

這種處理使用類「loadPopup」，可以是多個，而只能有特定ID一個元素中的元素的所有點擊。

來源

2017-05-27 18:15:40 Bizley

非常感謝@Bizley。它運作良好，你是一個救世主。在這種情況下，是否也可以通過按鈕傳遞變量？就像我正在用''schedule_id'=> $ model-> schedule_id'做的一樣。我如何從控制器獲取傳遞的變量？如果你能幫我解決這個問題，你將會從這麼多中拯救我！ – japheth

如果你想傳遞一些東西給js，你可以像'value'現在這樣做（'$（this）.attr（'value'）'），如果你想傳遞一些東西給控制器，你可以使用GET方法（在Url :: to（）'的鏈接中添加更多內容）。如果你想捕捉來自控制器的東西，你需要使用'.load（）'js方法之外的東西 - 比如'.post（）'。 – Bizley

好吧，我還沒有看到通過'Url :: to（）'完成它的可能性。讓我先試試看看它是如何發展的。感謝您的洞察力。 – japheth

使用JavaScript在模塊中加載表單視圖，在Yii2中

回答

相關問題