2011-10-18 12 views
0

私はブラウザにcontent.phpというファイルを読み込みます。 Content.phpはjqueryを使用して、さまざまなタイプのコンテンツ間をナビゲートするためのタブを表示します。タブは、Ajax経由でロードするように設定されています。ここでJQueryのUIタブはiPad2の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クエリーを行います。

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

これはすべて私のPC上でIEやFirefox、Safariで完璧に動作し、私のエイサーA500のAndroidタブレット上のブラウザ:

clients.phpは次のようになります。

しかし、私がiPad2やiPhone 3G(私の唯一の2つのAppleハードウェア製品)でこれを実行していると、タブ/ JavaScriptのやりとりはどうにか失敗します。

タブをオフにして(たとえば、content.phpからインラインのjavascriptを削除して)、コンテンツの各セグメントのリンクリストを表示すると、見た目は醜いものの、iPad上で見つけることができます。タブをオンのままにしておくと、うまく見えますが、clients.php内のjavascriptは実行されません。

私はclients.phpのPHP部分に入れましたが、clients.phpファイルがロードされていることを知っていますが、javascriptの "alert()"行に基づいています。 、Javaスクリプトのどれも実行されていません。

私はipad2でデバッグコンソールを有効にしましたが、エラーは発生しません。私はさらに、非コードの狂った行をclients.phpのin-line javascriptの中に入れました。 Firefoxのエラーコンソールはそれらを訴えたが、iPad2のエラーコンソールは空のままだった。

とにかく、これは私の他のシステムでは動作するが、iPadやiPhoneでは動作しない理由を理解するという意味では失われてしまいます。どんな指針 - 手がかりも - 大いに深く感謝されます。

答えて

1

clients.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> 

を、それが自分のページ上で実行されますので、スクリプトファイルをリロードする必要はありません。

タブの外のページにアクセスすると、このsoloutionはもちろん問題になる可能性があります。

+0

これはまさに修正です - 本当にありがとうございます!私はタブの外側にclients.phpをロードしないので、これはちょうど完璧です。 – TJDJD

関連する問題