0

フォームからユーザー入力を取得し、その情報を PHP ファイルに送信して cURL 呼び出しを外部サーバーに送信する検索ページがあります。次に、PHP ファイルはサーバーから返された配列を取得し、元の検索ページの「結果」div に HTML をエコーし​​ます。

私がやりたいのは、ユーザーが「結果」divの項目の1つをクリックすると、クリックされた個々の項目に関する詳細情報を含むモーダルウィンドウが表示されるように設定することです.

単一の一意のリンクのクリックを処理し、サーバーに再度クエリを実行してモーダル ウィンドウを生成する jQuery スクリプトを作成する方法を知っています (モーダル ボックスを追加情報でフォーマットし、適切なサイズにする別の PHP ファイルを介して)。どうすればよいかわからないのは、動的に作成されたコンテンツでこれらすべてを処理することです。

最初の PHP ファイルがエコーする内容は次のとおりです。

[編集時に削除; 下記参照]

サーバーから返された配列内の「リスト」ごとにそれを行います。

#modalLaunch div のアンカー タグがクリックされたときにモーダル ウィンドウを作成するために私が考え出したことは次のとおりです (これは、モーダル ウィンドウとそのコンテンツを操作する方法を理解するために使用しているテスト ページからのものです)。

[編集時に削除、以下を参照]

このメソッドを完全に放棄して「onClick」戦略を使用する必要があるのではないかと疑い始めていますが、すべての関数間で関連する情報を渡す方法がわかりません。ヘルプ！

編集：

私はこの質問をするのに本当にひどい仕事をしました。ごめんなさい。私が使用しているコードのより良い表現は次のとおりです。

PHP ファイル:

($data は、外部サーバーから取得された配列です。不要な変数の束を削除したので、適切なものにマップされていると仮定してください。)

$data = unserialize($data);

$listings = $data["listings"];

echo "<ul id='listings_grid'>";

for($i=0;$i<$data["count"];$i++)
{
    $url = "/listings/".$listing_id;

    echo "<li>
            <a href='' target='_blank' data-listing-id='".$listing_id."'>
                    <div class='listing_thumb_image_container'>
                        <img class='listing_thumb_image' src='".$mainPhoto."'/>
                    </div>
                    <div class='listing_thumb_content'>
                        <br>Rent: $".$rent."
                        <br>Bedrooms: ".($bedrooms_count==0 ? "Studio" : ($bedrooms_count=='0.5' ? "Convertible" : $bedrooms_count))."
                        <br>Listing ID: ".$listing_id."
                    </div>
            </a>
        </li>";

}

echo "</ul>";

検索ページ:

（繰り返しますが、余分なものをたくさん引き出します。）

<?php
<script>

$(document).ready(function(){
$.post($("#html-form").attr("action"),$("#html-form").serialize(),function(data){
    $("#search_results").html(data);
});
});

$(document).ready(function(){
$("#html-form").on('change submit',function(){
    $.post($("#html-form").attr("action"),$("#html-form").serialize(),function(data){
        $("#search_results").html(data);
    });
    return false;
});
});

$(document).on('click','#search_results li',function(){
$('.modalDialog').css('display','block','opacity','1','pointer-events','auto');
var href = $(this).children('a').attr('href');
$('#openModalContent').load(href);
return false;
});

</script>

<div id="openModal" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <div id="openModalContent"></div>
</div>

</div>

<div id="content">

<div id="search_form"><form></form></div>
<div id="search_results" style="margin:0 auto;"></div> 

</div>

<?php include ('footer.php'); ?>

ここからどこへ行けばいいの？何らかの理由で、これまでの回答で提示されたオプションをプラグインすると、モーダル ボックスが表示されません。CSS に関係している可能性があります。現在、モーダル ウィンドウは :target 疑似クラスが適用された場合にのみ不透明になります。提案？

4

2 に答える 2

1

JQuery 1.9以降を使用している場合、動的に生成されたコンテンツで何かを実行できるようにする場合は、次を試してください。 

$(document).on('click','#openModalContent li',function(){
    var href = $(this).children('a').attr('href');
    $('#yourModalBox').load(href).show(888);
    return false;
});
于 2013-04-03T17:20:47.790 に答える