Home Forums Porto Admin Template Dropdown button in sidebar widget

This topic contains 13 replies, has 2 voices, and was last updated by  Support2 2 months, 3 weeks ago. This post has been viewed 207 times

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #10025526

    stesvis
    Participant

    Hi,

    I am wondering why a dropdown button would not work (click doesn’t open the dropdown) when I place it in the right sidebar widget.

    The same button works fine in the page content.

    Also, jQuery doesn’t seem to work in the widget either.
    I placed a bootstrap button there too, with a js-click-me class and this script, but the alert won’t fire.

    $(document).on('click', '.js-click-me', function (e) {
                    alert('hello');
                });

    Is there a solution?

    http://dusano.levitica.ca/Test/test3

    Screenshot: https://snag.gy/uWe6Xf.jpg


    • This topic was modified 3 months ago by  stesvis.
    #10025540

    Support2
    Keymaster

    Hello Stevis,

    Try with the JS codde below:

    $(document).ready(function () {
        //$('.js-dialog').magnificPopup({
        //    type: 'inline',
        //    preloader: false,
        //    modal: true
        //});
    
        $('.js-click-me').on('click', function (e) {
            alert('hello');
            e.preventDefault();
        });
    
        $('.dropdown-toggle').dropdown();
    
        $('.js-dialog').on('click', '.js-dialog', function (e) {
            e.preventDefault();
    
            //(function ($) {
            $.magnificPopup.open({
                type: 'ajax',
                modal: true,
                items: {
                    src: $(this).attr('href'),
                }
            });
            //}).apply(this, [jQuery]);
        });
    });

    * Note the event click directly on element instead of document.
    * Note the dropdown initialized using javascript.

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10025619

    stesvis
    Participant

    Hi Rodrido, in that same page, now when you click the button i open a modal dialog.

    Do you know why it would take to clicks on Cancel to close the dialog?
    The first click seems to only close the sidebar, the second click closes the dialog.

    Ideally the first click should close the dialog but not close the sidebar.

    Thanks


    #10025630

    Support2
    Keymaster

    Hello stesvis,

    We made some tests here, and the Magnific Popup seems to have a bug/issue when use type “ajax” with a full content page.
    Our suggestion for you is use “iframe” option instead of “ajax” when need load a full page content. Please, try the steps below:

    1) Change the JS code to:

    $(document).ready(function () {
    
        $('.js-click-me').on('click', function (e) {
            e.preventDefault();
    
            $.magnificPopup.open({
                type: 'iframe',
                closeOnContentClick: false,
                closeOnBgClick: true,
                items: {
                    src: $(this).attr('href'),
                }
            });
        });
    
    });

    2) Add in (css/custom.css):

    .mfp-iframe-scaler {
        padding-top: 76.25%;
    }

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10025648

    stesvis
    Participant

    Hi Rodrigo,
    if I do that, when I click on the button the magnific popup dialog is like this: https://snag.gy/w0h5b7.jpg

    Did I miss something? All the Css is gone… (check the page)


    #10025653

    Support2
    Keymaster
    This reply has been marked as private.
    #10025657

    stesvis
    Participant
    This reply has been marked as private.
    #10025658

    Support2
    Keymaster

    Hello,

    Oh right, this changes my previous solution, since you are getting a specific HTML content and not a full page content.
    In that case, back to the “ajax” option on magnific popup and make a simple modification on “theme.js” file. Please follow the steps below:

    1) JS:

    $(document).ready(function () {
    
        $('.js-click-me').on('click', function (e) {
            e.preventDefault();
    
            $.magnificPopup.open({
                type: 'ajax',
                closeOnContentClick: false,
                closeOnBgClick: true,
                items: {
                    src: $(this).attr('href'),
                }
            });
        });
    
    });

    2) Change the code at (js/theme.js) around line 4489 to like the image below:

    if ( !!e && !!e.target && ($(e.target).closest( '.sidebar-right' ).get(0) || !$(e.target).closest( 'html' ).get(0)) || $(e.target).closest( '.mfp-wrap' ).get(0) ) {
        return false;
    }

    * Note that added a condition for “.mfp-wrap”.

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10025659

    stesvis
    Participant

    Perrrfect awesome thank you!


    #10025688

    stesvis
    Participant

    Hi Rodrigo I spoke too soon.

    I did more testing and although the popup opens correctly:

    • when I click inside a textbox it closes it.
    • I can’t collapse the right menu anymore. When I click to collapse i get this error “Uncaught TypeError: Cannot read property ‘target’ of undefined”
    • When I click the “Click me” button i also get this error “Uncaught SyntaxError: Invalid or unexpected token”

    I tried adding back modal: true, and i don’t get any errors, but the popup stays open when i click Cancel.


    • This reply was modified 2 months, 3 weeks ago by  stesvis.
    #10025690

    stesvis
    Participant

    I think for now I’ll do this:

    modal: true
    and
    <button type="button" class="btn btn-default modal-dismiss" on-click="$.magnificPopup.close();">Cancel</button>
    to close the dialog, while keeping your code in theme.js, unless you have a better/proper solution.
    (it’s onlick=”” but it won’t let me save it)

    This all works fine, my only question is: on a mobile device, why can’t I scroll down to the bottom and see the buttons? the same happens in the browser in mobile view.


    • This reply was modified 2 months, 3 weeks ago by  stesvis.
    • This reply was modified 2 months, 3 weeks ago by  stesvis.
    #10025693

    stesvis
    Participant

    Note that you have to click the “Click me” button when you are already in mobile view to see the scroll issue.
    Is it because on mobile the page in the background has no scrollbars? Is there a solution?
    Thanks


    • This reply was modified 2 months, 3 weeks ago by  stesvis.
    #10025700

    stesvis
    Participant

    Rodrigo i also placed the same button in the main page content, and when the modal dialog opens, you can scroll it up and down.
    So it definitely has to do with the sidebar somehow.


    #10025725

    Support2
    Keymaster
    This reply has been marked as private.
Viewing 14 posts - 1 through 14 (of 14 total)