How to hide custom buttons after initializing popup

Form components
1

Sorry to be annoying. I know I’m asking a lot of questions. :confused:

Anyway, I’m creating a popup with several custom buttons for a wizard interface, so I have next and back buttons. The problems is I need these buttons to be hidden on the first page, so when the popup first opens. I then display the buttons on page 2.

This is what I’m trying to do…

I’ve given these buttons class names so that I can get a handle to them (though I would much prefer to give them each an ID but that doesn’t seem possible, correct me if I’m wrong) and I’m trying to hide them in the ‘onMarkupReady’ event.

var requestlistpopup = $('#requestlistpopup').mobiscroll4().popup({
          display: 'top',
          responsive: {custom: {breakpoint:400,display: 'center'},},
          scrollLock: false,
          theme: 'auto',
          buttons: [{text: 'Back',cssClass: 'mbsc-fr-btn0 mbsc-fr-btn-e mbsc-fr-btn backbutton',handler: function(event){slide(slideIndex - 1);}},
                    {text: 'Next',cssClass: 'mbsc-fr-btn1 mbsc-fr-btn-e mbsc-fr-btn nextbutton',handler: function(event){slide(slideIndex + 1);}},
                    {text: 'Cancel',handler: function(event){requestlistpopup.hide();slide(0);}}
                   ],
          onMarkupReady: function(){
            $('.backbutton').hide();
            $('.nextbutton').hide();
          }
      }).mobiscroll4('getInst');

This is not working.

I also tried giving them the ‘mbsc-cloak’ class, which kind of works except then I can’t display them using $(‘.backbutton’.show(); and I’m not sure why.

2

Hi @Vincent_Wansink,

The reason why the .hide() and .show() calls are not working in the onMarkupReady event is, that the buttons are not inserted into the dokument yet. So in these cases your selectors will return no elements.
The solution is the following: the onMarkupReady event has an event parameter, that has the DOM node containing the whole popup (check out the docs here). You can give a context to the selectors like this to find the buttons:

onMarkupReady: function(event, inst) {
  $('.backbutton', event.target).hide();
  $('.nextbutton', event.target).hide();
}

After the popup is shown, the buttons will be part of the document. So your selectors and the show/hide functions will also work on them:

$('.backbutton').show();

Let me know if that works!

3

Thanks Zoltan! I’ve never seen that syntax before. Does adding the second parameter force the selector to look for the class name within that second parameter?

4

Yes, that’s right. The second parameter in jQuery selectors are called context, and they force the search to be within that Element/Selector. You can read the jQuery’s selector documentation for more detailed info. There is a section for the context with an example too, if you’re interested, just under the link I shared.

1 Like
5

thanks for the awesome information.

1 Like
6

thanks my issue has been fixed.