简体   繁体   中英

Bootstrap modal doesn't work on live server

Trigger Button:

while ($row = mysqli_fetch_array($result)) {
        $name = $row['name'];
        $id = $row['id'];
        echo '<a data-target="#exampleModal" class="wpmui-field-input button wpmui-submit button-primary" data-toggle="modal" data-whatever="'.$name.'">Details</a>';
        echo $id . "<br>";
    }  

Modal:

echo'
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <textarea class="form-control"></textarea>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>';

JavaScript:

echo'
<script type="text/javascript">
    window.onload = function () { 
        $("#exampleModal").on("show.bs.modal", function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data("whatever") // Extract info from data-* attributes
  var modal = $(this)
  modal.find(".modal-title").text("New message to " + recipient)
  modal.find(".modal-body textarea").val(recipient)
})
     }
</script>';  

Now I have all these codes above that will generate a Modal Box when clicked on that Trigger Button. This code seems to work fine in my localhost but it doesn't act the same in my server, and the values returned are undefined . Now, I think it might have something to do with the PHP Version, because my localhost has PHP7 and my server has PHP5. Does this mean in PHP5 does not support value field (JavaScript is .val() ) in the <textarea> tag as in <textarea value="something"> ?

Even if that's the case, what is the workaround for this problem? I tried using .html() and .text() but all it does is overwriting the value, and when you open up the modal box once again, the value will be the same for ALL modal boxes (whereas it should be different value for each recipient modal box).

看来你还没有包含必要的jquery和样式files.try包括bootstrap.js,jQuery.min.js这个可能对你有帮助www.bootply.com/mRbjbQ1JAB祝你好运。

使用chrome开发人员工具或在firefox中,具体取决于您的浏览器,单击网络选项卡并加载模式应显示的页面,检查开发人员工具的网络选项卡中列出的所有文件,以查找未找到404的人,这可能是什么东西少了。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM