1

したがって、jquery ajax呼び出し、いくつかのcss変更、およびdivの再配置を含むこの長い関数がjqueryにあります。これが私のコードです：

$('.editable').click(function(e) {
    //assign the attributes for the ajax call                         
    $('#employeelist span').html("job: " + $(this).attr("editjob") + "<br />date: " + $(this).attr("editdate").substr(5));
    $('#employeelist').attr("editjob", $(this).attr("editjob"));
    $('#employeelist').attr("editdate", $(this).attr("editdate"));  
    //update the employee list with AJAX
    $.get("getDaySchedule.php", 
        {'job': $('#employeelist').attr("editjob"), 'date': $('#employeelist').attr("editdate")},
        function(responsetext){$('#employeelist ul').html(responsetext);},
        "html"
    );
    //show the employee list
    $('#employeelist').show()
    .css('top',$(this).offset().top+25)
    .css('left',($(this).offset().left+130))
    .css('visibility', "visible")
    .removeClass()
    .addClass($(this).attr('class'));
    //adjust the employee list if it goes outside the viewable area:
    if ($('#employeelist').height() + $('#employeelist').offset().top > $(window).height()) {
        newtop = ($('#employeelist').height() + $('#employeelist').offset().top) - $(window).height();
        newtop = $('#employeelist').offset().top - newtop;
        $('#employeelist').css('top',newtop);
    };
    if ($('#employeelist').width() + $('#employeelist').offset().left > $(window).width()) {
        newleft = $('#employeelist').offset().left - 260;
        $('#employeelist').css('left',newleft);
    };
});

私が抱えている問題は、コードの最後のセクション（表示可能領域の外にある場合はdivの位置を変更する）がajax呼び出しが行われる前に実行されているように見えることです。したがって、基本的にdivの高さは、応答テキストをまだ取得していないため、非常に短くなっています。これにより、divが高すぎて表示可能領域を超えてしまいます。これは、divが正しい高さから再配置されていないためです。うまくいけば、それは理にかなっています。コードに欠けているものはありますか？ありがとう！

4

2 に答える 2

1

再配置コードをAJAXコールバック関数内に移動する必要があるため、次のようになります。

 function(responsetext){$('#employeelist ul').html(responsetext);}

その関数内で、すべての再配置を行う必要があります。

于 2012-06-08T22:55:14.323 に答える
1

デフォルトでは、Ajaxは非同期です。つまり、Ajaxが呼び出されると、次のコードはajax呼び出しが返されるのを待たずに実行されます。したがって、次のコードを実行しても完了しません。ajaxの成功の範囲内でコードを移動する必要があります。

$('.editable').click(function(e) {
    var $editable = $(this);
    var $employeeList = $('#employeelist');

    //assign the attributes for the ajax call                         
    $('#employeelist span').html("job: " + $editable.attr("editjob") + "<br />date: " + $editable.attr("editdate").substr(5));
    $employeeList.attr("editjob", $editable.attr("editjob"));
    $employeeList.attr("editdate", $editable.attr("editdate"));  

    //update the employee list with AJAX
    $.get("getDaySchedule.php", 
        {'job': $employeeList.attr("editjob"), 'date': $employeeList.attr("editdate")},
        function(responsetext){
            $('#employeelist ul').html(responsetext);

            //show the employee list
            $employeeList.show()
                .css('top', $editable.offset().top+25)
                .css('left', ($editable.offset().left+130))
                .css('visibility', "visible")
                .removeClass()
                .addClass($editable.attr('class'));

            //adjust the employee list if it goes outside the viewable area:
            if ($employeeList.height() + $employeeList.offset().top > $(window).height()) {
                newtop = ($employeeList.height() + $employeeList.offset().top) - $(window).height();
                newtop = $employeeList.offset().top - newtop;
                $employeeList.css('top',newtop);
            }

            if ($employeeList.width() + $employeeList.offset().left > $(window).width()) {
                newleft = $employeeList.offset().left - 260;
                $employeeList.css('left',newleft);
            }
        }
    );    
});

編集：

私はあなたが抱えていた問題を修正するためにコードを更新しました。注：最も一般的に使用されるjqueryセレクターもキャッシュしました。コードのパフォーマンスを向上させるために、複数回使用するセレクターをキャッシュすることをお勧めします。

于 2012-06-08T22:59:52.370 に答える