Question

每当我点击生成的任何链接时，它都会打开每个链接的对话框，而不是仅针对单击链接。我知道我必须完全向后看这个。我如何确保只显示点击链接的对话框？

jQuery.support.cors = true;

$.ajax({
    type: "GET",
    url: mkadv,
    contentType: 'application/xml',
    async: true,
    dataType: 'xml',
    complete: function (jsXHR, textStatus) {
        var xmlResponse = $.parseXML(jsXHR.responseText);
        $xml = $(xmlResponse);
        $xml.find('contentItem').each(function () {
            $name = $(this).find('name');
            $link = $(this).find('link');
            $('.mkadv').append('<p><a href="' + $link.text() + '" target="_blank" class="adv" title="' + $name.text() + '">' + $name.text() + '</a></p>');
            $.ajax({
                type: "GET",
                url: $link.text(),
                contentType: 'application/xml',
                async: true,
                dataType: 'xml',
                complete: function (jsXHR, textStatus) {
                    var xmlResponse = $.parseXML(jsXHR.responseText);
                    $xml = $(xmlResponse);
                    $xml.find('advisory').each(function () {
                        $advisory = $(this).find('advisoryText');
                    })

                    $('.adv').each(function () {
                        var $alink = $(this);
                        var $dialog = $('<div>' + $advisory.text() + '</div>').dialog({
                            autoOpen: false,
                            modal: true,
                            width: 550,
                            title: $alink.attr('title'),
                            beforeClose: function (event, ui) {
                                $("body").css({
                                    overflow: 'inherit'
                                })
                            },

                            open: function (event, ui) {
                                $(this).scrollTop("0");
                                $("body").css({
                                    overflow: 'hidden'
                                })
                            },
                            buttons: [
                            {
                                text: "Ok",
                                click: function () {
                                    $(this).dialog("close");
                                }
                            }
                            ]
                        });

                        $alink.click(function () {
                            $dialog.dialog('open');
                            return false;
                        });
                    });
                },

                error: function (request, status, error) {
                    console.log("Error is" + request.responseText + " " + status + " " + error);
                }
            });
        })
    },

    error: function (request, status, error) {
        console.log("Error is" + request.responseText + " " + status + " " + error);
    }
});

Answer 1

经过多次试验和错误后，我想出了自己的错误，但我想这就是人们学习的方式。原来试图在一个内部完成所有内容，甚至嵌套，ajax调用使得事情无法正常工作。

因此，经过一些研究和更多的追踪和错误，我认为我真正需要的是一些回调函数，以便从ajax调用中获取数据并将其转换为我实际可以使用的函数。

我确信这不太理想，并且可能有一种方法可以更好地改进这一点，但这是我的最终结果，希望能帮助其他有类似问题的人。

function getAdvisories(myLink, callback) {

jQuery.support.cors = true;

$.ajax({
   type: "GET",
   url: myLink,
   contentType: 'application/xml',
   async: true,
   dataType: 'xml',
   complete: function ( jsXHR, textStatus, advisory ) {
       var xmlResponse = $.parseXML(jsXHR.responseText);
       callback(xmlResponse);    
   },
   error: function(request, status, error) {
       console.log("Error is" + request.responseText + " " + status + " " + error);
   }                      
});
}

function getAdvText(alink, callback) {
$.ajax({
   type: "GET",
   url: alink,
   contentType: 'application/xml',
   async: true,
   dataType: 'xml',
   complete: function ( jsXHR, textStatus ) {
       var xmlResponse = $.parseXML(jsXHR.responseText);
       $xml = $(xmlResponse);
       advisory = $xml.find('advisoryText').text();
       callback(advisory);
   },
   error: function(request, status, error) {
       console.log("Error is" + request.responseText + " " + status + " " + error)
   }                      
});
}

getAdvisories(mkadv, function(xml) {
$xml = $(xml);
$xml.find('contentItem').each(function(i) {
            $name = $(this).find('name');
            $link = $(this).find('link');
            id = $(this).find('id').text();
            var name = $name.text();
            var name = name.replace(/[^A-Za-z\-]/g, " ");
            $('.mkadv').append('<p><a href="'+$link.text()+'" id="'+id+'" class="adv" title="'+name+'">'+$name.text()+'</a></p>');
            setAdvDialog(id, $link, advisory);
})
});

function setAdvDialog(id, $link, advisory) {

getAdvText($link.text(), function(advtxt) {
            advisory = advtxt;
            var $alink = $('#'+id+'');
            var $dialog = $('<div>'+advisory+'</div>').dialog({
                            autoOpen: false,
                            modal: true,
                            width: 550,
                            title: $alink.attr('title'),
                            beforeClose: function(event, ui) {
                                     $("body").css({ overflow: 'inherit' })
                            },
                            open: function(event, ui) {
                                     $(this).scrollTop("0");
                                     $("body").css({ overflow: 'hidden' })
                            },
                            buttons: [
                                      {
                                         text: "Ok",
                                         click: function() {
                                         $(this).dialog("close");
                                      }
                            }
            ]
            });
            $alink.click(function() {
                $dialog.dialog('open');
                return false;
            });
});
}

防止显示多个jQuery UI对话框

1 个答案: