3. ons-back-button with refresh = true does not work

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-back-button with refresh = true does not work

  • M

    Hi Fran,

    I worked on the ons-button almost a day. Tried various combination. But still it does not work.

    Any thoughts?

    My Use Case:

    I have page A, Page B and Page C.

    On click of button in Page A, I pushPage B.
    On click of button in Page B, I pushPage C.

    Page C has a data entry form with a ons-button. On click of the button, I post to rest api to save the data into the DB and then call popPage() which puts me in Page B fine.

    Now, I need to refresh Page B. Is it possible please? I use JQuery.

    Thanks for your help in advance.

    0 1 Reply
  • 侍

    @mmike If I was doing what you describe, I would have page B on init calling the function for the data, so that way on pop of C, I can just recall that function. There is no refresh option that you mention that I am aware of. Another option is to use resetToPage(‘b’). This basically pops everything down to A and then reloads B.

    1
  • M

    Thanks munsterlander.

    I came across this post. Fran said “refresh : true” option in the popPage()

    https://community.onsen.io/topic/434/how-to-implement-ons-back-button-refresh-in-onsen-2-rc5/2

    0
  • M

    Awesome! That works great!

    Thanks!

    0
  • Onsen UI

    @mmike options.refresh was removed in v2.3.0. The correct way to refresh is what @munsterlander says, calling the function when you pop the page.

    0
  • M

    Thanks Fran. That’s what I did. it works fine in chome/firefox. On safari, page init is not getting triggered.

    Any thoughts on that please?

    0 1 Reply
  • Onsen UI

    @mmike Check this example in Safari and see if it works. That’s a simple init event. Perhaps you are not adding the listeners soon enough in your app? Not sure. For example, event listeners should not be added inside ons.ready because that delays it.

    0
  • M

    Here is the code. It works perfectly fine in chrome/firefox not in safari.

      <ons-page id="rPage">
  <div class="left"><ons-back-button>Search</ons-back-button></div>
  <div id="allResults" style="text-align: left; margin-left:10px; margin-top: 30px;"></div>
  <script>
    document.addEventListener('init', function(event) {
     var page = event.target;
     if (page.matches('#rPage')) {
      console.log("hello");
      $.ajax({url : "/api/get_results?src=1",
      type: "POST",
      data: "str1=N&str2=1",
      success: function(data, textStatus, jqXHR) {
                 $("#allResults").html(data);
               },
      error: function(jqXHR, textStatus, errorThrown) {
               ons.notification.alert({message: "Error ...",title: ""});
             }
      });
     }
    });
  </script>
  </ons-page>
    0 1 Reply
  • M
     

        });
    0
  • Onsen UI

    @mmike Move that script to <head>...</head> and try again :+1: (or include it with <script src="..."></script>

    0
  • M

    Fran,

    That will not work for me because Ajax data: str1 and str2 are dynamically derived from previous page.

    The above code is generated from php. str1 and str2 parameters are available in php. If I move it to index.html, those str1 and str2 are not available.

    Any thoughts?

    Can ons-page have <head></head??

    I appreciate your help.

    0 1 Reply
  • Onsen UI

    @mmike Not, it cannot have a head element. The important thing here is to register the listener before the actual event is fired. Safari might be running your code later than the other browsers so the init event has already been fired by the time the code is executed (so the listener is added too late). We don’t recommend using <script> tags inside <ons-page> to add event listeners precisely because of this unpredictable behavior of some browsers. Can’t you pass your variables in pushPage(..., { data: { /* custom data */ } }) to that page?

    0
  • M

    Ok Fran. How do I read the data in pushPage()?

    Thanks

    0
  • M

    That worked, Fran!

    Thanks!

    0
  • M

    Hi Fran,

    Now that I send the data in options.data in pushPage when I popPage() , this options.data is not available.

    Sorry for asking too many questions.

    Thanks for your help!

    0
  • M

    Never mind…

    0