Christopher Short Posted March 24, 2018 Share Posted March 24, 2018 The product option tabs are only loading after clicking save and reload. I posted before and after below. Any ideas how to fix this? Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 24, 2018 Share Posted March 24, 2018 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. Quote Link to comment Share on other sites More sharing options...
Christopher Short Posted March 24, 2018 Author Share Posted March 24, 2018 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. This is the general tab when clicked. 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. PS: I really appreciate the help!! Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 24, 2018 Share Posted March 24, 2018 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 Quote Link to comment Share on other sites More sharing options...
Christopher Short Posted March 24, 2018 Author Share Posted March 24, 2018 9 minutes ago, bsmither said: 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. doing a reload fixes it that session, but not permanently. Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 24, 2018 Share Posted March 24, 2018 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. Quote Link to comment Share on other sites More sharing options...
Christopher Short Posted March 24, 2018 Author Share Posted March 24, 2018 (edited) <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 March 24, 2018 by Christopher Short Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 24, 2018 Share Posted March 24, 2018 And this part? <div class="tab_content" id="seo" style="display: block;"> <h3>Search Engines</h3> <fieldset> <legend>Meta Data</legend> etc. Quote Link to comment Share on other sites More sharing options...
Christopher Short Posted March 24, 2018 Author Share Posted March 24, 2018 5 minutes ago, bsmither said: And this part? <div class="tab_content" id="seo" style="display: block;"> <h3>Search Engines</h3> <fieldset> <legend>Meta Data</legend> etc. I'm not seeing that. Where would I locate it? This? Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 24, 2018 Share Posted March 24, 2018 Yes, and when you click on the Search Engines tab (or any tab), the related display:none; should change to display:block;. Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 24, 2018 Share Posted March 24, 2018 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? Quote Link to comment Share on other sites More sharing options...
Christopher Short Posted March 24, 2018 Author Share Posted March 24, 2018 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 Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 24, 2018 Share Posted March 24, 2018 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. Quote Link to comment Share on other sites More sharing options...
Christopher Short Posted March 25, 2018 Author Share Posted March 25, 2018 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.