0

jquery を使用して、データベースから取得した情報からテーブルを追加/作成しています。ローカルホストでコードをテストすると、追加は正常に機能しますが、Web 経由でアップロードしてサイトをナビゲートしようとすると、データベースからの情報の読み込みが遅くなり、ユーザーがボタンを複数回クリックすると表示されます。追加も複数回行われます。これが私のコードです：

$('.viewemp').live("click", function () {

    empviewmodalctr = 1;

    var userid = $(this).attr("id");

        var empviewdata = {userid:userid,action:"viewempinfo"};

        $.ajax({                        
                url:"../includes/MC.Admin.ajax.php",
                type: "POST",
                data: empviewdata,
                success: function(empinfo) {

                    var empJson = $.parseJSON(empinfo);

                    $("#employeeinfo_tbl").html(empJson.empinfo);   

                    $("#employeeemploymentinfo_tbl").html(empJson.empempinfo);      

            $('#employee-view').bPopup({
                modalClose: false
             });

                }

        });

ページ：

<div id = "employee-view">
<div id = 'employee-view-container'>

    <div id = 'employee-view-container-title'>Employee's Information</div>
    <div class = 'closebtn'><img src = '../images/close.png' style ='"width:100%;height:100%;'/></div>

        <div id = 'employee-view-container-content-left'>

            <table id = 'employeeinfo_tbl'>

            </table>

        </div>

        <div id = 'employee-view-container-content-right'>

            <table id = 'employeeemploymentinfo_tbl'>

             </table>

        </div>

 </div>

要素を再設計し、ajax 呼び出しを適切に利用し、引き続き .html() を使用することで、機能するようになりました

4

1 に答える 1

0

最初にクリックされたときにボタンを無効にし、AJAX 呼び出しが終了したときに再度有効にするため、jquery を次のように修正します。

$('.viewemp').live("click", function () {
    var clicked = this;
    $(clicked).attr('disabled', 'disabled');
    empviewmodalctr = 1;
    var userid = $(this).attr("id");
    var empviewdata = {userid:userid,action:"viewempinfo"};
    $.ajax({                        
        url:"../includes/MC.Admin.ajax.php",
        type: "POST",
        data: empviewdata,
        success: function(empinfo) {
            var empJson = $.parseJSON(empinfo);
            $("#employee-view").html("<div id = 'employee-view-container'>"+
            "<div id = 'employee-view-container-title'>Employee's Information</div>"+
            "<div id = 'closebtn'><img src = '../images/closebtn.png' style ='"+                                        "width:100%;height:100%;'/></div></div>");
            var a = "<div id = 'employee-view-container-content-left'></div>"+
            "<div id = 'employee-view-container-content-right'></div>";
            $("#employee-view-container").append(a);
            var b = "<table id = 'employeeinfo_tbl'>";
            $("#employee-view-container-content-left").append(b);
            $("#employeeinfo_tbl").append(empJson.empinfo); 
            var empemploymentviewdata = {userid:userid,action:"viewempemploymentinfo"};

            $.ajax({                        
                url:"../includes/MC.Admin.ajax.php",
                type: "POST",
                data: empemploymentviewdata,
                success: function(empemployment) {
                    var empemploymentJson = $.parseJSON(empemployment);
                    var c = "<table id = 'employeeemploymentinfo_tbl' border = 0>";
                    $("#employee-view-container-content-right").append(c);
                    $("#employeeemploymentinfo_tbl").append(empemploymentJson.empempinfo);
                }
            });
            $("#employee-view-container").append("</table></div>");             
            $('#employee-view').bPopup({
            modalClose: false
            });
        },
        complete: function() {
            $(clicked).removeAttr('disabled', '');
        }
    });
});
于 2012-07-26T13:29:05.763 に答える