[SOLVED] Framework 7 dynamic popup var


#1

Hi everyone,
I need to pass a variable when I click to open the popup, that will be read inside the popup div.

Any Ideas???
Raffaele Colleo


#2

you can add a custom event to the popup;

popup.on('open-custom', data => {
  this.open()
  console.log(data)
})

and then trigger your new event;

popup.emit('open-custom')

#3

Not working.
popup not defined

This is the script I have working right now

// Create dynamic Popup
var dynamicPopup = app.popup.create({
  content: '<div class="popup popup-model"></div>',
  on: {
    open: function (popup) {
      console.log(popup);
      $.getJSON( "https://www.domain.com/?id="+_id, function( data ) {
        console.log(data);
        var _content = '<div class="popup-header row">'+
          '<div class="col-95" style="padding:10px 15px;">'+data.title+'</div>'+
          '<div class="col-5 no-gap" style="padding-top:10px; padding-right:30px;"><a href="#" class="link popup-close"><i class="fa fa-times-circle fa-2x"></i></a></div>'+
        '</div>';

        jQuery(popup.el).html(_content);
      });
    },
    opened: function (popup) {
      //console.log(popup);
    }
  }
});
// Open dynamic popup
$(document).on('click', '.dynamic-popup', function() {
  var _id = jQuery(this).attr("data-id");
  dynamicPopup.open();
});

Using this the popup works perfectly. The only problem is that I cannot pass the var _id so I can get the necessary info to fill the content of the popup.

How can I solve this?


#4

yes, it was an example, you need to change my example to your needs. As you didnt post your code in the first question i couldent make an example with your code.

// Create your popup with custom open
var dynamicPopup = app.popup.create({
  content: '<div class="popup popup-model"></div>',
  on: {
    'open-custom': function (payload) {
      $.getJSON( "https://www.domain.com/?id=" + payload.id, function( data ) {
        console.log(data);
        var _content = '<div class="popup-header row">'+
          '<div class="col-95" style="padding:10px 15px;">'+'My id: ' + payload.id +' :D</div>'+
          '<div class="col-5 no-gap" style="padding-top:10px; padding-right:30px;"><a href="#" class="link popup-close"><i class="fa fa-times-circle fa-2x"></i></a></div>'+
        '</div>';
        this.$el.html(_content)
      });
      this.$el.html(_content)
      this.open()
    },
    opened: function (popup) {
    }
  }
});

// Somewhere in your code, just emit the event like this
dynamicPopup.emit('open-custom', {id: 1})

Result: result-popup


#5

Or:

// Create dynamic Popup
var dynamicPopup = app.popup.create({
  content: '<div class="popup popup-model"></div>',
  on: {
    open: function (popup) {
      console.log(popup);
      $.getJSON( "https://www.domain.com/?id=" + popup._id, function( data ) {
        console.log(data);
        var _content = '<div class="popup-header row">'+
          '<div class="col-95" style="padding:10px 15px;">'+data.title+'</div>'+
          '<div class="col-5 no-gap" style="padding-top:10px; padding-right:30px;"><a href="#" class="link popup-close"><i class="fa fa-times-circle fa-2x"></i></a></div>'+
        '</div>';

        jQuery(popup.el).html(_content);
      });
    },
    opened: function (popup) {
      //console.log(popup);
    }
  }
});
// Open dynamic popup
$(document).on('click', '.dynamic-popup', function() {
  dynamicPopup._id = jQuery(this).attr("data-id");
  dynamicPopup.open();
});

#6

Thanks @nolimits4web. This worked really wel.