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

jquery collapse button does not load remote content

本文关键字：程内容 加载 折叠 按钮 jQuery      更新时间：2023-09-26

我正在尝试创建一个可折叠的按钮，该按钮在单击后从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>

我不相信你可以在引导程序中remote data中使用带有 url href标签，

您可以使用像 folloiwng 示例这样的data-tab-url=""：

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

借助 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>

相关文章：