JS Refresh the Parent Page After the Child Window Fills in

  • Last update:December 15, 2020
  • I. Overview

    1.1 Requirement

    When using multiple windows for data entry, you may want to make the data that have been successfully submitted in child windows display in the parent window. So how can we achieve automatic refresh of the data in the parent window after that in child windows are successfully submitted?

    1 .gif 


    1.2 Solution

    Open the child template and add a Data Entry Successful event to it.

    You will learn
    • Sample 1: Directly refresh the parent page

      • Design a child template

      • Add a Data Entry Successful event

      • Preview

    • Sample 2: Refresh the parent template with the query parameters being reserved

      • Add query parameters to the parent template

      • Modify JavaScript codes for the child template

      • Preview

    • Download the template

    II. Sample 1: Directly refresh the parent page

    2.1 Design a child template

    The child template is designed as follows:

    0.png


    2.2 Add a Data Entry Successful event

    Open the child template, click [Template]-[Web Attributes]-[Data Entry Settings], select [Individually set for the template], and add a Data Entry Successful event, as shown below:

     

    Input the following JavaScript codes:

    window.parent.location.reload();


    2.3 Preview

    Open the parent template and click ORDERID. Modify data in the pop-up dialogue box and click [Submit], then the parent template will be automatically refreshed. The preview effect is shown as follows:

     

    III. Sample 2: Refresh the parent template with the query parameters being reserved

    3.1 Add query parameters to the parent template

    1)Modify ds1 as follows:

    SELECT * FROM ORDERS 
    WHERE 1=1 ${if(len(ORDERID)=0,""," and ORDERID='"+ORDERID+"'")}

    2)Edit the parameter pane, add a Drop-down Box widget ORDERID and a Query button, and configure the ORDERID widget with a Data Dictionary:

     

    3)Click any blank space of the parameter pane and uncheck [Display Nothing Before Query].

     

    4)Return to the report design interface. Click A2 and then click Hyperlink-Webreport1 for editing. In the pop-up Webreport1 window, check [Inherit Report Parameters].

     


    3.2 Modify JavaScript codes for the child template

    Open the child template, click [Template]-[Web Attributes]-[Data Entry Settings], and add a Data Entry Successful event. In the pop-up Event Settings window, add a parameter and name it ID and type the formula: $ORDERID

    Note: ORDERID is the Drop-down Box widget in the parent template.

    Input the following JavaScript codes:

    window.parent.location = "http://localhost:8075/webroot/decision/view/report?viewlet=Parent%2Bpage.cpt&ORDERID=" + ID;


    3.3 Preview

    Open the parent template, select an option in the drop-down list of ORDERID and click [Query]. Click Order ID and a new dialogue box pops up. In the pop-up dialogue box, modify data as you need and click [Submit], then the parent template will be automatically refreshed with the query parameters being reserved. The preview effect is shown as follows:

     

    IV. Download the template

    Attachment List


    Theme: Data Entry
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    9s后關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy