$ (tài liệu) .đã tương đương với nội dung được tải không đồng bộ

Tôi có một giao diện người dùng (hãy gọi nó là trang 1) có rất nhiều HTML và JavaScript trong đó. Khi một số các yếu tố trên trang 1 được nhấn vào, một jQuery UI Dialog được mở ra và nạp với một trang từng phần (chúng ta hãy gọi đó trang 2):

$("#myDialog").dialog({ modal: true /* Other options */ }); 
$('#myDialog').load('page2Link', { }, function() { }); 
$('#myDialog').dialog('open');

Trang 2 sau đó có một loạt các HTML và JavaScript cũng. Ví dụ đơn giản:

<script src="Scripts/page2Stuff.js" type="text/javascript"></script> 

<div id="page2Body"> 
    <!-- More elements --> 
</div>

Tôi có JS bên trong page2Stuff.js cần đợi cho đến khi trang 2 được hiển thị hoàn toàn. Có điều gì tôi có thể sử dụng trong trang này một phần để xem liệu HTML mới đã được thêm vào DOM chưa? Tôi đã thử các cách sau:

$('#myDialog').load('page2Link', { }, page2ReadyFunction);

Không thể tìm thấy page2ReadyFunction. Tôi giả sử vì .load chạy JavaScript trong page2Stuff.js và sau đó loại bỏ nó hoặc một cái gì đó?

Cách tôi có thể làm cho nó hoạt động ngay bây giờ để sử dụng setTimeout và liên tục kiểm tra xem nếu $('#page2Body') trả lại bất kỳ điều gì nhưng điều này có vẻ không lý tưởng.

Nguồn

2012-01-09 xbrady

page2Độ chính xácĐịa chỉ sẽ là trình xử lý gọi lại được gọi khi hoàn thành tải. đó sẽ là cách tốt nhất để đi, không biết tại sao nó không được gọi? bạn có thể giải thích cách bạn đã triển khai/định nghĩa page2ReadyFunction không? – c4urself

Tại sao bạn không đặt 'script' vào cuối' page2'? –

@ c4urself page2ReadyChức năng sẽ chỉ là một hàm được định nghĩa trong page2Stuff.js như vậy: function page2ReadyFunction() {} – xbrady

Thay vì có thẻ script của bạn vào đầu trang thứ hai của bạn, đặt nó ở phần cuối của nó, sau khi tất cả HTML, như thế này:

<div id="page2Body"> 
    <!-- More elements --> 
</div> 

<script src="Scripts/page2Stuff.js" type="text/javascript"></script>

Kể từ mã sẽ được thực hiện theo để đặt hàng nguồn, bạn có thể yên tâm rằng HTML sẽ sẵn sàng vào thời điểm tập lệnh của bạn chạy.

Nguồn

2012-01-09 19:11:41

Cảm ơn. Điều đó thật dễ dàng. – xbrady

Khi bạn chạy hàm load, nó mong đợi page2ReadyFunction để tồn tại tại thời điểm chính xác đó. Nó không phải vì bạn chưa tải tập lệnh. Sau đây sẽ khắc phục vấn đề đó, nhưng cũng không nên việc vì kịch bản sẽ được tải không đồng bộ:

$('#myDialog').load('page2Link', { }, function() {page2ReadyFunction();});

Để khắc phục vấn đề đó, bạn có thể làm một cái gì đó như thế này:

$('#myDialog').load('page2Link', { }, function() { 
    function tryPageLoad() { 
     if(page2ReadyFunction) 
      page2ReadyFunction(); 
     else 
      setTimeout(tryPageLoad, 100); 
    } 
    tryPageLoad(); 
});

này chức năng cố gắng mỗi 100ms để xem nếu page2ReadyFunction tồn tại và gọi nó khi nó.

Tất nhiên, bạn không cần phải lo lắng về bất kỳ điều này vì thẻ tập lệnh con sẽ tải không đồng bộ và việc hiển thị sẽ xảy ra trước khi JavaScript thực thi. Bạn có thể xác minh điều này bằng cách sử dụng console.log để xem những gì đám cháy đầu tiên, JavaScript trong tập lệnh khách hàng hoặc chức năng gọi lại.

Nguồn

2012-01-09 19:01:05

chức năng gọi lại cho tải từ các tài liệu jQuery: http://api.jquery.com/load/

đầy đủ (responseText, textStatus, XMLHttpRequest) Một hàm callback được thực hiện khi có yêu cầu hoàn tất.

Chức năng này thực hiện khi yêu cầu hoàn tất, nhưng bạn cần đợi cho đến khi trang 2 được hiển thị.

Một giải pháp đơn giản là đặt một khối $ (document) .ready() vào các tệp javascript mà page2 kéo.

Nguồn

2012-01-09 19:01:16 jbabey

Điều này sẽ không hoạt động vì các phần tử trong trang đang được tải vào tài liệu cho page1. $ (document) .ready() trong page2 sẽ chạy ngay lập tức vì tài liệu đã sẵn sàng. đúng? – xbrady

xin vui lòng nếu bạn muốn một cái gì đó để tải sau khi tải ajax hoàn

bạn gotta sử dụng

đầy đủ chức năng ajax như thế

var req= $.ajax({ 
      url:'page2Link', 
      type:"post", 
      data:{ajax:1,field_id:field_ids,whatever:whatever} 

     }); 
     //after loading 
     req.complete(function(res){ 
      $('#myDialog').html(res); 
     }); 
     //after complete loading and request end 
     req.always(function(res){ 
      page2ReadyFunction 
     });

tất cả những gì thay vì

$('#myDialog').load('page2Link', { }, function() { });

Nguồn

2012-01-09 19:02:13

Phục vụ như thế này:

<script src="Scripts/page2Stuff.js" type="text/javascript"></script> 

<div id="page2Body"> 
    <!-- More elements --> 
</div> 

<script> 
$(function() { 
    // call your function from page2Stuff.js here 
}); 
</script>

Nguồn

2012-01-09 19:09:59 techfoobar

bạn có thể sử dụng một cái gì đó như thế này:

<body onload="function2kickOffP2()">

này sẽ đi vào cơ thể của page2.

Nguồn

2012-01-09 19:12:35 webdad3

$ (tài liệu) .đã tương đương với nội dung được tải không đồng bộ

Trả lời

Các vấn đề liên quan