1

モーダル ウィンドウを使用して記事 ID に基づく特定の情報を含む HTML フォームを表示しようとしていますが、値/ID をカスタム php 関数に渡すのに苦労しています。だから、ここにhtml/php部分があります

    while(...) :
       <a href="#" id="$row['id']" class="button">Edit</a>
    endwhile;

今js、

    $("a.button").on("click", function() {
        $("#modal").reveal();
        return false;
    });

html および php 関数

    <div id="modal">
        <?php echo showForm($needThisIDbasedOnClick); ?>
    </div>

これがすべてあなたにとって理にかなっていることを願っています、私は特定のIDを取得してphp関数に渡すのに苦労しています

$_GET['id'] を使用して値を取得するよりもreturn false;、 href 属性を削除してフォローしようとしましたが、この解決策は思い通りに機能せず、ページをリロードします...<a href="?id=17"> ...showForm($_GET['id'])

4

1 に答える 1

2

PHPコードを含むページはサーバー側で実行されます。PHP が解釈され、コンテンツがブラウザに送信されます。データを受け取った後、JS コードがクライアント側で実行されます (ブラウザの JS マシンのおかげです)。

何もリロードせずに情報を表示したい場合は、2 つの解決策があります。

  • PHP 処理中にすべての情報をページに埋め込み、それを非表示に保ち、クリックされたリンクに応じて JS コードで適切なものを表示します。(悪い解決策)

  • 指定された行の情報を返す新しい短い PHP スクリプトを呼び出す ID in パラメータを持つ AJAX 要求を使用します。

プロセスを再開すると、次のようになります。

1)最初のリクエストは、メイン スクリプトmain.phpにあります。

2)ページにはすべてのアイテムが表示され (ID のみが埋め込まれます)、情報コンテナー (非表示で空) が含まれます。

例

<!-- Your list of link with article ID -->
<div>
    <a class="articleLink" id="123" href="#">View</a>
    <a class="articleLink" id="124" href="#">View</a>
    <a class="articleLink" id="125" href="#">View</a>
</div>

<!-- The bloc that will contain info and will be shown in a popup later (hidden) -->
<div id="divInfo">
    <input type="text" name="name" value=""/>
    <input type="text" name="description" value=""/>
</div>

<script>

    $(document).ready(function() {

        // add listener to all link
        $(".articleLink").click(function(mouseEvent) {

            // Retrieve the article ID                
            var myId = $(this).attr('id');

            // Ajax call with the id of the link
            // onSuccess, fill the divInfo and show it
            $.ajax('getInfo.php', {
                dataType: 'json',
                type: 'POST',
                data: {
                    articleId: myId
                },
                success: function(data, status, xhrObj) {

                    // The data is received, update the info container
                    $("#divInfo input[name=name]").val(data.name);
                    $("#divInfo input[name=description]").val(data.desc);

                    // Show the div in a popup
                    //...
                }
            });

            return false;
        });
    });

</script>

3) 1 つのリンクをクリックすると、2 番目の PHP スクリプトgetInfo.phpへの ajax 呼び出しが実行され、指定された ID が与えられます。

4)スクリプトはデータベース内のデータを取得し、最終的に情報を返します (たとえば、JSON で)

PHP getInfo.phpが次のようなJSONを返すと仮定します。

{"name":"an article name","description":"the article description"}

注: 関数を使用して配列から PHP で JSON を簡単に生成できます。

json_encode()

5)データが受信されると、Ajax 呼び出しのメソッド onSuccess が呼び出され、データを使用してフォームに入力できます (これは一意で、ページに既に存在し、非表示になっています)。

幸運を

于 2013-02-01T05:11:43.433 に答える