How to reload a preview tab?

PHPMaker General Discussion (PHPMaker)
1

I added a button in a preview tab that performs an action via Ajax. The action updates the table data, so I need to reload the preview tab. Is there any way to do this in JS?

2

These following topics perhaps could help:

3

bkonia wrote:

I added a button in a preview tab that performs an action via Ajax. >

It depends on where you add the button. You may post your code (how you add the button) for discussion.

4

The button is added to the ListOptions section for each row in a preview table. Here’s the button code:<button type=“button” class=“btn btn-default btn-sm ew-action ew-list-action” title=“” data-caption=“Hide” data-ew-action=“submit” form=“fplacement_requests_preceptor_viewpreview” data-key=“{“preceptor_id”:81590}” data-msg=“Hide request?” data-action=“hide%3Fid%3D6728%26preceptor_id%3D81590” data-method=“A” data-select=“S” data-success=“reloadPlacementRequestsPreviewTab”> HideThe purpose of the button is to update an entry in the database, resulting in the corresponding row being hidden. When the user clicks the button, it makes an Ajax request that’s processed in the master page’s Row_CustomAction event. After this completes, I want it to reload the preview pane for this tab, so it shows the updated data with the row removed. Currently, when the process completes, the user has to switch to another tab, then back to the original tab to see the updated data. I’m looking for a way to make a preview tab reload via JS in the callback function.

5

You may post your reloadPlacementRequestsPreviewTab function also. What did you try?bkonia wrote:

When the user clicks the button, it makes an Ajax request that’s processed in the master page’s Row_CustomAction event. After this completes, I want it to reload the preview pane for this tab, so it shows the updated data with the row removed.

In your reloadPlacementRequestsPreviewTab, if your server event returns success, why not just remove the row directly? No need to reload at all.

6

I haven’t created the reloadPlacementRequestsPreviewTab function for two reasons:

  1. I can’t figure out how to reload a currently open preview tab. Without this basic functionality, everything else is moot.
  2. Since the callback function doesn’t support passing parameters, I don’t know how to pass the master page row ID to the function. I suppose I could set a window variable in JS, but it seems like there should be a more elegant way to pass the information.


In your reloadPlacementRequestsPreviewTab, if your server event returns success, why not just remove the row directly? No need to reload at all.

You mean hide the row using JS? Sure, I suppose that’s possible, but this is just one example of a larger issue, which is the inability to reload preview tabs. While it’s simple to hide a row in JS, I have other actions that update the table data from the database, so it’s not a simple matter of just hiding a row.

7

You need to try your hand at it and post your code for discussion.

  1. Consider when a tab loads data, you click the tab to show it first, so how to reload? You should write your code to trigger the “show.bs.tab” event, read Bootstrap docs.
  2. The callback function is not for passing parameter, it is the success function in jQuery’s .ajax() to be called after submission of the form and your server side code returning your result.
  3. Since you submit your action by Ajax, to pass data from client side you may use jQuery’s .ajaxSend().
8

Thank you very much for your extremely helpful reply!I was able to get this working in two steps:Step 1:
When creating the action buttons in the Row_Rendered event, I added the following code to the button element:

onclick="masterRowIndex=$(this).closest('tr.ew-table-preview-row').prev().data('rowindex')" data-success="reloadPreviewTab"

When the button is clicked, it stores the index of the master row containing the Preview tab in a global variable, masterRowIndex. Thus, the variable will always contain the master row index of the last-clicked action button.Step 2:
I created the following function in Client Scripts->Global Code

function reloadPreviewTab()
{
    // Reloads the active Preview tab on row masterRowIndex
    $("tr[data-rowindex=" + masterRowIndex + "]").next().find("button.active").trigger("show.bs.tab");
}

So, after the action completes, it executes this function, which uses the masterRowIndex variable to reload the Preview tab containing the clicked action button.

9

hi
what is the full code for the Row Rendered event?
thanks