Вкладки пользовательского интерфейса JQuery не будут загружать контент через Ajax на iPad2 - PullRequest
0 голосов
/ 18 октября 2011

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

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

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

Основываясь на строках "error_log ()", которые я поместил в PHP-часть файла clients.php, я знаю, что файл clients.php загружается, но основываясь на строках "alert ()", которые я вставил в javascript, ни один из сценариев Java не запущен.

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

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

1 Ответ

1 голос
/ 18 октября 2011

Не могли бы вы попробовать, если бы client.php не содержал разметку структуры HTML.

В примере JQUERY-UI используется только тот HTML-код, который должен быть указан на вкладке.Это заставляет меня думать, что оно загружает ваше полное strcuture во вкладку, а затем имеет вкладку 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>

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...