Question

我将一个名为content.php的文件加载到我的浏览器中。 Content.php使用jquery显示一些选项卡，用于在不同类型的内容之间导航。选项卡设置为通过Ajax加载。

这是content.php：

<?php
include_once 'bin/Cookie.inc';
Cookie::check_auth();
$cookie = new Cookie();
?>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Client Matters - Home</title>
    <link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">
        $(function()
        {
                $( "#tabs" ).tabs();
        });
    </script>
    <style type="text/css">
        body{ font: 12pt "Trebuchet MS", sans-serif; margin: 0px;}
    </style>    
</head>
<body>
<div id="tabs">
  <ul>
      <li><a href="clients.php">Clients</a></li>
      <li><a href="matters.php">Matters</a></li>
      <li><a href="contacts.php">Contacts</a></li>
      <li><a href="calendar.php">Calendar</a></li>
      <li><a href="management.php">Admin</a></li>
    <li><a href="test.html">Settings</a></li>
      <li><a href="logout.php">Logout</a></li>
  </ul>
</div>
</body>
</html>

当用户单击“客户端”选项卡时，将加载clients.php。 clients.php反过来向服务器发出ajax查询，以获取要在其页面上显示的客户列表。

clients.php看起来像这样：

<?php
include_once 'bin/Cookie.inc';
Cookie::check_auth();
$cookie = new Cookie();
?>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Client Matters - Home</title>
    <link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">

        $(function()
        {
        $.ajax(
        {
          url: 'bin/getClientList.php',
          type: 'post',
          cache: false,
          dataType: 'json',
          success: function(data) {handleFormDataPostSuccess(data);},
          error:   function(data) {handleFormDataPostFailure(data);}
        });
  });

  function handleFormDataPostSuccess(contacts)
  {
    $.each(contacts, function(index, contact)
    {
      var cname = "<tr><td>" + contact.lastName + ", " + contact.firstName + " " + contact.middleName + " " + contact.suffix + "</td>";
      var phone1Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone1) + "'>" + contact.phone1 + "</a></td>";
      var phone2Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone2) + "'>" + contact.phone2 + "</a></td>";
      var emailLink  = "<td><a href='" + "mailto:" + contact.email + "?subject='Your%20Case'" + ">" + contact.email + "</a></td></tr>";
      $('#contactTable tr:last').after(cname + phone1Link + phone2Link + emailLink);
    });

    $('#contactTable tr:odd').addClass("alt");
  }

  function handleFormDataPostFailure(error)
  {
    alert(error);
  }
    </script>
    <style type="text/css">
        body{ font: 12pt "Trebuchet MS", sans-serif; margin: 0px;}
        td{padding:1em 1em 1em 1em; vertical-align:middle}
        tr.alt {background: #D5D1B9}
        table {border-width: 0px;border-spacing: 2px;border-style: none;border-collapse: collapse}
  table th {border-width: 0px;border-style: none}
  table td {border-width: 0px;padding:1em;border-style: none;}
  tr:hover{background-color:yellow}
    </style>    
</head>
<body>
    <table id="contactTable" width="100%">
  <tr>
    <th>Name</th>
    <th>Phone 1</th>
    <th>Phone 2</th>
    <th>Email</th>
  </tr>
</table>
</body>
</html>

这一切都完美适用于我的电脑上的IE，Firefox，Safari以及我的Acer A500 Android平板电脑上的浏览器。

然而，当我在iPad2或iPhone 3G（我唯一的两个Apple硬件产品）上运行时，tab / javascript交互以某种方式失败。

如果我关闭标签页（例如从content.php中删除内嵌javascript）并只显示每段内容的链接列表，它看起来很丑，但可以在iPad上查找。如果保留选项卡，它看起来很棒，但不会在clients.php中运行javascript。

基于“error_log（）”行我已经放入了clients.php的PHP部分，我知道正在加载clients.php文件，但基于我在javascript中添加的“alert（）”行，没有java脚本正在运行。

我启用了ipad2上的调试控制台，我没有收到任何错误。我甚至在clients.php中的内联javascript中添加了一些疯狂的非代码行。 Firefox的错误控制台抱怨了它们，但iPad2的错误控制台仍然是空的。

无论如何，我只是弄清楚为什么这个在我的其他系统上运行而不是在iPad或iPhone上运行。任何指针 - 甚至线索 - 都将受到极大的赞赏。

Answer 1

您可以尝试在clients.php中包含HTML结构标记的位置。

JQUERY-UI示例仅使用需要在选项卡中列出的HTML。这让我觉得它会将完整的结构加载到选项卡中，然后在选项卡中有一个body + head标签，这足以让IOS / Safari无法解决问题。

你能用这样的东西来测试它吗？

<?php
include_once 'bin/Cookie.inc';
Cookie::check_auth();
$cookie = new Cookie();
?>
<script type="text/javascript">

        $(function()
        {
        $.ajax(
        {
          url: 'bin/getClientList.php',
          type: 'post',
          cache: false,
          dataType: 'json',
          success: function(data) {handleFormDataPostSuccess(data);},
          error:   function(data) {handleFormDataPostFailure(data);}
        });
  });

  function handleFormDataPostSuccess(contacts)
  {
    $.each(contacts, function(index, contact)
    {
      var cname = "<tr><td>" + contact.lastName + ", " + contact.firstName + " " + contact.middleName + " " + contact.suffix + "</td>";
      var phone1Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone1) + "'>" + contact.phone1 + "</a></td>";
      var phone2Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone2) + "'>" + contact.phone2 + "</a></td>";
      var emailLink  = "<td><a href='" + "mailto:" + contact.email + "?subject='Your%20Case'" + ">" + contact.email + "</a></td></tr>";
      $('#contactTable tr:last').after(cname + phone1Link + phone2Link + emailLink);
    });

    $('#contactTable tr:odd').addClass("alt");
  }

  function handleFormDataPostFailure(error)
  {
    alert(error);
  }
</script>

<table id="contactTable" width="100%">
  <tr>
    <th>Name</th>
    <th>Phone 1</th>
    <th>Phone 2</th>
    <th>Email</th>
  </tr>
</table>

由于它在您的页面上执行，因此无需重新加载脚本文件。

如果您访问标签外的页面，此解决方案当然可能会出现问题。

JQuery UI选项卡不会在iPad2上通过Ajax加载内容

1 个答案: