2012-01-25 56 views
17

Tôi muốn thực thi chức năng JavaScript sau khi trang được tải. Tại thời điểm này tôi có một commandButton và tất cả mọi thứ hoạt động tốt. Tuy nhiên nó sẽ thoải mái hơn nếu người dùng không phải nhấn nút.Làm cách nào để thực thi JavaScript sau khi tải trang?

Tôi đã thử f: sự kiện, nhưng tôi không có người nghe, tôi chỉ có chức năng JavaScript. Hơn nữa, tải trọng cơ thể không hoạt động đối với tôi vì tôi chỉ sử dụng các thành phần mức cao.

<f:view xmlns="http://www.w3.org/1999/xhtml" 
xmlns:f="http://java.sun.com/jsf/core" 
xmlns:p="http://primefaces.org/ui" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:pm="http://primefaces.org/mobile" contentType="text/html"> 

<ui:composition template="/resources/master.xhtml"> 

    <ui:define name="content"> 


     <pm:content> 

      <h:inputHidden id="address" value="#{pathFinderBean.address}" /> 

      <div id="map" style="width: 100%; height: 285px;"></div> 

      <p:commandButton type="button" value="Route" onclick="PathFinder.findAndGo()"/> 

      <div id="route"></div> 

     </pm:content> 
    </ui:define> 

</ui:composition> 

Các hàm JavaScript PathFinder.findAndGo được định nghĩa trong master.xhtml tôi

+0

bạn sẽ khá muốn làm điều đó trên sẵn sàng thay vì onload ? –

+0

Nếu tập lệnh của bạn nằm trong phần đầu và nút nằm trong trang, tập lệnh sẽ luôn được tải trước khi phần tử xuất hiện. Tuy nhiên, nếu tập lệnh yêu cầu các phần tử nhất định ở trong trang và người dùng có thể nhấp vào nút trước khi chúng được tải, bạn có thể tắt nút tắt (hoặc thực hiện một số hành động khác) cho đến khi chúng có sẵn. – RobG

+0

sử dụng remoteCommand với tự động chạy đúng. – meyquel

Trả lời

23

Sử dụng JQuery như sau:

<script> 
    jQuery(document).ready(function() { 
     PathFinder.findAndGo(); 
    }); 
</script> 

Cập nhật:

Nó phải được trong phạm vi <ui:define name="content">.

+0

Có vấn đề gì với nó? Tại sao downvote? –

+2

jQuery cho mục đích duy nhất để xử lý sự kiện 'onload' không phải là một ý tưởng hay. – bennedich

+2

Rất tốt trong trường hợp này vì anh ta đang sử dụng PrimeFaces cần và tải jQuery. –

4
window.onload = function() { 
    // code to execute here 
} 
+0

không hoạt động đối với tôi. Tôi đặt nó trong các thẻ script và đặt nó ở những nơi khác nhau ở bên cạnh nhưng không có gì xảy ra. – steffan

3

Đối primefaces tôi đã quản lý để sử dụng thành công như sau:

  1. Tôi đã nạp trong <head> file JS chứa các chức năng tôi cần onLoad bằng cách sử dụng:

    < h:outputScript library="javascript" name="nameOfMyFile.js" target="head"> 
    
  2. Tôi đã sử dụng phần sau để chạy các hàm JS mà tôi cần từ "nameOfMyFile.js":

    < h:body onload="nameOfMyFunction()" > 
    
  3. Xin lưu ý rằng tập tin js của tôi cũng chứa các lệnh sau ở phía dưới:

    $(document).ready(nameOfMyFunction()); 
    

Điểm 3'rd là để chạy chức năng onReady. Đây là tất cả một thử nghiệm để xem liệu tôi có thể thêm HTML vào các sự kiện lịch biểu hay không ... khi các chuỗi được truyền đi có các thẻ phân tích cú pháp và html được thoát. Tôi vẫn chưa tìm ra lý do tại sao tôi cần cả hai onReadyonLoad .... nhưng hiện tại đó là cách duy nhất nó làm việc cho tôi. Tôi sẽ cập nhật nếu tôi tìm thấy bất kỳ điều gì mới. Nó đã thành công.

6

Có 2 cách mà làm việc cho tôi, khi tôi muốn thực hiện một chức năng JS sau khi tải trang trong Primefaces:

  • thể sử dụng jQuery (vì nó đã được sử dụng bởi Primefaces), giải pháp tốt nhất là tài liệu làm tổ.sẵn sàng gấp đôi, do đó mã JS của tôi được thực hiện sau khi tất cả các mã Primefaces:
    • jQuery(document).ready(function() { jQuery(document).ready(function() { // twice in document.ready to execute after Primefaces callbacks PathFinder.findAndGo(); }); });
  • hoặc sử dụng p: remoteCommand với autorun, và địa điểm onComplete JS gọi lại vào nó
    • hình thức theo cách này được gửi bởi AJAX đến máy chủ nhưng không có người nghe thực hiện trên phía máy chủ, một callback JS được thực hiện sau đó
    • <p:remoteCommand oncomplete=" PathFinder.findAndGo(); " autoRun="true"/>
+2

Ngoài ra còn có một tùy chọn để hướng dẫn các Thủ tướng để thực hiện JS từ mã Java trong bộ điều khiển, nhưng tôi không chắc chắn nếu điều này được thực hiện sau khi tải trang. Tôi đã sử dụng tùy chọn này một lần trong hành động AJAX, khi tôi không thể hướng dẫn Primefaces cập nhật tiêu đề trang sau AJAX: 'org.primefaces.context.RequestContext.getCurrentInstance(). Execute (" document.title = '"+ StringEscapeUtils.escapeEcmaScript (pageTitle) + "'"); ' – OndrejM

0

Bao gồm (ở dưới cùng của trang của bạn) jQuery thư viện trong vòng <ui:define name="content"> của bạn và sau đó sử dụng $(document).ready như thường lệ:

<ui:define name="content"> 
 
... 
 
<!-- jQuery --> 
 
<h:outputScript name="vendor/jquery/jquery.min.js"/> 
 
<script> 
 
    $(document).ready(function(){ 
 
     alert(1); 
 
    }); 
 
</script> 
 
</ui:define>

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