Using Swiper and input

1

hello guys I came a cross a little problem which I couldn’t solve:

I am using Swiper for an input like this:

127.0.0.1_55894_index.html(iPhone 6_7_8)
127.0.0.1_55894_index.html(iPhone 6_7_8)750×309 20.1 KB
127.0.0.1_55894_index.html(iPhone 6_7_8) (1)
127.0.0.1_55894_index.html(iPhone 6_7_8) (1)750×336 8.87 KB

and this is the code for the swiper:

    if(self.emojiSwiper)
        self.emojiSwiper.destroy(false,false);
    self.emojiSwiper = app.swiper.create('.swiper-container.emoji-swiper', {
        initialSlide: self.emoji.length,
        spaceBetween: 10,
        navigation: {"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"},
        loop:true,
        slidesPerView:"auto",
        centeredSlides:true,
        on: {
            init: function () {
                const swiper = this;
                var active = swiper.slides.eq(swiper.activeIndex).data('emoji');
                app.form.fillFromData('#formCreateEvent', {emoji:active});
            },
            slideChange: function () {
                const swiper = this;
                var active = swiper.slides.eq(swiper.activeIndex).data('emoji');
                app.form.fillFromData('#formCreateEvent', {emoji:active});
            }
        }
    });

What is the idea? it displays some preset emojis to choose from, but gives you the possibility to input your own emoji, the only problem is because swiper is in loop it creates the input like 3 times. so upon submit it takes the last input as the selected emoji, which means no matter if i input something into the field or not it will not use it.
when submitting the form i use the app.form.convertToData, and i only recieve for the emoji input the last one which is not the input emoji. the input emoji is always in the same order so,

i couldn’t figure out a good idea to solve that problem

2

Then of course this won’t work here, you need to manually get the active input value, e.g.

swiper.slides.eq(swiper.activeIndex).find('input').val()

and add it to data object

1 Like
3

such a simple solution, thanks alot!!

this is how i did it:

formData.emoji =self.emojiSwiper.slides.eq(self.emojiSwiper.activeIndex).find('input').val() || formData.emoji

with a fallback to the original value in case it has no input

1 Like