CODEWITHSUNDEEP
javascriptjqueryipadtabs
TJDJD
TJDJD

Reputation: 70

JQuery UI Tabs Won't Load Content via Ajax on iPad2

I load a file called content.php into my browser. Content.php uses jquery to display some tabs for navigating between different types of content. The tabs are set up to load via Ajax.

Here is 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>

When the user clicks on the "Clients" tab, clients.php is loaded. clients.php in turn makes an ajax query to the server to get the list of clients to display on it's page.

clients.php looks like this:

<?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>

This all works perfectly on IE, Firefox, Safari on my PC, and the browser on my Acer A500 Android tablet.

However, the tab/javascript interaction somehow fails when I'm running this on an iPad2 or an iPhone 3G (my only two Apple hardware products).

If I turn off the tabs (e.g. remove the in-line javascript from content.php) and just show a list of links for each segment of content, it looks ugly but works find on the iPad. If leave the tabs on, it looks great, but won't run the javascript inside clients.php.

Based on "error_log()" lines I've put in the PHP part of clients.php, I know the clients.php file is being loaded, but based on "alert()" lines I put in the javascript, none of the java script is running.

I enabled the debug console on the ipad2 and I don't get any errors. I even put some crazy lines of non-code inside the in-line javascript in clients.php. Firefox's error console complained out them, but the iPad2's error console remained empty.

Anyway, I'm just lost in terms of figuring out why this works on my other systems but not on an iPad or iPhone. Any pointers--even clues--will be greatly and deeply appreciated.

Upvotes: 0

Views: 703

Answers (1)

Marco Johannesen
Marco Johannesen

Reputation: 13134

Could you try where clients.php dosent contain HTML structure markup.

The JQUERY-UI example only uses the HTML which needs to be listed inside the tab. Which makes me think it loads your complete strcuture into the tab, and then have a body+head tag inside the tab, which is fair enough that IOS/Safari has trouble understadning.

Could you test it with just something like this:

<?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>

Since it's executed on your page, it should NOT be necessary to reload script files.

This soloution could of course be a problem if you access the page outside the tabs.

Upvotes: 1

Related Questions