0

私はjqueryオートコンプリートを使用してページで作業しているので、クライアントに名前を入力しているときに、そのフレーズを含むmacthをデータベースで検索します。したがって、「LIKE」を使用します。また、データベースから自動的にロードされるレコードを表示し、1つをクリックすると、データベースからより多くの情報をロードするように、jqueryシルダーをまとめました。

当然のことながら、これらの2つのコードは正常に機能するため、データベースからテキスト入力をロードするだけで、serprateページでjqueryがオートコンプリートされます。jqueryスライダーは、手動で入力されたデータとphpによってデータベースからロードされたデータで正常に機能します。

しかし、それらをまとめると、問題はjqueryスライダーからのスタイルで画面にレコードが表示されることですが、レコードをクリックしても何も表示されないため、スライダーは表示されません（atmはテスト用のスライダーの手動htmlデータのみです）

私はそれらをserpeatreで実行し、それらを異なるdivタグに配置するなどのマルチプルテストを試しました。私はそれを単一のSQLクエリで動作させることができましたが、データをロードするためにページを更新する必要がないため、これを行う必要はありません。

私は両方のファイルからコードを配置したので、最初の1つは、レコードを作成するためのajaxリクエストを呼び出すものです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
    $(".recordrow").click(function() {
        var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
        $("#"+divid).show().animate({ "right": '0%'}); //Bring the div from right to left with 200px padding from the screen
    });

    $('#bt-close').click(function(){
     $('.details').animate({right:-2000}, 500);

    });

    });


    function getStates(value){

    $.post("sql.php",{partialState:value},function(data){
    $("#results").html(data);
    });
    }
    </script> 

    <input type="text" onkeyup="getStates(this.value)"/>
    <br />
    <div id="results">

    </div>

そして、これはデータベースを照会するページです

<?php 
if($_POST['partialState']){
mysql_connect("localhost","root")or die (mysql_error());
mysql_select_db("ict_devices") or die (mysql_error());

$test=$_POST['partialState'];
$text="... More details of the records";

$states = mysql_query("Select * from students Where FirstName LIKE '%$test%'");

while($state= mysql_fetch_array($states)){
echo '<div class="recordrow" id="row-$state["id"]">'.$state['FirstName'].'</div>';
echo '<div class="details" id="details-$state["id"]">'.$text.'<a href="#" id="bt-close">Close</a></div>';
}
}
?>

どんな助けでも大いに活用されるでしょう

4

1 に答える 1

0

ajaxで取得した後、「recordrow」divにクリック機能をバインドする必要があると思います。あなたのコードには、クリックイベントがバインドされた瞬間に「レコード行」がありません。したがって、次のようなものが必要です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    function getStates(value){
        $.post("sql.php", function(data){
            $("#results").html(data);
            $('.recordrow').each(function() {
               $(this).bind('click', function() {
                   var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
                   $("#"+divid).show().animate({ "right": '0%'}); //Bring the div from right to left with 200px padding from the screen
               });
            });
            $('#bt-close').each(function() {
                $(this).bind('click', function(){
                    $('.details').animate({right:-2000}, 500);
                });

            });
        });
    }
</script>

あなたの ajax は正しく、既に DOM にあるスライダー レコード行をテストすると、クリックは正しくバインドされます。それが部分的に機能する理由です

編集:私は自分のコードをテストし、bt-close イベントのバインディングを追加します。クリックすると詳細が表示され、アニメーションが起動します

于 2012-09-07T05:48:33.003 に答える