0

私は自分の状況に少し困惑しています。皆さんが私の挑戦に少し光を当ててくれることを願っています!

わかりました、データベースに約 1,000 ほどの名前をロードするクエリを作成しました。各モーダル div 内にプロファイルの詳細を含むモーダル ウィンドウをロードするエコーを正常に作成しました。

問題は、入力する名前が 1,000 個ある場合、プロファイルの詳細を内部に含む各モーダルを作成する必要があり、ページの読み込みに時間がかかることです。

何らかの onclick アクションでモーダル ウィンドウを取得するより良い方法を探しているので、ページの読み込み時にすべてのモーダル ウィンドウを作成する必要はありません。おそらく、ユーザーがリンクをクリックすると、何らかの形でそれをロードするというアクションでしょうか?

これが機能する私のコードですが、繰り返しになりますが、ページの読み込みごとにすべての情報が読み込まれます。

<div  id="myModal_."$pageID"" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <script>
    $("#".$pageID."").load("admin/page1.php?m=".$pageID."");
    </script>
  </div>
</div>

<a data-toggle="modal" href="#myModal_'.$pageID.'">'.$name.'</a>

前もって感謝します！！

編集

firebug で表示されている html は次のとおりです。モーダル ウィンドウに何も読み込まれていませんか?

<div class="modal-body">
    <div id="7"></div>                                                 
    <script>
        $('a[href="#myModal7"]').on('click',function(){
        $("#7").load("admin/page1.php?m=7");
        });
    </script>
</div>

<a href="#myModal7" data-toggle="modal">Name goes here</a>
4

3 に答える 3

1 
  <div  id="myModal_."$pageID"" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-body">
        <script>
           $('a[href="#myModal'.$pageID.'"]').on('click',function(){
               $("#myModal_".$pageID." .modal-body").load("admin/page1.php?m=".$pageID."");
           });
        </script>
      </div>
    </div>


<a data-toggle="modal" href="#myModal'.$pageID.'">'.$name.'</a>
于 2013-03-25T19:04:38.280 に答える
1

この関数は、ユーザーがリンクをクリックしたときにのみ HTML を作成します。アイデアは、使用されない HTML の読み込みに多くの時間を無駄にしないようにすることです。

$(".modalLink").click(function(){
    var id = $(this).attr('id');
    if($("#myModal_" + id).length == 0) {
        var div1 = $('<div id="myModal_' + id + '" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" />');
        var div2 = $('<div class"modal-body"/>');
        $('body').append(div1);
        div1.append(div2);
    }
    $('#myModal_' + id + ' div').load("admin/page1.php?m=" + id);
    $("#myModal_" + id).modal();
    return false;
});

各リンクには、クラス「modalLink」と一意の ID が必要です。

<a id="$pageID" class="modalLink" href="#">$name</a>

あなたが使用しているモーダル スクリプトがわからないので、ここで見つけたものに合わせてコーディングしました: http://kylefox.ca/jquery-modal/examples/。テストしましたが、期待どおりに動作します。

于 2013-03-25T19:36:57.157 に答える
0 
$('#mylink').click(function(){
     $("#".$pageID."").load("admin/page1.php?m=".$pageID."");
});

これはあなたが探しているものですか？

于 2013-03-25T18:59:59.687 に答える