[SOLVED] Which component used instead of modal in v2?

Questions
1

I’m doing a migration between the v1 and v2 and I used modal in v1. I don’t see anything in v2 which allow to create a modal like in v1…

Did u have any idea ?

Thanks in advance,

2

It is called Dialog now.

1 Like
3

Ahhh, here it is, thanks you ! I’m getting lost between v1 and v2…

4

Hm, the possibility to create a dialog dynamically seems not available like a modal…

I had this in the v1 :

var modal = myApp.modal({	
    title: 'Impact annoté',	
    afterText:  '<style>'+
					' @import \'css/test.css\'' +
				'</style>' +
				'<script type="text/javascript" src="js/app.js"></script>' +
				'<hr>' +
				'<label for="typeImpact">' +
					'<select class="select-popup" id="typeImpact1" name="select" onchange="UpdateSelection()">' +
					  '<option value="0" style="font-style:italic">Type d\'impact</option>' +
					  '<option>Crevaison</option>' +
					  '<option>Impact de verre</option>' +
					  '<option>Fuite</option>' +
					'</select>' +
				'</label>' +
				'<br/>' +
				'<label for="typeImpact">' +
					'<select class="select-popup" id="typeImpact2" name="select" style="display:none">' +
					  
					'</select>' +
				'</label>' +
				
				'<br/>' +
				'<textarea rows="4" cols="30" placeholder="Commentaire..." id="commentaireImpact"></textarea>',
		
    buttons: [
      {
        text: 'Annuler',
		onClick: function () {
          
        }
      },
      {
        text: 'Enregistrer',
        bold: true,
        onClick: function() {
			
			//Impacts avant ou arrière ?
			var side = "";
			if(currentSlide == 4)side = AR;
			else side = AV;
			
			var typeImpact1 = document.getElementById('typeImpact1').selectedOptions[0].value;
			console.log(typeImpact1);
			//Si la première liste n'est pas à son état initial
			if(typeImpact1 != 0){
				var typeImpact2 = document.getElementById('typeImpact2').selectedOptions[0].value;
				//Si la première et la deuxième liste ne sont pas à leur état initial
				if(typeImpact1 !=0 && typeImpact2 != 0){
					newItem();
					var commentaire = document.getElementById('commentaireImpact').value;
					createImpact(typeImpact1, typeImpact2, commentaire, side);
					updateList();
				}else{
				  invalidInputNotif = myApp.addNotification({
				  icon: '<i class="icon icon-info"></i>',
				  title: 'Veuillez choisir un élément dans la deuxième liste déroulante.',
				  titleRightText: 'maintenant',
				  hold: 3000,
				});
				}
			}else {
				invalidInputNotif = myApp.addNotification({
				  icon: '<i class="icon icon-info"></i>',
				  title: 'Veuillez choisir un élément dans la première liste déroulante.',
				  titleRightText: 'maintenant',
				  hold: 3000,
				});
			}
		}
      },
    ]
  });

I can’t do this in a dialog, no?

5

Looks like afterText is now text? It does accept html. See here and don’t forget to call .open() when ready to show:

var modal = f7.dialog.create(...);
modal.open();

Edit: There is a migration guide if you haven’t seen it. It is missing anything about the dialog changes though. :stuck_out_tongue: Good luck!

1 Like