[SOLVED] Multiple Popups - Close issue

Questions
1

Hello there,

I have the follow structure in an app:

home - popup - popup

I would like to close the popups individually but I tried different options and it’s closing both popups at the same time.

see below code:


var dynamicPopup = app.popup.create({
  content: '<div class="popup popup-model"></div>',
  on: {
    open: function (popup) {
      var json_req = path+'ver_proveedor.php?id='+popup._id;
      app.request.json( json_req, function( data ) {
       window.localStorage.setItem("id_proveedor",data[0][0]);
        var _content = '<div class="popup-header row">'+
                '<div class="navbar">'+
                    '<div class="navbar-inner">'+
						'<div style="margin: 20px">'+
						'<img src="./img/logo_peque2.png">'+
					'</div>'+
                      '<div class="right"><a href="" class="link" id="verdetalleclose" style="color:#C18E5B"><i class="icon material-icons md-only" style="color:#C18E5B;font-size: 25px">close</i></a></div>'+
					   
                    '</div>'+
                  '</div>'+
                  '<div class="">'+
                    '<div class="block">'+
					  '<p>' + data[0][1] +'</p>'+
					  '<p>'+ data[0][2] +'</p>'+
                      '<p>'+ data[0][3] +'</p>'+
					   '<a href="#" class="col button button-raised" id="contactar_proveedor" data-id="1">Contactar</a>'+
                    '</div>'+
                  '</div>'+
                '</div>'+
              '</div>';

        $$(popup.el).html(_content);
      });
    },
    opened: function (popup) {
      //console.log("opened" + popup);
    }
  }
});

var dynamicPopup_peticion = app.popup.create({
  content: '<div class="popup popup-model id=""></div>',
  on: {
    open: function (popup2) {
      var json_req = path+'ver_cliente.php?id='+window.localStorage.getItem("user");
      app.request.json( json_req, function( data ) {
        //console.log(data);
        var _content2 = '<div class="popup-header row">'+
                '<div class="navbar">'+
                    '<div class="navbar-inner">'+
						'<div style="margin: 20px">'+
						'<img src="./img/logo_peque2.png">'+
					'</div>'+
                      '<div class="right"><a href="" class="link popup-close" id="enviarpeticionclose" style="color:#C18E5B"><i class="icon material-icons md-only" style="color:#C18E5B;font-size: 25px">close</i></a></div>'+
					   
                    '</div>'+
                  '</div>'+
                  '<div class="">'+
                    '<div class="block">'+
					  '<p>'+ data[0][0] +'</p>'+
                      '<p>'+ data[0][1] +'</p>'+
					  '<p>'+ data[0][2] +'</p>'+
					  '<p>'+ data[0][3] +'</p>'+
					   '<a href="#" class="col button button-raised" id=enviar_peticion" data-id="1">Enviar petición</a>'+
                    '</div>'+
                  '</div>'+
                '</div>'+
              '</div>';

        $$(popup2.el).html(_content2);
      });
    },
    opened: function (popup2) {
      //console.log("opened" + popup);
    }
  }
});

$(document).on('click', '#enviarpeticionclose', function() {
	popup2 = app.popup.get('.dynamicPopup_peticion');
	app.popup.close(popup2, true)
	console.log("cerrado")
})

$(document).on('click', '#verdetalleclose', function() {
	popup1 = app.popup.get('.dynamicPopup');
	app.popup.close(popup1, true)
	console.log("cerradodetalle")
})

Any suggestion?

Thanks!

2

I can’t see popups with “dynamicPopup_peticion” and “dynamicPopup” classes. You probably want:

var dynamicPopup = app.popup.create({...});
var dynamicPopup_peticion = app.popup.create({...});

$(document).on('click', '#enviarpeticionclose', function() {
	dynamicPopup_peticion.close();
	console.log("cerrado")
})

$(document).on('click', '#verdetalleclose', function() {
	dynamicPopup.close();
	console.log("cerradodetalle")
})
3

Thanks for the reply.

I have updated the onClick code as suggested but still is closing the 2 popups at the same time. Not sure why…


$(document).on('click', '#enviarpeticionclose', function() {
	dynamicPopup_peticion.close();
	console.log("cerrado")
})

$(document).on('click', '#verdetalleclose', function() {
	dynamicPopup.close();
	console.log("cerradodetalle")
})

/// popups creation

var dynamicPopup_peticion = app.popup.create({
content: ‘<div class=“popup popup-model id=”">’,
on: {
open: function (popup2) {
var json_req = path+‘ver_cliente.php?id=’+window.localStorage.getItem(“user”);
app.request.json( json_req, function( data ) {
//console.log(data);
var _content2 = ‘

’+
‘
’+
‘
’+
‘
’+
‘’+
‘
’+
‘’+
‘
’+
‘
’+
‘
’+
‘
’+
‘

Nombre proveedor: ‘+ window.localStorage.getItem(“nombre_proveedor”) +’

’+
//’

’+ data[0][0] +’

’+
‘

Nombre cliente: ‘+ data[0][1] +’

’+
‘

Email cliente: ‘+ data[0][2] +’

’+
‘

Teléfono cliente:’+ data[0][3] +’

’+
‘
’+
‘’+
‘’+
‘
’+
‘
’+
‘
’+
‘Enviar petición’+
‘
’+
‘’; 
    $$(popup2.el).html(_content2);
  });
},
opened: function (popup2) {
  //console.log("opened" + popup);
}

}
});

var dynamicPopup = app.popup.create({
content: ‘

’,
on: {
open: function (popup) {
var json_req = path+‘ver_proveedor.php?id=’+popup._id;
app.request.json( json_req, function( data ) {
window.localStorage.setItem(“id_proveedor”,data[0][0]);
window.localStorage.setItem(“nombre_proveedor”,data[0][1])
var _content =
‘
’+
‘
’+
‘
’+
‘
’+
‘’+
‘
’+
‘’+
‘
’+
‘
’+
‘
’+
‘
’+
//’
’+
“”+
//’
’+
‘


’+
‘

’ + data[0][1] +’

’+
‘

’+ data[0][2] +’

’+
‘

’+ data[0][3] +’

’+
‘

’+‘Contactar’+’

’+
‘


’+
‘
’+
‘
’+
‘
’+
‘
’; 
    $$(popup.el).html(_content);
  });
},
opened: function (popup) {
  //console.log("opened" + popup);
}

}
});

4

Can you provde live demo or JSFiddle with the issue as i still can’t replicate it?

5

Hello @nolimits4web,

See below a live demo:

https://imagina.ardi-tech.com/

Click in “Ver detalle” - “Contactar” and close it. It will close both popups.

Also, if you can, have a look on that:

Thanks!

6

Contactar doesn’t work in your demo, hard to check it

7

Sorry. Try now.

Thanks

8

Remove popup-close class from link on second popup. You already handle it manually

9

arg… you are right! I missed that…
Sorry

Thanks!

If you have can have a look to this one it will be great…