Current page refresh problem

I am total new to framework7 and routes

using Framework7 3.1.1
I tried some solution but

Solution 1:
router.navigate(router.currentRoute.url, {
reloadCurrent: true,
ignoreCache: true,

But I got error: “Uncaught (in promise) ReferenceError: currentRoute is not defined”

Solution 2:
app.on(‘pageInit’, function (page) {
if ( === ‘single-question’) {
var mainView = app.view.create(’#single-page’);

when I console page name and click to open single-page it returns “null” and then app is not working without refresh.

I also tried

cacheDuration: 0,
template7Pages = false

but still facing same problem.

If you use a component (template) you can use the $setState() functionality to update your page as described here.

Thanks for replying, Yes I am using component template and doing user activity in “methods” so how can I refresh the page, Because when I generate dynamic content and using also same methods in that content but they are not working, and also when I go back and then coming back to same page there is not new generated data. and I am totally new so I never use before $setState() can you give one example of that

You can use $setState( {valueToBeUpdated: “new value”} ) but …
if that does’t fix your refresh problem then you have to share or describe more of your code.

Still facing same problem

I am using component template

<a href="/single-question/?id=48/" data-context='{"title": "some title here","status":"public"}'>

  return {
    methods: {
      addAnswer: function () {
        var answerText = $('#newAnswer').val().replace(/\n/g, '<br>').trim();

'ask-question-submit.php', { var: var, var1:var, etc:etc }, function (data) {
                if(data != false){
                  var answerHtml = '<div class="a-block"><div class="row no-gap"><div class="col-20 q-p-por"><i @click="upvoteAns" class="icon f7-icons " id="aupv_'+data+'">arrow_up_fill</i><span id="updown-answer-points">0</span><i  @click="downvoteAns" class="icon f7-icons" id="adownv_'+data+'">arrow_down_fill</i></div><div class="col-80 white-background padding-10px" style="min-height: 125px;"><div class="">'+answerText+'</div><p>Answered on: '+ dt +'</p><div class="chip chip-outline"><div class="chip-media"><img src="<?php echo $image; ?>"></div><div class="chip-label text-title-color"> <?php echo $first_name." ".$last_name; ?> </div></div></div></div></div>';



I also tried this one on another page but still facing same problem

  return {
    data: function () {
      return {
        title: null,
    methods: {

      sendSummary: function () {
        var $ = this.$;
        var app = this.$app;
        var router = this.$router;
        var title = $('#title').val();
        var summary = $('#summary').val().replace(/\n/g, '<br>').trim();
        router.navigate('/otherPage/', { context: { title: title, summary: summary } })
      pageInit: function (e, page) {
        var self = this;
        var app = self.$app;
          title: $('#title').val(),

Its also not working :frowning:, {reloadCurrent: true});

Don’t use IDs (e.g. #totalAnswers) because it should be unique across app. Then you load page twice it will replace it in previous page. If you use Router component don’t use direct DOM manipulation like $('#totalAnswers').text(totalAnswers);. You just need to save this variable, e.g.

self.$setState({totalAnswers : totalAnswers});

And in required place in template just {{totalAnswers}}

again same problem I did this with variable but again facing same problem :frowning:
and my ids are unique (Dynamic) across app

1 Like