bootstrap 3.3模态远程内容给出404

时间:2015-03-11 22:10:58

标签: javascript html node.js twitter-bootstrap-3 http-status-code-404

我使用带有几个组件的Bootstrap(单独删除它们并没有解决问题 - 但为了完整起见,这里有一个列表)。

我想将远程内容(test.html)加载到Modal中。它在一个独立的html页面上工作正常,但当我在项目的布局中插入完全相同的代码时,nodemon给了我一个" GET test.html 404"。 模态仍然会打开,但远程页面没有加载(显然它无法找到它,我不明白为什么)和#34; yada矢田"而是出现在模态体中。

<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/javascripts/bootstrap-tagsinput.js"></script>
<script src="/javascripts/typeahead.bundle.js"></script>
<script src="/javascripts/pinboot.js"></script>
<script src="/javascripts/bootstrap-dialog.js"></script>

<script>
      $("#myModal").on("show.bs.modal", function(e) {
        var link = $(e.relatedTarget);
        $(this).find(".modal-body").load(link.attr("href"));
      });
</script>

<a href="test.html" data-toggle="modal" data-target="#myModal" class="btn btn-default">Launch Modal</a>

<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">yada yada</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>
    </div>
  </div>
</div>

我暗中希望这是一个简单解决方案的常见问题,我只是没有向Google提供正确的问题/关键字:( 所以在这种情况下,我感谢你的耐心等待:)。

1 个答案:

答案 0 :(得分:0)

新秀错误......这是路由。 app.js中未定义的所有内容都被定向到无法处理它的脚本。 app.get('/',routes.index);

在test.ejs中重命名test.html并将其添加到app.js ...

app.get('/test', function (req, res) {
   res.render('test');
});

...并更改按钮以链接到/ test

  <a href="/test" data-toggle="modal" data-target="#myModal" class="btn btn-default">Launch Modal</a>

......让它发挥作用。万岁!

我要把它留在下一个n00b;)