Ajax refresh the header of the page on button action

Hi,

I am on a page changing a value of a field and saving it in session.
I want to display and refresh this value every time in the header section of the page.
Can anybody help me do this. Since on the button action I am not able to ajax refresh the header.


Thanks,
Anagah

Hi Anagha Chikate,

In what place of the header you need to display this value? Maybe you can adapt the same or a new header for you application?

Hi Marco,

I'm having the same issue with my ShoppingCart IconBadge that is placed in the header and displays the total amount items in my ShoppingCart. I'm trying to refresh the Shopping Cart Iconbadge after the shoppingCart has been confirmed, and shopping cart has been emptied. Unfortunately i don't know how to access the header in order to refresh the IconBadge.

any ideas?

thanks

Hi Johannes Schneider,

In the page when changing the cart number, use ajax refresh to update the web block where header is located at.

For example:

Regards,

Hi Johannes,


what do you mean with 'access the header'.  I'm assuming your icon badge is a part of your screen, and added at some place into one of the header placeholders of your layout, right?

This is no different then adding it to the 'content' placeholder, you can access it just as well.  Did you think about giving it a name, that is necessary for it to show up as one of the options in your Refresh action.


See attached oml, I placed an iconbadge near the screen title, showing the number of movies retrieved in a query, if i change the search string, then in the ajax refresh of the search button, I can update the number on the icon badge without problem.


Hope this helps,

Dorine

Solution

Just to add to the discussion. 

The header is (usually) a Web block that is placed by SS in the page, automatically

A Web block content can't be accessed from outside it (from its parent, e. G. Web screen where it is placed) in OutSystems, so you can't refresh directly from de parent, something that is inside the Web block. 

But you can refresh the Web block itself, and it's preparation will run again and every visual element will be rebuilt. 

To refresh a Web block in a page you have two options. 

A) call a screen action using Submit method that ends in an END node. This will execute the page preparation after the execution of the screen action and the entire page (and any Web block inside it) will be rebuilt. 

B) call a screen action using AJAX Submit method that contains an AJAX Refresh statement for the Web block. The Web block need a name to appear in the list of available elements you can AJAX. 

For A), the header will be automatically rebuild. 

For B), you set the header Web block the name and Ajax refresh it in the screen action. 

Hope this helps. 

Cheers

Solution

Marco Arede wrote:

Hi Johannes Schneider,

In the page when changing the cart number, use ajax refresh to update the web block where header is located at.

For example:

Regards,


Thank you for your reply and explanation Marco. Unfortunately I could not get it to work, because Header was not accessible from out of my webscreen.

Eduardo Jauch wrote:

Just to add to the discussion. 

The header is (usually) a Web block that is placed by SS in the page, automatically

A Web block content can't be accessed from outside it (from its parent, e. G. Web screen where it is placed) in OutSystems, so you can't refresh directly from de parent, something that is inside the Web block. 

But you can refresh the Web block itself, and it's preparation will run again and every visual element will be rebuilt. 

To refresh a Web block in a page you have two options. 

A) call a screen action using Submit method that ends in an END node. This will execute the page preparation after the execution of the screen action and the entire page (and any Web block inside it) will be rebuilt. 

B) call a screen action using AJAX Submit method that contains an AJAX Refresh statement for the Web block. The Web block need a name to appear in the list of available elements you can AJAX. 

For A), the header will be automatically rebuild. 

For B), you set the header Web block the name and Ajax refresh it in the screen action. 

Hope this helps. 

Cheers

Thank Eduardo, option A worked for me. 

Thank you,

Johannes


Hi Johannes Schneider, Anagha Chikate,

I think this post is now solved, since the answer to the main question was provided. Thanks Eduardo Jauch for providing additional information.

Regards!