Home Forums Porto Admin Template Nav Tabs and a herf opening modal with attributes in sidebar-right isnot working

  • This topic has 21 replies, 2 voices, and was last updated 3 months ago by  jm. This post has been viewed 488 times
Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #10030088
    jm
    Participant

    Searching the docs and the forum only gave this result, but no reply was given: https://www.okler.net/forums/topic/sidebar-right-aside-links-not-working/

    I have the same problem when using Nav Tabs and a herf opening modal with attributes in sidebar-right (and other stuff that is being blocked somewhere…).



    Template Version: Latest
    #10030089
    jm
    Participant

    Ok, I found the reason why. In the theme.js file line 4544 it returns false when clicking inside the sidebar.right, and blocks any other javascript from running. Is there a way to get around this?


    #10030092
    Support2
    Keymaster

    Hello, thanks for your purchase.

    Really has an issue when we try to use Bootstrap elements like tabs/modals inside the sidebar right. Sorry for that.
    We will investigate this and provide the correctly fix on the next version of Porto Admin.

    For now you can use this workaround:

    1) Add in (js/custom.js):

    // Bootstrap Tabs
    $('.sidebar-right').find('.tabs a[data-toggle]').on('click', function(e){
    	e.preventDefault();
    	$(this).tab('show');
    });
    
    // Bootstrap Modal
    $('.sidebar-right').find('a[data-toggle="modal"]').on('click', function(e){
    	e.preventDefault();
    	$( $(this).data('target') ).modal('show');
    });

    2) On the Bootstrap Modal HTML make sure you have the modal content outside the sidebar right. Leave only the button that trigger the modal inside the sidebar right. For example:

    <!-- Modal Content -->
    <div class="modal" id="modalBootstrap" tabindex="-1" role="dialog">
    	<div class="modal-dialog" role="document">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h5 class="modal-title">Are you sure?</h5>
    				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    					<span aria-hidden="true">&times;</span>
    				</button>
    			</div>
    			<div class="modal-body">
    				<p>Are you sure that you want to delete this image?</p>
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-primary">Confirm</button>
    				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    			</div>
    		</div>
    	</div>
    </div>
    
    <aside id="sidebar-right" class="sidebar-right">
    	<div class="nano">
    		<div class="nano-content">
    			<a href="#" class="mobile-close d-md-none">
    				Collapse <i class="fas fa-chevron-right"></i>
    			</a>
    
    			<div class="sidebar-right-wrapper">
                                    <!-- Modal Trigger -->
                                    <a class="mb-1 mt-1 mr-1 btn btn-default" data-toggle="modal" data-target="#modalBootstrap" href="#">Bootstrap</a>

    Sorry again for this issue. We will work to fix that.

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

    Kind Regards,

    Rodrigo.


    #10030093
    jm
    Participant

    That works. Thanks for the quick reply.


    #10030108
    jm
    Participant

    Related to this issue, I still have a problem. When the right sidebar is open and then clicking a href opening a modal outside the sidebar, the modal toggle is not fired. This bug will related to all other boostrap functions when using them as attributes in the system too when the sidebar right is open!


    #10030111
    Support2
    Keymaster

    Hello,

    In our last reply for you we also provided a fix for bootstrap modals. Make sure you are adding this code below in (js/custom.js):

    // Bootstrap Modal
    $('.sidebar-right').find('a[data-toggle="modal"]').on('click', function(e){
    	e.preventDefault();
    	$( $(this).data('target') ).modal('show');
    });

    On the Bootstrap Modal HTML make sure you have the modal content outside the sidebar right. Leave only the button that trigger the modal inside the sidebar right. For example:

    <!-- Modal Content outside the sidebar right -->
    <div class="modal" id="modalBootstrap" tabindex="-1" role="dialog">
    	<div class="modal-dialog" role="document">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h5 class="modal-title">Are you sure?</h5>
    				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    					<span aria-hidden="true">&times;</span>
    				</button>
    			</div>
    			<div class="modal-body">
    				<p>Are you sure that you want to delete this image?</p>
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-primary">Confirm</button>
    				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    			</div>
    		</div>
    	</div>
    </div>
    
    <aside id="sidebar-right" class="sidebar-right">
    	<div class="nano">
    		<div class="nano-content">
    			<a href="#" class="mobile-close d-md-none">
    				Collapse <i class="fas fa-chevron-right"></i>
    			</a>
    
    			<div class="sidebar-right-wrapper">
                                    <!-- Modal Trigger inside the sidebar right -->
                                    <a class="mb-1 mt-1 mr-1 btn btn-default" data-toggle="modal" data-target="#modalBootstrap" href="#">Bootstrap</a>

    Sorry again for this issue. We are working in a fix for this on the next version of Porto Admin.

    Thanks for your patience.

    Kind Regards,

    Rodrigo.


    #10030112
    Support2
    Keymaster

    Hello,

    We understood your new issue now. You mean when the button that trigger the modal is out of the sidebar-right, right ?

    I am working in a temporary fix for you now and I will reply as soon possible for you.

    Sorry the confusion.

    Kind Regards,

    Rodrigo.


    #10030116
    jm
    Participant

    Yes that is correct understood 🙂


    #10030121
    Support2
    Keymaster

    Hello jm,

    We have a definitive fix for you, please follow the instructions:

    1) First delete/remove all code of our last solution for you (the JS code in “js/custom.js”).

    2) Add this code in (js/custom.js):

    var $body				= $( 'body' ),
    	$html				= $( 'html' ),
    	$window				= $( window );
    
    $.extend(theme.Skeleton, { 
    	eventsSidebarRight: function() {
    		var _self = this;
    
    		var open = function() {
    			if ( _self.sidebars.right.isOpened ) {
    				return close();
    			}
    
    			_self.sidebars.right.isOpened = true;
    
    			$html.addClass( 'sidebar-right-opened' );
    
    			$window.trigger( 'sidebar-right-toggle', {
    				added: true,
    				removed: false
    			});
    
    			$html.on( 'click.close-right-sidebar', function(e) {
    				if( !$( e.target ).data('toggle') ) {
    					e.stopPropagation();
    				}
    				close(e);
    			});
    		};
    
    		var close = function(e) {
    			if ( !!e && !!e.target && ($(e.target).closest( '.sidebar-right' ).get(0) || !$(e.target).closest( 'html' ).get(0)) ) {
    				return false;
    			}
    
    			$html.removeClass( 'sidebar-right-opened' );
    			$html.off( 'click.close-right-sidebar' );
    
    			$window.trigger( 'sidebar-right-toggle', {
    				added: false,
    				removed: true
    			});
    
    			_self.sidebars.right.isOpened = false;
    		};
    
    		var bind = function() {
    			$('[data-open="sidebar-right"]').on('click', function(e) {
    				var $el = $(this);
    				e.stopPropagation();
    
    				if ( $el.is('a') )
    					e.preventDefault();
    
    				open();
    			});
    		};
    
    		this.sidebars.right.$el.find( '.mobile-close' )
    			.on( 'click', function( e ) {
    				e.preventDefault();
    				$html.trigger( 'click.close-right-sidebar' );
    			});
    
    		bind();
    
    		return this;
    	}
    });

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

    Kind Regards,

    Rodrigo.


    #10030130
    jm
    Participant

    I’m sorry to say, but it still aint working.

    We are still not able to open jquery / bootstrap attribute set functions neither inside or outside the right sidebar when it’s open.


    #10030131
    jm
    Participant

    My script are loaded in this order:

    js/theme.js
    js/custom.js
    js/theme.init.js

    If that matters…


    #10030132
    Support2
    Keymaster

    Hello,

    The order of scripts is correct.

    Please try clearing your browser cache: http://www.refreshyourcache.com/en/home/

    If the problem still persists, please upload your project into a online test server and send the link for us, so we can inspect your code and discover where is the issue.

    We did a new tests with our last solution here and the modals/tabs are working inside and outside of sidebar right (even when the sidebar is opened).

    Kind Regards,

    Rodrigo.


    #10030188
    jm
    Participant

    Thanks it works. I had to move the script outside the jQuery ready function for it to work…


    #10030191
    Support2
    Keymaster

    Hello,

    Great!

    If you need further assistance, feel free to contact us.

    Kind Regards,

    Rodrigo.


    #10030192
    jm
    Participant

    Well it works if you’er not clicking a icon inside a link i a href opening a modal or inside a nav tab.

    https://app.salemate.pro/porto/layouts-default.html
    Open the right sidebar and click on the icon in the button Bootstrap modal.


    #10030196
    Support2
    Keymaster

    Hello jm,

    Hummm, right. In that case we need detect the click event on elements inside the data-toggle.

    For it please change the open function on the “custom.js” file to:

    var open = function() {
    	if ( _self.sidebars.right.isOpened ) {
    		return close();
    	}
    
    	_self.sidebars.right.isOpened = true;
    
    	$html.addClass( 'sidebar-right-opened' );
    
    	$window.trigger( 'sidebar-right-toggle', {
    		added: true,
    		removed: false
    	});
    
    	$html.on( 'click.close-right-sidebar', function(e) {
    		if( !$( e.target ).data('toggle') && !$( e.target ).closest('[data-toggle]').get(0) ) {
    			e.stopPropagation();
    		}
    		close(e);
    	});
    };

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

    Kind Regards,

    Rodrigo.


    #10030197
    jm
    Participant

    That worked. Thanks 🙂


    #10030622
    jm
    Participant

    I just noticed than in the right sidebar on tabs it dos not change tab when clicking the text. It only changes tab when clicking outside the text?


    #10030630
    Support2
    Keymaster

    Hello,

    In our tests here the tab changes when click on the text. Can you please send a online test link with the issue for us, so we can inspect your code, do some tests and discover where is the issue.

    Kind Regards,

    Rodrigo.


    #10030632
    jm
    Participant

    https://app.salemate.pro/porto/layouts-default.html

    Open the right sidebar and there is some tabs.


    #10030637
    Support2
    Keymaster

    Hello,

    Thanks. Now we can reproduce the issue.

    Please try changing the method buildSidebarRight on the “Skeleton” code in “js/theme.js” to this new:

    buildSidebarRight: function() {
    	this.sidebars.right.isOpened = $html.hasClass( 'sidebar-right-opened' );
    
    	if ( this.customScroll ) {
    		this.sidebars.right.$nano = this.sidebars.right.$el.find( '.nano' );
    
    		this.sidebars.right.$nano.nanoScroller({
    			alwaysVisible: true,
    			preventPageScrolling: true
    		});
    	}
    
    	this.sidebars.right.$el.find( 'a[data-toggle] > i' )
    		.on( 'click', function( e ) {
    			e.preventDefault();
    			$(this).parent('a').trigger('click');
    		});
    
    	return this;
    },

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

    Kind Regards,

    Rodrigo.


    #10030651
    jm
    Participant

    That worked for me. Thanks a lot.


Viewing 22 posts - 1 through 22 (of 22 total)