将ajax调用引用到多个div

Question

i have to two pages in jquery mobile and in each of the pages is a div called content and inside the divs i call external pages into it by means of ajax. 我必须在jquery mobile中有两个页面，并且每个页面中都有一个称为content的div而在div中，我通过ajax调用了外部页面。 for "page1" the call works perfectly but for "page2" the call isn't working. 对于"page1"通话的作品完美，但对于"page2"呼叫没有工作。 though the div in "page2" is having the same name as that of "page1" . 尽管“ page2”中的div与"page1"具有相同的名称。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<script language="javascript">

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setInterval(function() {
    $('#content').load('total.asp');
    }, 3000); 
    });

</script>

</head>

<body>
<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div data-role="content">
    <table width="311" border="0" cellpadding="3" cellspacing="3">
      <tr>
        <td width="77">Content</td>
        <td width="102"><div id="content"></div></td>
        <td width="102"><a href="#page2">Go to Page 2</a></td>
      </tr>
    </table>
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
<p>&nbsp;
<div data-role="page" id="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div data-role="content">
    <table width="320" border="0" cellpadding="3" cellspacing="3">
      <tr>
        <td width="77">Content</td>
        <td width="102"><div id="content"></div></td>
        <td width="102"><a href="#page1">Go to Page 1</a></td>
      </tr>
    </table>
  </div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
</p>
</body>
</html>

Answer 1

try using: 尝试使用：

$("div").find("[data-role='content']").load('total.asp');

because you have given it as data attribute. 因为您已将其指定为数据属性。 you can better use class if you have multiple id with same name in that case it will be: 如果您有多个具有相同名称的ID，那么最好使用class：

$(".content").load('total.asp');

Answer 2

ID has to be unique. ID必须是唯一的。 try changing id="content" to class="content" and then try the below code 尝试将id="content"更改为class="content" ，然后尝试以下代码

$.ajaxSetup({ cache: false });
    setInterval(function() {
        $('.content').load('total.asp');
    }, 3000); 
});

将ajax调用引用到多个div

问题描述

2 个解决方案

解决方案1
1 2015-01-06 04:50:19

解决方案2
0 已采纳 2015-01-06 04:43:42

将ajax调用引用到多个div

问题描述

2 个解决方案

解决方案1 1 2015-01-06 04:50:19

解决方案2 0 已采纳 2015-01-06 04:43:42

解决方案1
1 2015-01-06 04:50:19

解决方案2
0 已采纳 2015-01-06 04:43:42