Question

我正在尝试创建一个可折叠按钮，在单击后，从URL获取内容并将结果加载到当前页面。

当href指向同一页面内的某个位置（href =“＃abcd”）时按钮工作正常，但是当href指向远程数据时（href =“/ query / abcd”）

未捕获错误：语法错误，无法识别的表达式：/ query / abcd

/ query / abcd - 运行数据库查询并返回一个HTML表格，该表格应在可折叠按钮下呈现

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>


<div class="container">
  <a href="/query/abcd" class="btn btn-info" data-toggle="collapse">Query results here - 10 items</a>

</div>

</body>
</html>

Answer 1

我不相信您可以在href的引导程序中使用remote data标记和网址

你可以使用data-tab-url=""，如下面的例子：

https://github.com/LeaseWeb/bootstrap-remote-data#L79

Answer 2

我可以通过javascript函数的帮助将远程内容加载到可折叠按钮中：

我不知道这是不是最好的方式，但似乎有效

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
  <script type="text/javascript">
 
  function load_results() {
      $('#abcd').text("Loading results... ");
      $('#abcd').load("/query/abcd");
      return false
  };
    
 </script>


</head>


<div class="container">
  <a href="#abcd" class="btn btn-info" data-toggle="collapse" onclick="load_results()">Query results here - 10 items</a>
  <div id="abcd" class="collapse">
    test
  </div>
  </div>

</body>
</html>

jquery折叠按钮不加载远程内容

2 个答案: