Dynamic Modal Sheet : content does not update or refreshing

I am using the modal sheet dynamic creation and I want the content to be dynamic but the problem i am having it is that the content even it is changed the content it is always showing the first content not the new one refreshed… i tried to empty the var content and apply new content but still the same issue, the content it is not updated when creating the modal sheet dynamically.

the modal sheet is opened but the content does not change! already showing the first content all the time!

how can I dynamically change the content to be different all the time?

here the code:

In methods:

var self = this;

  addToDB: function (n) {

//here the code to save to db the data and return 1 for success and -1 if record exist
//then if 1 or -1 do the following below

                        if (r.status==1) {
	                       	self.createSheetNew(1);
                       	}

                       if (r.status==-1) {
	                       	self.createSheetNew(-1);
                       	}

 }

createSheetNew: function (n) {

      console.log(n); 

      var self = this;
      var sContent = '';

      // Create sheet modal
      if (!self.sheet) {


      	if (n==-1) {

           sContent = '\
            <div class="sheet-modal">\
              <div class="toolbar">\
                <div class="toolbar-inner justify-content-flex-end">\
                  <a href="#" class="link sheet-close">Close</a>\
                </div>\
              </div>\
              <div class="sheet-modal-inner">\
                <div class="page-content">\
                  <div class="block">\
                    <p>record already saved in your db!</p>\
                  </div>\
                </div>\
              </div>\
            </div>\
          ';
		}

      	if (n==1) {

           sContent = '\
            <div class="sheet-modal">\
              <div class="toolbar">\
                <div class="toolbar-inner justify-content-flex-end">\
                  <a href="#" class="link sheet-close">Close</a>\
                </div>\
              </div>\
              <div class="sheet-modal-inner">\
                <div class="page-content">\
                  <div class="block">\
                    <p>record saved in your db!</p>\
                  </div>\
                </div>\
              </div>\
            </div>\
          ';
		}


        self.sheet = self.$app.sheet.create({
          content: sContent
        });



      }
      // Close inline sheet
      if (self.$('.demo-sheet.modal-in').length > 0) self.$app.sheet.close('.demo-sheet');
      // Open it
      self.sheet.open();
    },

any tips? thanks

Hi,
exere you have an example,

  data () {
    return {
      sheet: null,
      toggle: false,
      content1: '\
            <div class="sheet-modal">\
              <div class="toolbar">\
                <div class="toolbar-inner justify-content-flex-end">\
                  <a href="#" class="link sheet-close">Close</a>\
                </div>\
              </div>\
              <div class="sheet-modal-inner">\
                <div class="page-content">\
                  <div class="block">\
                    <p>This sheet modal was created dynamically</p>\
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>\
                  </div>\
                </div>\
              </div>\
            </div>\
          ',
      content2: '\
            <div class="sheet-modal">\
              <div class="toolbar">\
                <div class="toolbar-inner justify-content-flex-end">\
                  <a href="#" class="link sheet-close">Close</a>\
                </div>\
              </div>\
              <div class="sheet-modal-inner">\
                <div class="page-content">\
                  <div class="block">\
                  </div>\
                  <h1>Other content</h1>\
                </div>\
              </div>\
            </div>\
          ',
    }
  },
  methods: {
    createSheet: function () {
      var self = this;
      // Create sheet modal
      if (!self.sheet || self.sheet.destroyed) {
        self.sheet = self.$app.sheet.create({
          closeByBackdropClick: false,
          content: self.toggle? self.content2 : self.content1,
          on: {
          close: function (sheet, ) {
            sheet.destroy()
            }
          }
        });
      }
      // Open it
      self.sheet.open();
      self.toggle = !self.toggle
    },
  },

In this case, after opening the sheet, i toggle the flag. but you have to change the code to your needs.

4 Likes

big thanks now I have some ideas how to handle this in some other different way! thanks for the tips!

1 Like