0

G'Day All、

jQuery $ .post関数を使用して、次のようなパラメーターをPHPファイルに渡そうとしています。

  • MySQLデータベースからフライト予約情報を収集します。

  • 表示するデータを含むHTMLフォームを生成します。

  • <div>HTML出力を非表示に戻します。

  • <div>ダイアログボックスの一種として、ページの残りのコンテンツの上に表示されるように、を再表示します。

問題は、私が<div id="bookingpop" style="display:none; ... ">.show()を持っている場合、phpファイルの出力を挿入して表示するように機能するjquery行に.show()が表示(再表示)されないこと<div>です。(??)

テストとして:

  • 'display:none;'を取り出した場合 常にdivを表示するスタイル(以下のHTMLコードの状態)では、出力は$ .postを介してPHPから要素に入力されますが、明らかに常に存在します(望ましくありません)。

  • $( "#bookingpop")。hide()は、表示されている場合は非表示にしません(これもテストとして)、

  • alert(bid);問題のある行(および)の下にコメントした他のことはalert(output);、実行が許可されている場合、期待どおりに動作および表示されます。

  • 日付ピッカーも問題なく動作します。

  • #bookingpopの開始タグと終了タグの間にHTML注釈がある場合と<div>ない場合で、問題に違いはありません。

  • IE8-9、FF10、Chrome、iPad 3のSafari、他よりも広いフォームフィールド幅を解釈するIE以外の違いはありません。

ヘッダーのJS/jQuery:

<script type="text/javascript">
    function passbooking(bid) { // <- bid is the Booking ID
        $.post("bookdisplay.php", { bookref: bid },
            function(output) {
                $("#bookingpop").html(output).show();
                // alert(bid);
                // alert(output);
            });
    };

    /* Code for th jQuery-ui date picker. */
    $(function() {
        // $("#bookingpop").hide();
        $( "#pick_DATE" ).datepicker({
            changeMonth: true,
            changeYear: true,
            showOtherMonths: true,
            selectOtherMonths: true,
            dateFormat: "yy-m-d"
        });
    });

</script>

HTML / PHP:

<div style="position: absolute; top: 0px; left: 0px; height: 124px; width: 157px; border: none; margin: 0;"><img alt="Logo" src="/act/images/avncol-logo.png" />
</div>
<div style="position:absolute; left: 157px; top:0px; width: 1000px; height: 64px; border: none;">
  <h2>Aviation College Townsville:  Daily Run Sheet</h2>
</div>
<div style="position: absolute; top: 65px; left: 157px; height: 64px; width: 1000px;"><input type="text" id="pick_DATE" size="20" value="<?php echo $date ?>"/></div>

<?php
$booking_overlays = prepevents($date);
// var_dump($booking_overlays);
?>

<div class="parentDiv" style="top: 126px; left: 0px;">   <!-- create a parent div section to contain and reference the timeline <div> elements to -->
<?php
print $timesheet; // Prints a grid/daily planner made from <div> elements
print $booking_overlays; // Prints a event/bookings as time blocks over the planner (as <div>)
?>
</div>  <!-- Close the "parentDiv" -->

<!-- This div is the one that  pops up over the others to display the booking -->
<div id="bookingpop" style="position: absolute; z-index: 100; background-color:#FFF; left: 200px; top: 50px; width: 610px; height: 500px; border: 3px solid; margin: 0;"><!-- the data goes in here --></div>

</body>
</html>

私はJS/jQueryを初めて使用し、HTMLを再学習しています(CSSが存在し、JSが一般的である前からHTMLに触れていません)。誰かが場違いなもの(または単に間違っているもの)を見ることができる場合は、私に知らせてください。

4

1 に答える 1