How to get swipable tabs working in popup?

Questions
1

Im trying to get a swipable tabs to work in a popup, but the tabs are not init when loaded?
So the popup is opened and works as it should and displays the page with the tabs in it, but the tabs are only showing the tab links and the content of tab-1, but it is not init, I can´t change tab by clicking the tab links or swipe between the tabs.

So how do I init the tabs?

This is what I got.

The popup code in my js file:

$$(document).on("click",".tabkategorierna", function(e){
	var data;
	var datatest;
		app.request({
	    method: 'POST',
	    url: 'menysidor/tabkategorier.asp',
	    data: {
		  userId : 1,
		   },
	   		success: function (data) {
			console.log("tabkategorierna öppnad")
			if(data){
				var datan=data
				tabsPopup(datan);
			}
			}
		});	
});
var data;
function tabsPopup(datan){
var datan=String(datan)
var tabsPopup = app.popup.create({
  closeByBackdropClick: true,
  swipeToClose: true,
  backdrop : false,
  closeOnEscape : true,
  swipeHandler: '.min-swipe-to-close-handler',
  content: '<div class="popup" style="background:transparent;">'+
		
				datan +
                
            '</div>',
  // Events
  on: {
    open: function (popup) {
     //console.log('Popup open');
    },
    opened: function (popup) {
     //console.log('Popup opened');
    },
	close: function (popup) {
		animate: false;
     //console.log('Popup close');
    },
  }
});
tabsPopup.open();
}

And the page that I load in the popup with the tabs.

<div class="page">
    <div class="toolbar tabbar toolbar-top">
        <div class="toolbar-inner">
          <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
          <a href="#tab-2" class="tab-link">Tab 2</a>
          <a href="#tab-3" class="tab-link">Tab 3</a>
        </div>
      </div>
    
    <div class="tabs-swipeable-wrap">
    <div class="tabs">
        <div id="tab-1" class="page-content tab tab-active">
          <div class="block">
            <p>Tab 1 content</p>
            ...
          </div>
        </div>
        <div id="tab-2" class="page-content tab">
          <div class="block">
            <p>Tab 2 content</p>
            ...
          </div>
        </div>
        <div id="tab-3" class="page-content tab">
          <div class="block">
            <p>Tab 3 content</p>
            ...
          </div>
        </div>
      </div>
    </div>
</div>

Any input appreciated, thanks.
I hope u see this Vladimir, since Im sure you know what to do :slight_smile:

2

For auto init, page must be in initialized View, e.g. in <div class="view view-init">...</div>

3

Ok so I have to create a view on app load with the page?
And then load it in the popup, have I understod you right?

Since it is converted to a swiper I tried to init it that way and I can see in the code that it gets the “swiper-container-initsalized” and “swiper-container-horizontal” classes, so it should work?, but when I click on the tabs links noting happens.

This is how I init the swiper.

var tabsPopup = app.popup.create({
closeByBackdropClick: true,
swipeToClose: true,
backdrop : false,
closeOnEscape : true,
swipeHandler: ‘.min-swipe-to-close-handler’,
content: ‘

’+
datan +
‘
’,
// Events
on: {
open: function (popup) {
//console.log(‘Popup open’);
},
opened: function (popup) {
//console.log(‘Popup opened’);
},
close: function (popup) {
animate: false;
//console.log(‘Popup close’);
},
}
});

tabsPopup.open();
var swiper = app.swiper.create(’.tabs-swipeable-wrap’, {
speed: 400,
spaceBetween: 100
});
swiper.init();
}

So why isn´t it working since it is initialized?
Thanks a lot Vladimir.

4

Ok so I wrapped the page with <div class="view view-init"> and now is is working on the computer- I can swipe between the tabs and I can click on the tab-links(and it gets the swiper-container-initilized class), BUT in the iPhone and iPad I can only swipe between the tabs, when I click on the tab-links nothing happens? And usually with the swiper, when you drag it you see the slide to the right, but this is just animating it when I do a proper swipe? So maybe it is not initialized properly?

How can it work on the computer and not the phone? Really strange!?
I have spent 3 days to try and get this working, so please help me Vladimir :slight_smile: