【问题标题】:how to know when the DOM is ready again after adding a node from ajax从ajax添加节点后如何知道DOM何时再次准备就绪
【发布时间】:2011-10-10 12:42:42
【问题描述】:

我通过 ajax 收到一个 JSON 文件并将其添加到我的 DOM(请参阅: how to read information of an ajax-dialogbox)

现在我想访问这个 DOM 节点,但它工作的唯一方法是:

get_ajax_dialogwindow();
alert("wait for click");
alert("Test Combo" + combobox_by_name(value.ID_of_name));

这工作得很好,但我不希望用户先点击。如果我只尝试

get_ajax_dialogwindow();
alert("Test Combo" + combobox_by_name(value.ID_of_name));

我只得到了数据应该存在的空白空间......我猜这是因为 DOM 还没有准备好。我尝试了 $(document).ready, setTimeout, .delay(), ajax.stop, DOMContentReady 但唯一有效的是一个简单的 alert("wait");但我不能接受那个解决方案,因为我不希望用户点击 20 次:P

有什么想法吗?

谢谢! :)

编辑:

代码如下:

function combobox_by_name(ID_of_name){
  return $('select[name=audience\\[' + ID_of_name + '\\]\\[value\\]] option:selected').text();
}

以及我在警报之前使用 HTML 节点插入进行的 ajax 调用:

function get_ajax_dialogwindow(){
var data = '__a=1&__d=1&__user='+get_userID();                              //Parameter für den Ajax Aufruf. Bestehend aus __a=1, __d=1 und der UserID
var json;
$.ajax({
    type:"GET",
    url: get_ajax_url(),                                                    //url für empfänger des Ajax Aufrufs. Lässt sich mit Firebug herausfinden, wenn man den link der das Dialogfenster öffnet analysiert
    data: data,
    dataType: "text",                                                       //eigentlich ist es json und kein text, allerdings gibt es einen Schutz von Facebook, 
                                                                            //der die Dauerschleife for(;;;) vorne heranschiebt. Deshalb wird es als Text betrachtet
    success: function(response) {           
        response = response.replace(/.*?;{/, "{");                          //Entfernt for(;;;)
        jsonFile = JSON.parse(response);                                    //Parsed den Text in ein Json file                   
        $('#globalContainer').append(jsonFile.payload.body.__html);         //Fügt das Dialogfenster ganz unten an die Seite hinzu
    },

    error: function(xhr) {                                                  //Fehlermeldung, falls der Ajax aufruf fehlschlägt
        alert('Error!  Status = ' + xhr.status);
        alert(xhr.responseText);
    }


});

}

【问题讨论】:

  • 请给我们看看有问题的代码。
  • 你把这个警报放在哪里了?在成功处理程序内部?你是如何添加到 DOM 中的?
  • DOM 只能准备一次,之后就一直准备好了。

标签: javascript jquery dom


【解决方案1】:

使用回调函数。

function get_ajax_dialogwindow( CALLBACK ){
var data = '__a=1&__d=1&__user='+get_userID();                              //Parameter für den Ajax Aufruf. Bestehend aus __a=1, __d=1 und der UserID
var json;
$.ajax({
    type:"GET",
    url: get_ajax_url(),                                                    //url für empfänger des Ajax Aufrufs. Lässt sich mit Firebug herausfinden, wenn man den link der das Dialogfenster öffnet analysiert
    data: data,
    dataType: "text",                                                       //eigentlich ist es json und kein text, allerdings gibt es einen Schutz von Facebook, 
                                                                            //der die Dauerschleife for(;;;) vorne heranschiebt. Deshalb wird es als Text betrachtet
    success: function(response) {           
        response = response.replace(/.*?;{/, "{");                          //Entfernt for(;;;)
        jsonFile = JSON.parse(response);                                    //Parsed den Text in ein Json file                   
        $('#globalContainer').append(jsonFile.payload.body.__html);         //Fügt das Dialogfenster ganz unten an die Seite hinzu
        if ( CALLBACK ) CALLBACK();
    },

    error: function(xhr) {                                                  //Fehlermeldung, falls der Ajax aufruf fehlschlägt
        alert('Error!  Status = ' + xhr.status);
        alert(xhr.responseText);
    }


});

}

然后:

get_ajax_dialogwindow(function(){
   alert("Test Combo" + combobox_by_name(value.ID_of_name));
});

【讨论】:

  • 这是有效的。它破坏了我的架构,但它起作用了。谢谢:)
  • 您应该将回调合并到您的架构中,这是一种强大的模式,对于异步编程来说是必需的。其他解决异步问题的模式不那么干净,也更模棱两可。是的,当你不加选择地编写回调代码时,你可能会陷入回调地狱,只要聪明一点,我相信你会做到的;)
【解决方案2】:

我很确定这是因为异步 ajax 调用。您正在尝试访问尚未设置的变量。

如果您在实际访问之前发出警报,则单击确定按钮需要一些时间,因此呼叫正在完成。当代码转到下一行时,它会按预期工作,因为值已设置。

你应该在你的 coallback 函数中设置你的变量/用它做一些事情。由于您没有发布任何实际代码,我将即兴发挥:

var yourVar;
$.get("someurl", params, function (data) {
  yourVar = data; // Let's say that you set it right here
  alert(yourVar); // will work perfectly
});
alert(yourVar); // Possibly won't work because it will most likely be called before the get is completed

编辑:我在您发布代码之前完成了此答案。看来情况确实如此,但我会更深入地调查以确认。

success: function(response) {           
    response = response.replace(/.*?;{/, "{");                          //Entfernt for(;;;)
    jsonFile = JSON.parse(response);                                    //Parsed den Text in ein Json file                   
    $('#globalContainer').append(jsonFile.payload.body.__html);         //Fügt das Dialogfenster ganz unten an die Seite hinzu
    // Here it should work
    alert("Test Combo" + combobox_by_name(value.ID_of_name));
},

您还可以查看getJSON 方法,因为它是一种简写,我认为您会发现它对您的情况很有用。它返回实际的 JSON 数据,因此您无需进行任何黑魔法解析。

【讨论】:

  • 这也不起作用。我想把它放在另一个功能中,就像我现在拥有的一样
  • 您可以将其用于其他功能或任何您想要的。您只需确保在完成 ajax 调用后尝试访问该元素。
  • 既然它不起作用,我觉得这不太可能,你用萤火虫吗?如果是这样,当您将alert() 替换为console.log() 时,会产生什么结果?
  • console.log() 的工作方式相同。如果我在它前面放一个alert("wait"),那么它可以正常工作。如果我只使用console.log() 我只会得到空白空间......
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-31
  • 2023-03-11
  • 2019-09-01
  • 2013-06-12
  • 2014-07-02
相关资源
最近更新 更多