PHP：データをナビゲートする

Question

私は現在作業中のPHPサイトを持っており、ユーザーがデータを選択し、次のDIV（別画像参照）に異なるデータを表示する必要があります。基本的には、SQL SELECT文を使用してデータを取り込み、ユーザーがリスト項目をクリックできるようにするDIV（オーバーフロー：自動、スクロールする）が必要です。その項目が正しい場合、その項目は右側にdivの新しいSELECT文を作成します。これについて最善の方法で入力しますか？ PHP/HTML/CSSでは初めてです。

ザック

Answer 1

に基づいていくつかの部品を変更しました。私は使いやすいですし、トリックを持っていれば、それで素晴らしいことをすることができます。

PHP/MySQLの場合、jQuerys Ajaxの機能を使用できます（http://api.jquery.com/jQuery.ajax/参照）。コールバックを使用して、ロードされたデータを表示します（下記参照）。

ここでは、動的コンテンツを使用して別のdivを表示する方法（選択肢が増える可能性があります）について簡単な例を示します。これをAjaxと組み合わせると、必要なものを手に入れることができます。

はheadタグ内でのjQueryを含める：ボディ用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 

コード：

<!-- First Box: click on link shows up second box --> 
<div id="selectOne" style="float: left; margin-right: 10px; border: #666 thin solid; padding: 10px;"> 
    <a href="#" id="one">One</a><br /> 
    <a href="#" id="two">Two</a><br /> 
    <a href="#" id="three">Three</a> 
</div> 

<!-- Second Box: initially hidden with CSS "display: none;" --> 
<div id="selectTwo" style="float: left; margin-right: 10px; display: none; border: #666 thin solid; padding: 10px;"></div> 

<!-- The JavaScript (jQuery) --> 
<script type="text/javascript"> 

//Do something when the DOM is ready: 
$(document).ready(function() { 

//When a link in div with id "selectOne" is clicked, do something: 
$('#selectOne a').click(function() { 
    //Fade in second box: 
    $('#selectTwo').fadeIn(500); 

    //Get id from clicked link: 
    var id = $(this).attr('id'); 

    //Depending on the id of the link, do something: 
    if (id == 'one') { 
     //Insert html into the second box which was faded in before: 
     $('#selectTwo').html('One<br />is<br />selected') 
    } else if (id == 'two') { 
     $('#selectTwo').html('Two<br />is<br />selected') 
    } else if (id == 'three') { 
     $('#selectTwo').html('Three<br />is<br />selected') 
    } 
}); 
}); 
</script> 

ですから、jQuerysのAjax-機能を使用する場合は、あなたがテストしていません（そのようなものを使用することができます！ ）：

$('#selectOne a').click(function() { 

var id = $(this).attr('id'); 

    $.ajax({ 
     type: 'POST', 
     url: 'getYourData.php', 
     data: 'thisIsSentToPHPFile='+id, 
     success: function(msg){ 
      //everything echoed in your PHP-File will be in the 'msg' variable: 
      $('#selectTwo').html(msg) 
      $('#selectTwo').fadeIn(500); 
     } 
    }); 
}); 

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

$id = $_POST['id']; 
$query = mysql_query('SELECT * FROM table WHERE id='.$id); 
$result = mysql_fetch_assoc($query); 

//Now echo the results - they will be in the callback variable: 
echo $result['tablefield1'].', '.$result['tablefield2']; 

少し試してみて、ちょっと微調整してみてください。

Answer 2

これを実行する最も簡単な方法は、右部分はiframeにするために考えられます。

<a href="displaySubItems.php?company=2" target="rightColumn">Company 2</a> 

displaySubItems.phpであなたは、テーブルを埋めるためにあなたのSELECT文で$ _GET [「会社」]値を使用します。

は、次に真ん中リストの各項目はそれほどのようにリンクすることができ。

また、私は個人的にはAJAXに精通していませんが、AJAXメソッドを使用してテーブルを右に埋め込むことができますので、詳しく説明することはできません。また、iframeがより広くサポートされていると思われます。

編集：私はこれを達成するための最良の方法は、jQueryの（JavaScriptの-ライブラリ）であると思い、あなたのコメントの1