Bootstrap 4 将数据传递给远程模式

Posted 2023-03-08

【中文标题】Bootstrap 4 将数据传递给远程模式

【英文标题】：Bootstrap 4 pass data to a remote modal

【发布时间】：2017-07-18 15:40:52

【问题描述】：

我正在使用 NodeJs 和 Express。我需要将一些数据从数据库（MongoDB）传递到 Bootstrap 4 中的远程模式。我知道 Bootstrap 删除了 v4 中的“远程”选项，但我需要在不同的文件中有不同的内容。 现在，我可以从数据库发送数据，打开带有远程内容的模式，但是这个远程内容还没有收到来自数据库的数据。 这是我的代码：

触发按钮：

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

我哪里错了？ 有人可以帮忙吗？ 谢谢！

【问题讨论】：

你试过在$(".form-group #fooHere").val(foo);和$(".form-group #opFighters").val(fighter);上使用$(document).ready();吗？

我第一次尝试它没有工作，但现在它完美地工作了。问题是我不知道为什么需要$(document).ready();。好吧，非常感谢@webeno

我添加了它作为答案，并提供了解释，希望它澄清它。

【参考方案1】：

尝试将更新脚本放在 $(document).ready(); 中 - 这将确保浏览器等到完整文档（包括您的模式）加载完毕后再执行随附的内容。

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

【讨论】：

好的，我现在明白了！谢谢！

感谢您接受正确的答案！如果您喜欢它的解释/格式化方式，请随时投票支持我的答案......当然，不是必须的，只要您喜欢它，您就可以随心所欲;）

哈哈哈，有时它就是这么简单... ;) 我很高兴能为你解决它！