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
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
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')
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?
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:
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();
});
Hello,
i try this code for create dynamic popup.
Why i have a error on:
ReferenceError: $ is not defined
???
You need import Dom7