Блог

Главная - Вопросы по программированию - Вкладки пользовательского интерфейса jQuery не будут загружать содержимое через Ajax на iPad2

Вкладки пользовательского интерфейса jQuery не будут загружать содержимое через Ajax на iPad2

#javascript #jquery #ipad #tabs

#javascript #jquery #iPad #вкладки

Вопрос:

Я загружаю файл с именем 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 Case'"   ">"   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.

Однако взаимодействие tab / javascript каким-то образом завершается неудачей, когда я запускаю это на iPad2 или iPhone 3G (мои единственные два аппаратных продукта Apple).).

Если я отключу вкладки (например, удалю встроенный javascript из content.php ) и просто покажите список ссылок для каждого сегмента контента, это выглядит некрасиво, но работает на iPad. Если оставить вкладки включенными, это выглядит великолепно, но не запускает javascript внутри clients.php .

На основе строк «error_log ()», которые я вставил в PHP-часть clients.php , Я знаю, что clients.php файл загружается, но на основе строк «alert ()», которые я ввел в javascript, ни один из java-скриптов не запущен.

Я включил консоль отладки на ipad2 и не получаю никаких ошибок. Я даже вставил несколько сумасшедших строк не-кода во встроенный javascript в clients.php . Консоль ошибок Firefox жаловалась на них, но консоль ошибок iPad2 оставалась пустой.

В любом случае, я просто не могу понять, почему это работает на других моих системах, но не на iPad или iPhone. Любые указания — даже подсказки — будут высоко и глубоко оценены.

Ответ №1:

Не могли бы вы попробовать, где clients.php dosent содержит разметку структуры 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 Case'"   ">"   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>

Поскольку он выполняется на вашей странице, не должно быть необходимости перезагружать файлы скриптов.

Это решение, конечно, может быть проблемой, если вы получаете доступ к странице за пределами вкладок.

Комментарии:

1. Это именно то, что нужно исправить — большое вам спасибо!! Я никогда не загружаю clients.php за пределами вкладки, так что это просто идеально.