0

リンクが複数ある場合、リンクの数だけモーダルダイアログが読み込まれます。

たとえば、 のリンクが 3 つあるclass="test"場合、最初のリンクをクリックすると、それぞれの上に 3 回読み込まれます。

とにかくそれを修正するには？

<a href="/user/login/" class="test">comment #1</a><br>
<a href="/user/signup/" class="test">comment #2</a><br>
<a href="/user/reset_password/" class="test">comment #3</a><br>

  $('a.test').click(function() {
        var url = this.href;
        // show a spinner or something via css
        var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
        // open the dialog
        dialog.dialog({
            // add a close listener to prevent adding multiple divs to the document
            close: function(event, ui) {
                // remove div with all data and events
                dialog.remove();
            },
            width: 400,
            modal: true
        });
        // load remote content
        dialog.load(
            url, 
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                // remove the loading class
                dialog.removeClass('loading');
            }
        );
        //prevent the browser to follow the link
        return false;
    });
4

1 に答える 1

0

これを試して...

<script type="text/javascript">
    $(document).ready(function(e) {
        $('body').append('<div id="newDialog" class="loading"></div>');
        $("#newDialog").dialog({
            close: function(event, ui) {
                $("#newDialog").html("").addClass('loading');
            },
            width: 400,
            modal: true
        });
         $('a.test').click(function() {
            var url = $(this).attr("href");
            $("#newDialog").load(
                url, 
                {},
                function (responseText, textStatus, XMLHttpRequest) {
                    $("#newDialog").removeClass('loading').dialog("open");
                }
            );
            return false;
        });  
    });
</script>

非常にコストのかかる $.dialog() を開始する必要がある回数を減らします。

また、同じクリックで複数のダイアログを取り除きます。

于 2013-03-24T04:46:57.387 に答える