JA Builder menu issues

gabriel-castelan

Since I need to update so many websites based on your product I decided to focus in just one point for each ticket.

In this ticket I’d like to have a definitive solution for the menu’s malfunctions.

I prepared a clean, unaltered, brand new Joomla 4.4.2 installation with the latest JA Joomla Page Builder available version.

(You can check it, test it and work with it in order to solve the issues by login in https://test.gabrielcastelan.me/ with the provided credentials )

I created the following:

A simple category/subcategory structure.
Nine text-only Articles.
One JA_Builder simple page.

Each category includes a Category Description so you can tell any time if the correct category is being displayed or not.

There is one article assigned to each category. It must be displayed whenever the category is accessed and it’s title must be a functional link to the individual article.

I structured a menu as follows:

Home → Default Joomla home page since installation.
Home (JA_Builder) → Simple page created with JA_Builder

Category 01 → Parent Menu. Menu Item Type “Category Blog”. Template: Cassiopea
Subcategory 01 → First level Submenu. Menu Item Type “Category Blog”. Template: Cassiopea

Category 02 (JA_Builder) → Parent Menu. Menu Item Type “Category Blog”. Template: JA Builder Default
(No subcategories)

Category 03 (JA_Builder) → Parent Menu. Menu Item Type “Category Blog”. Template: JA Builder Default
Subcategory 03 → First level Submenu. Menu Item Type “Category Blog”. Template: JA Builder Default

Category 04 (JA_Builder) → Parent Menu. Menu Item Type “Category Blog”. Template: JA Builder Default
Subcategory 04 → First level Submenu. Menu Item Type “Category Blog”. Template: JA Builder Default
Inner subcategory 04 → Second level Submenu. Menu Item Type “Category Blog”. Template: JA Builder Default

Now, this is the result and a detailed description of the errors:

When using the Template Cassiopea:

The whole structure is accessible.
You can access every menu and it’s inner menus.
You can access all nine articles.

When using the Template JA Builder Default:

The top menu items are displayed BUT not all of them are accesible.

Home (JA_Builder) menu can be correctly accessed.

(NOT the expected behavior)
The “Category 01” menu’s “Category Blog” can not be accessed.
Positioning the mouse’s pointer over the menu does not display any submenu.
Clicking on the menu does not show the corresponding category’s description but the “Subcategory 01” submenu instead. Clicking on the “Subcategory 01” submenu shows the corresponding category’s description.
Article 01 is not accesible.
Article 02 is easily accessible using the menu.

(OK)
The “Category 02 (JA_Builder)” menu shows the corresponding category’s description.
Article 03 is easily accessible using the menu.
There is no submenu configured for “Subcategory 02”.
This one is accessible scrolling down the page and clicking on the corresponding subcategory link, then Article 04 is accesible.

(NOT the expected behavior)
The “Category 03 (JA_Builder)” menu’s “Category Blog” can not be accessed.
Positioning the mouse’s pointer over the menu does not display any submenu.
Clicking on the menu does not show the corresponding category’s description but the “Subcategory 03” submenu instead.
Clicking on the “Subcategory 03” submenu shows the corresponding category’s description.
Article 05 is not accesible.
Article 06 is easily accessible using the menu. (This is NOT the expected behavior)

(NOT the expected behavior)
The “Category 04 (JA_Builder)” menu’s “Category Blog” can not be accessed.
Positioning the mouse’s pointer over the menu does not display any submenu.
Clicking on the menu does not show the corresponding category’s description but the “Subcategory 04” submenu instead.
Positioning the mouse’s pointer over the “Subcategory 04” submenu does not display any other submenu’s level. Clicking on the “Subcategory 04” does nothing but vanishing the submenu.
There is no way for accessing the “Inner subcategory 04” menu.
Article 07, Article 08 and Article 09 are not accesible.

The menu’s code shows every menu and submenu correctly. It just do not work as expected.
This is the code for “Category 04 (JA_Builder)”:

<li class="nav-item item-110 deeper dropdown parent open" data-level="1">
<a href="/index.php/category-04-ja-builder" itemprop="url" class="nav-link dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="true" data-toggle="dropdown">
Category 04 (JA_Builder)
</a>
<ul class="dropdown-menu" data-bs-popper="static">
<li class="nav-item item-111 deeper dropdown dropright dropend parent" data-level="2">
<a href="/index.php/category-04-ja-builder/subcategory-04" itemprop="url" class="dropdown-item dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
Subcategory 04
</a>
<ul class="dropdown-menu" data-bs-popper="static">
<li class="nav-item item-112">
<a href="/index.php/category-04-ja-builder/subcategory-04/inner-subcategory-04" itemprop="url" class="dropdown-item">
Inner subcategory 04
</a>
</li>
</ul>
</li>
</ul>
</li>

I really hope this detailed description to be helpful in solving the said issues. I also hope you to solve it as soon as possible and (as for my last post I had no useful answer) not letting me waiting for your answer.

Thank you.

Gabriel C.

dominic

Hi gabriel-castelan
You can add the following CSS code to your site:

.t4-navbar .nav-item.dropdown.parent {
  width: 100%;
}
.mobile-click .item-caret {
  position: relative;
  z-index: 2;
  width: 25px !important;
  height: 25px !important;
  background: #000;
  border-radius: 3px;
}

And the following jquery to the Backend > site template styles > ja_builder > Global settings > Custom Code > Before </body>


<script>
$(document).ready(function() {
    // Function to check if click occurred outside the specified elements
    function isClickedOutside(clickedElement, targetElements) {
        for (var i = 0; i < targetElements.length; i++) {
            if (clickedElement.closest(targetElements[i]).length) {
                return false; // Clicked inside one of the target elements
            }
        }
        return true; // Clicked outside all target elements
    }

    // Click event handler for the icon
    $('.mobile-click .item-caret').click(function() {
        if ($(window).width() < 768) { // Check if the screen width is less than 768px (typical mobile width)
            // Add class to <li> element
            $('li.nav-item.parent').addClass('show animating');

            // Add class to <div> element
            $('.mobile-click div.dropdown-menu').addClass('show');
        }
    });

    // Click event handler for the document body
    $(document.body).click(function(event) {
        var clickedElement = $(event.target);
        var targetElements = ['.mobile-click .item-caret', 'li.nav-item.parent', '.mobile-click div.dropdown-menu'];

        if (isClickedOutside(clickedElement, targetElements)) {
            // Remove class from <li> element
            $('li.nav-item.parent').removeClass('li.nav-item.parent');

            // Remove class from <div> element
            $('.mobile-click div.dropdown-menu').removeClass('show');
        }
    });
});
</script>

Open the \templates\ja_builder\html\mod_menu\default_component.php,from line 40 to 49.
Replace with the following code:

if($item->deeper){
	if(isset($item->mega_sub)){
		$attributes['class'] .= ' mobile-click dropdown-toggle';
	}
	$attributes['role'] = 'button';
	$attributes['aria-haspopup'] = 'true';
	$attributes['aria-expanded'] = 'false';
	// $attributes['data-bs-toggle'] = 'dropdown';
	// $attributes['id'] = 'navbarDropdown';
}

Hope this helps!

gabriel-castelan

dominic

Thank you for your answer.

I applied the modifications. The result was not ok.

As you can check by browsing to https://test.gabrielcastelan.me no submenus are displayed as a result.

(Joomla version has been updated to ‎4.4.3)

Any other options?

Thanks.

dominic

Hi gabriel-castelan,
The previous code will work fine with parent items that have no links.
I have updated the following code:
The /templates/ja_builder/css/custom.css file:

/*Dominic - custom menu***/
.t4-navbar .nav-item.dropdown.parent {
  width: 100%;
}

@media (min-width: 768px) {
  .jub-block .header .navbar-nav .nav-item:hover > ul.dropdown-menu {
    display: block;
	}
}

@media (max-width: 767px) {
  .dropdown-toggle::after,
  .dropend .dropdown-toggle::after {
    display: none;
  }

  .jub-block .jub-element.jub-element-cms-content.text-right .nav {
     flex-direction: column;
  }
  .jub-block .header .navbar-nav .nav-item i {
      position: absolute;
      z-index: 2;
      right: 10%;
      transform: translateY(-50%);
      background: #f6f6f6;
      color: #333;
      padding: 10px 12px;
      border-radius: 4px;
      top: 50%;
      width: auto;
      height: auto;
	}
  	.jub-block .header .navbar-nav .nav-item.show ul.dropdown-menu {
      display: block;
      position: static;
      width: 100%;
      border-left: 0;
      border-bottom: 0;
      border-radius: 0;
	}
  	.jub-block .header .navbar-nav .nav-item.show > ul.dropdown-menu li {
    	margin-left: 5%;
	}
  	.jub-block .header .navbar-nav .nav-item.show > ul.dropdown-menu i {
    	display: none;
	}
}

The JS in the Site template styles > JA_Builder - Default > Custom code:

<script>
$(document).ready(function() {
   // Assuming the parent element has a class named "parent"
 if ($(window).width() < 767) { 
    $(".dropdown .dropdown-toggle").append("<i class='item-caret fas fa-caret-down'></i>");
}
});

$(document).ready(function(){
  // Add class to nav-item and its sub-menu when clicking on caret icon
  $('.nav-item .item-caret').click(function(event) {
    event.stopPropagation(); // Stop the event from propagating to the parent <a> tag
    event.preventDefault(); // Prevent the default link behavior

   // Find the parent nav-item
    var parentNavItem = $(this).closest('.nav-item');

    // Remove class from all nav-items and their sub-menus
    $('.nav-item').not(parentNavItem).removeClass('show animating');
    //$('.sub-menu').not(parentNavItem.find('.sub-menu')).removeClass('new-class');

    // Toggle class for the clicked nav-item and its sub-menu
    parentNavItem.toggleClass('show animating');
    //parentNavItem.find('.sub-menu').toggleClass('new-class');
  });

  // Redirect to page when clicking on the link
  $('.nav-item .nav-link').click(function(event) {
    // Check if the clicked element is not the caret icon
    if (!$(event.target).hasClass('item-caret')) {
      // Perform redirection
      window.location.href = $(this).attr('href');
    }
  });
});
</script>

You can check your test site now.

gabriel-castelan

dominic

Thank you, Dominic.

With the last code modification, the test site's menu is finally working as expected.

I'll replicate the given solutions in the affected websites and will give you feedback.

Thank you very much.

gabriel-castelan

Hello,

I already replicated the given solution to an affected website and the website's menu improved its funtionality. Now there is another menu issue in an upgraded website.

New test site URL: https://amiga.gabrielcastelan.me

I updated the login info at the top, so you can easily login into the website.

The Joomla version is 4.4.3
It has the latest version of JA Page Builder installed.
There is no other 3rd party extensions installed.
There is a lot of info into this website, but I unpublished most of it so the problematic menus are the only available.

Top menu Inicio is the home page.
It is a JA_Builder page named "inicio" with id #1
Template: JA_Builder
It displays ok (we'll talk about it's issues in another ticket if necesary)

Top menu Blog
Points to "Featured Articles"
It shows the corresponding articles.
blog's articles are easily accessible but clicking on any category link returns an error message.

Blog's Submenu "Amiga Sabia"
It's a "Category Blog" menu type.

Clicking on it when Cassiopea Template is assigned:
it works ok.

Clicking on it when JA_Builder Template is assigned:
It returns the following error message:
0 - Modulo by zero

As Debug System is active it also shows:

Modulo by zero

Call stack
#	Function	Location
1	()	JROOT/templates/ja_builder/html/com_content/category/blog.php:85
2	include()	JROOT/libraries/src/MVC/View/HtmlView.php:415
3	Joomla\CMS\MVC\View\HtmlView->loadTemplate()	JROOT/libraries/src/MVC/View/HtmlView.php:203
4	Joomla\CMS\MVC\View\HtmlView->display()	JROOT/libraries/src/MVC/View/CategoryView.php:262
5	Joomla\CMS\MVC\View\CategoryView->display()	JROOT/components/com_content/src/View/Category/HtmlView.php:182
6	Joomla\Component\Content\Site\View\Category\HtmlView->display()	JROOT/libraries/src/MVC/Controller/BaseController.php:660
7	Joomla\CMS\MVC\Controller\BaseController->display()	JROOT/components/com_content/src/Controller/DisplayController.php:121
8	Joomla\Component\Content\Site\Controller\DisplayController->display()	JROOT/libraries/src/MVC/Controller/BaseController.php:693
9	Joomla\CMS\MVC\Controller\BaseController->execute()	JROOT/libraries/src/Dispatcher/ComponentDispatcher.php:143
10	Joomla\CMS\Dispatcher\ComponentDispatcher->dispatch()	JROOT/components/com_content/src/Dispatcher/Dispatcher.php:56
11	Joomla\Component\Content\Site\Dispatcher\Dispatcher->dispatch()	JROOT/libraries/src/Component/ComponentHelper.php:361
12	Joomla\CMS\Component\ComponentHelper::renderComponent()	JROOT/libraries/src/Application/SiteApplication.php:208
13	Joomla\CMS\Application\SiteApplication->dispatch()	JROOT/libraries/src/Application/SiteApplication.php:249
14	Joomla\CMS\Application\SiteApplication->doExecute()	JROOT/libraries/src/Application/CMSApplication.php:293
15	Joomla\CMS\Application\CMSApplication->execute()	JROOT/includes/app.php:61
16	require_once()	JROOT/index.php:32

Blog's Submenu "Amiga Culta"
It's a "Category Blog" menu type.

Clicking on it when Cassiopea Template is assigned:
it works ok.

Clicking on it when JA_Builder Template is assigned:
It returns the same error message :
0 - Modulo by zero

Positioning the mouse’s pointer over the submenu correctly displays the inner submenu "Meditación sanando tu cuerpo".

Inner submenu "Meditación sanando tu cuerpo"
It points to a JA_Builder page.
It works ok.

Top menu "Talleres Online"
Points to "Featured Articles"
It's a "Category Blog" menu type.

Clicking on it when Cassiopea Template is assigned:
it works ok.

Clicking on it when JA_Builder Template is assigned:
It returns the same error message :
0 - Modulo by zero

I hope that you can help me with this one too.

Thank you.

dominic

Hi gabriel-castelan,
This is an error from the ‎/templates/ja_builder/html/com_content/category/blog.php line 80.
I have updated with the following code:

	<?php if (!empty($this->intro_items)) : ?>
		<?php foreach ($this->intro_items as $key => &$item) : ?>
			<?php
			$params = $item->params;
			$this->columns = !empty($this->columns) ? $this->columns : $params->get('num_columns');
			//$rowcount = ((int) $key % (int) $this->columns) + 1;\
 			$rowcount = ($this->columns != 0) ? ((int) $key % (int) $this->columns) + 1 : 1;

			if ($rowcount == 1) : ?>
				<?php $row = ($this->columns > 0) ? ($counter / $this->columns) : 0; ?>
				<?php 
                  //$row = $counter / $this->columns; 
                 ?>
				<div class="items-row cols-<?php echo (int) $this->columns; ?> <?php echo 'row-' . $row; ?> row-fluid clearfix">
			<?php endif; ?>
			
              <div class="col-md-<?php echo ($this->columns != 0) ? round((12 / $this->columns)) : 12; ?>">
				<div class="item column-<?php echo $rowcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>"
					itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
					<?php
					$this->item = & $item;
					echo $this->loadTemplate('item');
					?>
				</div>
				<!-- end item -->
				<?php $counter++; ?>
			</div><!-- end span -->
			<?php if (($rowcount == $this->columns) or ($counter == $introcount)) : ?>
				</div><!-- end row -->
			<?php endif; ?>
		<?php endforeach; ?>
	<?php endif; ?>

gabriel-castelan

Thank you, Dominic.

I checked the solution and it works ok. I also replicated it in an affected website and it seems to work as expected.

Now, there is still another pending issue (while it's not regarding the menus, I hope that you can also solve it). When "live editing" JA_Builder pages menu the changes are not saved.

You can check this using the same test site (URL: https://amiga.gabrielcastelan.me) with the same credentials.

Let me explain in detail.

While this demo uses paid JA_Builder blocks wich I know that can not be edited without a subscription plan, the edition are not possible even when affecting non-paid blocks only. (Feel free to remove any paid blocks if you need it in order to isolate the issue).

You can replicate the issue as follows:

After login into the website's backend enter into "life edit" mode for the very first JA_Builder page called "Inicio" (id 1). You might need to navigate to the very last page of the JA_Builder pages list.
Scroll down to the fifth module (right after the fuchsia one).
Change the "Todo cambio, nace de nuestro interior." text to "El cambio, nace de nuestro interior."

You'll find that the "Saving..." indicator appears on top of the page. But it never disappears. The "saving" procedure does not complete. Even after you publish the page, the changes are not present. If you get to "live edit" mode once again, you'll see that no changed occurred.

I'm attaching an image so it can help me to explain this issue.

This issue prevents any existing page to be updated. Worse, you cannot create new pages, since every try will end in a new "blank" page.

As said, I hope you can also solve this issue. Please tell me if you need more detailed info about it.

Thank you.

dominic

Hi gabriel-castelan,
I sent and notified to our technical team about this issue, we are checking it.

gabriel-castelan

dominic
Thank you.

I hope they can solve this important issue as quickly and efficiently as you did with the other reported issues.

gabriel-castelan

This message is visible to Moderators only

hidden content

gabriel-castelan

Hello, Dominic.

I checked the test site's user report and I see that the test user was active on 2024-04-15 21:10. So, I can see that you are working on the issue.

My guess is that your tech team logged in to verify the issue, but they didn't solved it ... yet.

Could you just please check the status of this and provide some feedback? I'd like to get an update about it.

Thank you.

vangogh

Hi, gabriel-castelan

I got the points and I implemented the solutions on your site. Now the Ja Builder is working well.
The file has been changed: ROOT/plugins/system/jabuilder/helper.php, lines changed: 324 -> 328. (I already reverted my test on your main site)

You kindly check an

gabriel-castelan

As I really need this to be 100% operative, I've continued to performing tests and I just found the following:

A now 100% operative test website "Site-A" (test.gabrielcastelan.me) is using database "db-A".
The to-solve test website "Site-B" (amiga.gabrielcastelan.me) is using database "db-B".

I assumed:
1- Site-A's files are all ok since there is no issues when saving changes to JA_Builder pages.
2- Site-B's files are not ok sinces saving changes to JA_Builder pages is not possible.

Procedure:
I replaced the Site-A's configuration.php file with the Site-B's configuration.php file so that Site-A can use database db-B instead of db-A.

Result:
After loging in to Site-A I was able to access everything just as when using Site-B's backend.
BUT when trying to edit JA_Builder Pages the system got once again stuck in the "Saving..." process.

Now I wonder if the problem could be a database issue.

I hope this is somekind helpful for your team to solve the issue.

Thank you.

gabriel-castelan

vangogh Thank you!

I'll replicate the solution in the problematic websites and will give you feedback.

vangogh

Hi, gabriel-castelan

I apologize for forgetting to attach the file ROOT/plugins/system/jabuilder/helper.php. Additionally, please exercise caution when enabling the following settings: Debug System = Yes and Error Reporting = Maximum or Simple. Sometimes, these settings can trigger warning messages within API response, which may potentially cause some certain extensions to freeze.

plg-ja-builder-helper.zip

13kB

Regards,

gabriel-castelan

vangogh Thank you very much.

It seems that all the reported issues are finally corrected. I've replicated the provided solutions to some problematic websites and now they are working as expected.

I'll continue to implement the solutions in the problematic websites and to upgrade the remaining old sites and will give you feed back Whether it's right or wrong.

Thank you once again for attending (and solving) this ticket.