Bootstrap 4將數據傳遞到遠程模式

我正在使用NodeJs和Express。我需要將數據庫中的一些數據（MongoDB）傳遞給Bootstrap 4中的遠程模式。我知道Bootstrap在第4版中刪除了「遠程」選項，但我需要在不同文件中具有不同的內容。現在，我可以從數據庫發送數據，用遠程內容打開模式，但是這個遠程內容還沒有收到來自數據庫的數據。這是我的代碼：Bootstrap 4將數據傳遞到遠程模式

觸發按鈕：

<a id="btn1" data-remote="myContent.ejs" data-foo="<%=some.data1%>" data-fighter="<%=some.data2%>" data-toggle="modal" data-target="#Modal1">Click me!</a>

模態（在相同的文件中）：

<div class="modal fade" id="Modal1" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4>My Modal</h4> 
    </div> 
    <div class="modal-body" id="modalR"> 
<!--REMOTE CONTENT GOES HERE--> 
     <script type="text/javascript" charset="utf-8"></script> 
    </div> 
    <div class="modal-footer"> 
     <div class="form-group col-md-offset-9"> 
      <button type="submit" class="btn btn-default" data-dismiss="modal">Cancel</button> 
      <button type="submit" class="btn btn-primary" form="form1">Save</button> 
     </div> 
    </div> 
    </div> 
</div>

遠程內容（myContent.ejs）：

<form role="form" method="post" action="/fooAction" id="form1"> 
<div class="form-group"> 
    <label for="fooHere">foo</label> 
    <input type="text" class="form-control" id="fooHere" name="fooHere" value =""> 
</div> 
<div class="form-group" id="fighter"> 
    <label for="fighterHere">Fighters</label> 
    <select class="form-control" id="fighterHere" name="fighterHere"> 
     <option id="opFighters" value=""></option> 
     <option value="Fighter1">One fighter</option> 
     <option value="Fighter2">Another Fighter</option> 
    </select> 
</div> 
</form>

JS文件：

//LOAD REMOTE-CONTENT (Bootstrap 4 removed the "remote" option) 
$('body').on('click','[data-toggle="modal"]', function(){ 
jQuery($(this).data("target")+' .modal-body').load($(this).data("remote")); 
}); 
//PASS DATA TO CONTENT 
$(document).on("click", "#btn1", function() { 
var foo = $(this).data('foo'); 
var fighter = $(this).data('fighter'); 
console.log (foo); //Works! Console shows the correct data 
console.log (fighter); //Too! 
$(".form-group #fooHere").val(foo); //Doesn't show anything 
$(".form-group #opFighters").val(fighter); //Doesn't show anything 
});

我在哪裏錯了？任何人都可以幫忙嗎？謝謝！

來源

2017-02-27 cfibla

你試圖使用'$（文件）。就緒（）;''上$（」形式組#fooHere。「）VAL（富）;'和'$（」形式的組#opFighters「）VAL（戰鬥機）;'？ – webeno

我第一次嘗試它不起作用，但現在它完美地工作。問題是我不知道爲什麼需要'$（document）.ready（）;'。好吧，非常感謝@webeno – cfibla

我加了一個答案，並提供了一個解釋，希望能夠澄清它。 – webeno

嘗試將更新腳本放在$(document).ready();之內 - 這將確保瀏覽器在執行完所有內容之前加載完整文檔（包括模態）。

$(document).ready(function() { 
    $(".form-group #fooHere").val(foo); 
    $(".form-group #opFighters").val(fighter); 
});

來源

2017-02-28 11:50:55 webeno

好吧，我現在明白了！謝謝！ – cfibla

謝謝您接受正確答案！如果你喜歡它被解釋/格式化的方式，隨時也可以將我的答案投票...當然，不是必須的，當然，只要你喜歡它就可以隨心所欲;） – webeno

非常感謝給予好評！ ;） – webeno

Bootstrap 4將數據傳遞到遠程模式

回答

相關問題