Jump to content

Tabs not loading


Christopher Short

Recommended Posts

This happens when a named <div> is not identified to be "active" when the page first loads.

In almost all cases, the General pane has <div id="general" class="tab_content"> and is the first pane in the HTML of products.index.php.

The tabs are collected in /sources/products.index.inc.php, near the bottom and get displayed in main.php with <div id="tab_control">.

Now, <div class="tab_content"> has CSS display:none;. Under javascript control, initially, the first tab and the associated panel are unhidden and CSS rules applied.

The image above suggests that 'Hazmat' does not have the necessary attributes as compared to the 'General' tab. The javascript would see 'Hazmat' as the first tab to style as 'tab_selected' and make the associated div of tab_content visible.

Once you start clicking on tabs, the javascript knows what you want to see.

Link to comment
Share on other sites

7 minutes ago, bsmither said:

This happens when a named <div> is not identified to be "active" when the page first loads.

In almost all cases, the General pane has <div id="general" class="tab_content"> and is the first pane in the HTML of products.index.php.

The tabs are collected in /sources/products.index.inc.php, near the bottom and get displayed in main.php with <div id="tab_control">.

Now, <div class="tab_content"> has CSS display:none;. Under javascript control, initially, the first tab and the associated panel are unhidden and CSS rules applied.

The image above suggests that 'Hazmat' does not have the necessary attributes as compared to the 'General' tab. The javascript would see 'Hazmat' as the first tab to style as 'tab_selected' and make the associated div of tab_content visible.

Once you start clicking on tabs, the javascript knows what you want to see.

It was working before the last update. I have loaded to hazmat for almost 3 years now.

Here is the first thing when you click a product.

Onload.PNG

This is the general tab when clicked.

general.PNG

And this is SEO when clicked. The ebay tab does this as well, but that is a brand new install and I will have noodleman look at it. 

SEO.PNG

PS: I really appreciate the help!!

Link to comment
Share on other sites

Just a guess... Please force your browser to reload page resources. It may be the case that a change to the admin.js file is now causing the first tab to not be found.

On the first image you posted, I see that 'Search Engines' is 'active'. As such, does the web browser's address bar change accordingly? That is, does the web address contain the #part?

&action=edit&product_id=14#seo

Link to comment
Share on other sites

The forum added more content to my reply. Reload this conversation.

Ok, I misunderstood.

Only the Ebay and Search Engines tabs do not display their respective content panes - initially.

Does your browser have a diagnostics feature? Such as Firebug for Firefox (earlier versions, otherwise Developer Tools)?

If so, examine the tab_content divs to see if Search Engines content pane has anything to show.

Link to comment
Share on other sites

<div id="tab_seo" class="tab">
                              <a href="#seo" target="_self">Search Engines</a>
            </div>

<a href="#seo" target="_self">Search Engines</a>

 

Also see this:

 

<div id="content">
            <div id="tab_control">
                           <div id="tab_hazmat" class="tab">
                              <a href="#hazmat" target="_self">Hazmat</a>
            </div>
                           <div id="tab_general" class="tab">
                              <a href="#general" target="_self">General</a>
            </div>
                           <div id="tab_product_dimensions" class="tab">
                              <a href="#product_dimensions" target="_self">Dimensions</a>
            </div>
                           <div id="tab_leadtimes" class="tab">
                              <a href="#leadtimes" target="_self">Leadtimes</a>
            </div>
                           <div id="tab_ebay" class="tab">
                              <a href="#ebay" target="_self">Ebay</a>
            </div>
                           <div id="tab_description" class="tab">
                              <a href="#description" target="_self">Description</a>
            </div>
                           <div id="tab_pricing" class="tab">
                              <a href="#pricing" target="_self">Pricing</a>
            </div>
                           <div id="tab_category" class="tab">
                              <a href="#category" target="_self">Categories</a>
            </div>
                           <div id="tab_Options" class="tab">
                              <a href="#Options" target="_self">Options</a>
            </div>
                           <div id="tab_image" class="tab">
                              <a href="#image" target="_self">Images</a>
            </div>
                           <div id="tab_digital" class="tab">
                              <a href="#digital" target="_self">Digital</a>
            </div>
                           <div id="tab_seo" class="tab">
                              <a href="#seo" target="_self">Search Engines</a>
            </div>
                           <div id="tab_translate" class="tab">
                              <a href="#translate" target="_self">Translations</a>
            </div>
            
         </div>
         <div id="content_body">

Edited by Christopher Short
Link to comment
Share on other sites

30 minutes ago, bsmither said:

Do any other tabs in any other admin screen also fail to display its associated tab_content pane?

Or is the Add/Edit Product, Search Engine and Ebay tabs the only tabs - anywhere -  to show this behavior?

Nope. Just in product edit page, only ebay and SEO

Link to comment
Share on other sites

Have your browser's diagnostic "Console" pane open, then...

Open a product for editing. The 'Hazmat' tab is 'active' and the Hazmat content pane is showing.

Then click the Search Engines tab.

The Hazmat content pane goes to display:none; and the Search Engines content pane should go to display:block;.

The fact that the css change doesn't happen may trigger javascript to throw an error which would get logged on the browser's Console diagnostic pane.

Link to comment
Share on other sites

8 hours ago, bsmither said:

Have your browser's diagnostic "Console" pane open, then...

Open a product for editing. The 'Hazmat' tab is 'active' and the Hazmat content pane is showing.

Then click the Search Engines tab.

The Hazmat content pane goes to display:none; and the Search Engines content pane should go to display:block;.

The fact that the css change doesn't happen may trigger javascript to throw an error which would get logged on the browser's Console diagnostic pane.

I'm just not following...I can't seem to find the code again and since its just an extra click, I'll open a support ticket on it. thanks for your help. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...