How to force a Page Include to reload inside a tab?

  • 1
  • Question
  • Updated 7 months ago
  • Answered
Does anyone know of an easy way to force the contents of a tab to reload every time you click on it?  Here is the catch:  the contents of the tab is a PageInclude component.  Therefore, the Models it contains are not in the Parent Tab Page - otherwise I would just use Tab Actions to requery the model.  

Here's the setup:

Parent Tabbed Page - tab page with 3 tabs representing 3 Lead "Statuses" (Open, Working, & Qualified)

Child Page - Each tab includes a PageInclude component that loads the same page, but the tab filters the page condition via a Query String in the Page Include component. 


How it works:  When you click on the "Qualified" tab, it loads the Page Include and feeds the Query String to the "Filterable, Off by Default" Model Condition  called "ProspectStatus".  So basically it only displays the Leads that are in the "Qualified" status.  Clicking on the other 2 tabs ("Open" or "Working") yields the proper results. 

This is all working just fine.  


Here is my problem (I'll use a hypothetical situation):

1.  I load the page, which defaults to the "Open" tab.  This displays my list of "Open" leads



2.  I can change the status of the Lead from "Open" to "Working" and click the "Save & Refresh" button



3.  After clicking the "Save & Refresh" button, it saves the model changes and queries the model.  Which makes the Lead disappear from the "Open" tab (as intended).
 



4.  When I click on the "Working" tab, there is the Lead I just edited, right where it should be now that it is in the "Working" status.  Sounds good, right?  That's what I thought....onto step 5.





5.  If I change the Lead status from "Working" back to "Open", and "Save & Refresh", my Lead is no longer visible in any of my tabs until I completely refresh the page.




6.  When I click back on "Open" it simply reloads the "Open" tab as it appeared in Step 3 above.






What I know is happening:
  • The Lead Status is successfully updating, that isn't an issue
  • The Tab is rendering the contents the first time it loads, but it isn't re-rendering the contents when I click on it subsequent times - only when I reload the entire page.
What I've tried:
  • Creating an Action button that requeries the Model - doesn't work
  • Creating a Tab Action that Queries the model when clicked - as mentioned earlier, the Model for the Lead objects is contained within the Child Page and not the Tab Page so that doesn't work either

What I think might work but I keep getting an error:

This post https://community.skuid.com/skuid/topics/reload-or-refresh-page-include seems promising but my javascript chops are very poor beyond cutting and pasting.  


UPDATE!  

As I was typing this, I realized I had left off the "#" from the snippet.  It appears to be working using the inline snippet and then triggering the snippet as an action "whenever shown".



Here is the content of the Snippet:





Now...the only thing that I'm not sure of is all of the errors that are popping up in the Console when this snippet triggers.  To be clear: my page is now working as intended, but these errors make me nervous.  Any help would be appreciated:





Should I just be happy that my page is working on not worry about those things in red?  

Thanks!
Photo of Gary Bailey

Gary Bailey

  • 1,628 Points 1k badge 2x thumb
  • good

Posted 12 months ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Alternate option:
Causing a page include to not render, then render will cause it to reload. So you could use the component rendering action (depending on your version of skuid) to force the component to not render (Hide) then a second action to render the component. This should reload the page include as expected.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,674 Points 20k badge 2x thumb
Haha! Beat me to the punch. Exactly what I'd say.
Photo of Andrew N

Andrew N

  • 1,178 Points 1k badge 2x thumb
Nice! That is a slick solution. I was running into a similar problem and this idea helped me solve it.
Photo of Gary Bailey

Gary Bailey

  • 1,628 Points 1k badge 2x thumb
Great solution!!  Apparently I was absent from class the day we went over the "toggle component" action.  Works like a charm!
Photo of and thorough

and thorough

  • 736 Points 500 badge 2x thumb
So, does the toggle component (show) action do the same thing as skuid.$C('componentId').render()?  If the component is already showing, seems like the show component action does not rerender the component, but if the sequence has a hide component action, followed by show component, it is rerendered.  Is that right?  Seems to be working this way with a page include, but just want to confirm.  Before toggle component was an option in the action framework, I was using a snippet to rerender components, but now thinking I should convert those to the toggle component hide/show actions to make things clearer for non-developers.
Photo of John Dahlberg

John Dahlberg, Champion

  • 2,442 Points 2k badge 2x thumb
Here's another approach, which is also a useful technique for running snippets with injecting parameters throughout skuid.  Start with this snippet (UpdatePageInclude):

var target = arguments[0],
    content = arguments[1],
    query = arguments[2]
$ = skuid.$;

    var pageInclude = skuid.$('#'+target).data('object');
        pageInclude.pagename = content;
        pageInclude.querystring = query;
        pageInclude.load();


Then in the action framework, add an action to Go to URL with the following link. Similarly you could use an onclick event in a template field or elsewhere with Row context and other creative uses:

javascript:skuid.snippet.getSnippet('UpdatePageInclude')('IncludeRegion','ContentPage','LinkedEntityId={{$Model.YourModel.data.0.Id}}');