Tab Ajax Bug?

[Midnight Modding]

When doing a tab bar using the ajax method, I noticed some odd behavior when testing something. 

I had 2 tabs. Each tab had a Table\Db table in it. Tab 1 had 1 result. Tab 2 had 0 results and said "nothing to show", or something like that.

Well, for some reason, if I click one tab then the other, back and forth between them several times, suddenly the row from Tab 1 shows up in tab 2. Tab 2 still has all of tab 2's proper column headers, but instead of saying nothing to show, the actual row from tab 1 shows under tab 2's column headers.

Also, I am pretty sure that on other pages where I have tabs using the ajax, they don't have to reload every time I click the tab... If I go from one tab to another, back and forth, it already has the info in them, whereas in this latest example it keeps doing the working symbol or w/e and reloads the tabs' content (eventually incorrectly).

[Aiwa]

Code? How are you using it? 

I've had my fair share of issues with the tab bar, but that's not one of them. 

[Midnight Modding]

59 minutes ago, Aiwa said:

Code? How are you using it? 

I've had my fair share of issues with the tab bar, but that's not one of them. 

I'll try to get some of the code together. The tabs are set up just the same as my other tab bars and same as described in documentation, though.

Have you noticed that deal where the lang bit shown for no rows changes, too? In other words, in my table phtml file I have it using some lang bit when there are no rows, but when you use the built in ajax to load the tab, it shows some default no content lang bit from IPS. newbie showed me where it comes from, it's due to the request being ajax.... I wonder if my current issues are related to this, since one of the tabs had no rows in it.

ps I just tested a different one of my tab bars and here is one thing I noticed... if the tab contents are just some basic html, switching to another tab and back does NOT cause a new ajax request. It just has the contents already there. but if the contents of the tab is a Table\Db table THAT is when every click of that tab causes the "working" thingy and loading it again and that is when eventually it messes up.

(to clarify: I am saying if every tab is set up to use ajax, the tabs with only basic html content in them do the ajax request only the first time, but the ones with tables in them do it every time the tab is clicked, ie doesn't retain the data).

[Martin A.]

4 hours ago, Midnight Modding said:

ps I just tested a different one of my tab bars and here is one thing I noticed... if the tab contents are just some basic html, switching to another tab and back does NOT cause a new ajax request. It just has the contents already there. but if the contents of the tab is a Table\Db table THAT is when every click of that tab causes the "working" thingy and loading it again and that is when eventually it messes up.

Sounds more like your HTML markup for the tab bar and tab content is messed up. The javascript for the tab bar does not care if your content is a Table\Db or pictures of kitties. If the content HTML for a tab exists, it will be shown. Otherwise it will be fetched and inserted to DOM. Next time you switch to that tab that, the old content will show. The only time it will re-fetch the content is if your selectors and names don't match, or aren't unique.

Have you showed code we would have known.

[bfarber]

Let us know if you can duplicate this with any default tabbars, but otherwise it sounds like you've messed something up in your code as Martin alluded to.

[Midnight Modding]

6 hours ago, Martin A. said:

Sounds more like your HTML markup for the tab bar and tab content is messed up. The javascript for the tab bar does not care if your content is a Table\Db or pictures of kitties. If the content HTML for a tab exists, it will be shown. Otherwise it will be fetched and inserted to DOM. Next time you switch to that tab that, the old content will show. The only time it will re-fetch the content is if your selectors and names don't match, or aren't unique.

Have you showed code we would have known.

I was doing this thing called about to go to sleep. I said I would get the code together. I obviously can't show the entire code of the content as it would end up many lines, not to mention a NDA on it.

	<div class='ipsBox ipsSpacer_bottom ipsSpacer_double'>
		<h3 class='ipsType_sectionTitle ipsType_reset ipsHide'>{lang="explore_questions_title"}</h2>
		<div class="ipsTabs ipsClearfix" id="elSomethingTabs" data-ipsTabBar data-ipsTabBar-contentarea="#elSomethingTabsContent">
			<a href="#elSomethingTabs" data-action="expandTabs"><i class="fa fa-caret-down"></i></a>
			<ul role="tablist" class="ipsList_reset">
				<li>	
					<a href="{$item->url()}" id='details' class='ipsTabs_item {{if $tab === 'details'}}ipsTabs_activeItem{{endif}}' title="" role="tab" aria-selected="{{if $tab === 'details'}}true{{else}}false{{endif}}">
						{lang="x_tab_details"}
					</a>
				</li>				
				{{if $item->something < 4}}
					<li>
						<a href='{url="app=something&module=la&controller=yes&tab=abc&id={$item->some_id}" seoTemplate="something_yes_that" seoTitle="$item->friendly_name"}' id='abc' class='ipsTabs_item {{if $tab === 'abc'}}ipsTabs_activeItem{{endif}}' title="" role="tab" aria-selected="{{if $tab === 'abc'}}true{{else}}false{{endif}}">
							{lang="some_abc"}
						</a>
					</li>
				{{endif}}
		</div>

		<section id='elSomethingTabsContent'>
			<div id="ipsTabs_elSomethingTabs_{$tab}_panel" class="ipsTabs_panel" aria-labelledby="details" aria-hidden="false">
				{$content|raw}
			</div>
		</section>
	</div>

I changed some wording, due to the NDA. That first tab is the one with just normal html in it. The second is the one with a Table\Db in it.

All I did was reported to you what was happening. That it is only the ones with Table\Db content in them.

[Midnight Modding]

Then from the php file:

		$tab = ( isset( \IPS\Request::i()->tab ) && ( \IPS\Request::i()->tab == 'abc' or \IPS\Request::i()->tab == 'def' ) ) ? \IPS\Request::i()->tab : 'details';

		$content = call_user_func( array( $this, "_{$tab}" ) );

And in the function _abc the creation of the \Table\Db table.

I don't see how it can have anything to do with naming, as I have many tab bars and tabs and this only happens in the ones with Table\Db content. I don't name those tabs in any different way than I name the ones without Table\Db content.

I changed the labelledby to $tab in the content area divs, btw, but obviously that isn't related.

[Aiwa]

You've got a section for the details tab.  What about for the 'abc' tab?  Are you returning the required section HTML with your controller call? Are you waiting for the JS to respond with the HTML before switching tabs?  Otherwise you'll be injecting HTML with an aria-hidden="false" after you've switched tabs. You likely have overlapping data, one underneath the other.  Inspect the actual HTML on the page when you run into the issue and see what state your panels are in.

[Midnight Modding]

1 hour ago, Aiwa said:

You've got a section for the details tab.  What about for the 'abc' tab?  Are you returning the required section HTML with your controller call? Are you waiting for the JS to respond with the HTML before switching tabs?  Otherwise you'll be injecting HTML with an aria-hidden="false" after you've switched tabs. You likely have overlapping data, one underneath the other.  Inspect the actual HTML on the page when you run into the issue and see what state your panels are in.

I mentioned there at the end that I changed that labelledby to $tab and the section's div id has $tab in it also so the section would be whatever they are viewing. And like I said, it only does it for ones with that one type of content in it. I have one tab bar that has around 4 tabs without tables in them and 1 with it, and switching between all of them gives the same result... only the one with the table does this reloading on every click of the tab.

The contents of my phtml file are almost exactly like the ones IPS uses in this situation, with 1 section in it with $tab as part of the id.

So, just to summarize, no matter how many tabs I place there, every one of them keeps its content from the first load, except the ones that have Table\Db content.

[Midnight Modding]

Just to show the rest of what I am doing:

		if ( \IPS\Request::i()->isAjax() )
		{
			\IPS\Output::i()->output .= $content;
		}
		else
		{
			\IPS\Output::i()->output = \IPS\Theme::i()->getTemplate( 'something' )->somePage( $item, $tab, $content );
		}

...

	protected function _abc()
	{
		/* Create the table and set templates */
		$table = new \IPS\something\Blah\Table( $this->item->url(), 'all' );
		$table->tableTemplate = array( \IPS\Theme::i()->getTemplate( 'global' ), 'table' );
		$table->rowsTemplate  = array( \IPS\Theme::i()->getTemplate( 'global' ), 'rows' );

		// Return The Tab Template
		return \IPS\Theme::i()->getTemplate( 'something' )->blahAbc( $table );
	}

again changed some wording, just due to the NDA, thus all the somethings, blahs, abcs.

are you saying I am supposed to return a section in the blahAbc template? See I've done nothing with ajax before. But now that I think about it.... since the ajax request is ONLY returning its own template, NOT the template with my above section in it, I'm probably supposed to be returning a new section for the abc one, right? I didn't realize that.

But still why is it only messing up certain tabs?

edit: actually that can't be the whole issue, either because in another tab bar the section I had in its template was for the tab with the Table\Db table and that tab had to keep reloading, also, with me knowing that section was for sure there.

[Aiwa]

5 hours ago, Midnight Modding said:

mentioned there at the end that I changed that labelledby to $tab and the section's div id has $tab in it also so the section would be whatever they are viewing. 

Not how the tab bar works. Create the sections you need for each tab, make them unique, and the tabbar is will hide / unhide for you.

[Midnight Modding]

1 hour ago, Aiwa said:

Not how the tab bar works. Create the sections you need for each tab, make them unique, and the tabbar is will hide / unhide for you.

ok, but as I said, for another tab bar, the one section I did set up (not knowing I had to do them all) still didn't stop it from loading. Even with me not setting up the other section, wouldn't the 1 section I did set up keep it from having to load again when going back to that tab? And, again, this was only happening for the tabs with one type of content in them. I will of course fix the setup where it has all the sections now, but I have a feeling that isn't the entire issue.

[Martin A.]

You don't have to pre-define all the content <section>s, but your HTML you return over AJAX return need to include it. If not the return HTML will be dumped directly in #elSomethingTabsContent.

18 hours ago, Midnight Modding said:

I was doing this thing called about to go to sleep

Yeah. No. You didn't say that. You said you were "trying to get some of the code together". Then you rambled on for two paragraphs about a completely different issue.

[Midnight Modding]

I did mine just like IPS did. IPS didn't put separate sections around them. For core\modules\front\system\settings.php, look at function _email(), function _username(), function _signature(). None have sections in the returned html and the main template (settings) has only one section, just how I had mine, with the div id being ipsTabs_elSettingsTabs_setting_{$tab}_panel. That is the only place whatsoever in the files where there is a div with part of the id being ipsTabs_elSettingsTabs_setting_.

And, again, no comment on why having separate sections (or not) would cause ONLY the ones with tables in them to have to reload. Clearly, what content is in them does matter or all tabs would be behaving the same way.

Notice on the settings page they don't reload on click. It's not the section setup causing it, as I already said was likely to be the case.

[HeadStand]

FWIW, I always have issues when using tabs + tables. I've long since given up on getting this to work properly, and instead I use the HTML for the tabs but remove the data-ipsTabBar (and associated attributes) so that it's just a full page reload on every tab click.

@Midnight Modding when you have tables/tabs and your page is reloading anyway, that's an indication of an error somewhere. It's usually nearly impossible to figure out WHERE the error is, but there's an error. Somewhere. And it may not even be a "real" error; in other words, if you disable the JS on tabs, everything works just fine.

I think there's just some JS conflict here that's just throwing everything off. As I said, I gave up on this setup a long time ago, as I never was able to find the root cause.

[Midnight Modding]

@HeadStandthank you for that post, right to the point with information. At this point, I'll probably just keep it how it is because it's rare that it would be an issue, ie causing content to overlap. Sure, the tabs with tables will keep reloading (as I said right off it was only those), but that in itself is not worse than a whole page reload, as long as there is no other issue, such as that overlapping one... The overlapping issue only happened when i clicked one tab and then the other back and forth several times and I believe it only happened when one of them was a "no content to show" result.

[Midnight Modding]

@HeadStandwas your only issue that it kept loading the tabs with tables when clicking them or did you have the overlapping content, as well? If the overlapping is a separate issue, I could add all of the sections (although, my example from ipb seems to not do that). Otherwise, it will just come down to whether the client prefers the full page loads over whatever issues.

[HeadStand]

11 hours ago, Midnight Modding said:

@HeadStandwas your only issue that it kept loading the tabs with tables when clicking them or did you have the overlapping content, as well? If the overlapping is a separate issue, I could add all of the sections (although, my example from ipb seems to not do that). Otherwise, it will just come down to whether the client prefers the full page loads over whatever issues.

Both. 

But the overlapping issue could probably be resolved with unique table IDs and making sure you are sending back the right content based on the request. I forget the exact syntax right now, but you want to do a check for isAjax and for the resortKey (I think).

[Midnight Modding]

I sure wish this could be figured out. So far I haven't been able to and it's going to suck to have to take out the ajax and have it leave pages.

Works fine in the acp… Just on the front side this issue happens. So something different between IPS's implementation in one place vs. the other. My setup is the same in both places... check to see if it's an ajax request where I know whether to return the whole template or just part of it.... call the function based on the value of tab, etc...

It was so bad today I've about got to take out the ajax part for sanity in testing the rest of the app. I switched only 1 time from 1 tab to another and back and it put the whole wrong tab's contents in,. lol. In the past it was more combining them.

[Midnight Modding]

Sigh. @HeadStandsomeone found yet another issue, even when NOT using the ajax. In mobile mode, if clicking the tab/dropdown and switching it to another tab, once, all is fine, it leaves the page and then shows the proper tab on the next page. However, if clicking it AGAIN on that next page to switch tabs again, the tab titles all overlap and they aren't even clickable anymore. Do you have an idea on what is going on? I did it just like tabs are done everywhere else I see and I took out the data- part like you mentioned and I cant figure out what could cause this other issue.

Basically, what it's doing is for mobile mode, the tab bar becomes a dropdown selector, well once you click to go to a different tab, then you click that dropdown again on the next page, the links in it are overlapping with the content below the tab bar and some links are no longer clickable.

edit: it does it even with a direct link to the second page, so either something different about that tab or something in my html, I guess.

[Aiwa]

You're holding it wrong. Works fine on mobile.

https://aiwa.me/profile/1-aiwa/?tab=node_eastats_bfFour

[Midnight Modding]

1 hour ago, Aiwa said:

You're holding it wrong. Works fine on mobile.

https://aiwa.me/profile/1-aiwa/?tab=node_eastats_bfFour

I didn't say "all" has problems on mobile. I said mine does, where I took out the data-, thus having it leave the page for each tab. And, again, I set it up the same way as it's set up in first party examples I se, other than I took out the data- part due to their bug onm the front end.

[Midnight Modding]

so, to summarize:

 data-ipsTabBar data-ipsTabBar-contentarea="#elSomethingTabsContent"

= the issues headstand and I talked about.

Removing that part = mobile mode tab dropdown not working properly, where basically it stays open on all pages except the first one and then has its contents overlapping the panel contents.

When leaving IN that ajax part, the menu works fine in mobile mode.

[Midnight Modding]

ps it's the same page as I showed code from in the post above, but with data- part taken out:

	<div class='ipsBox ipsSpacer_bottom ipsSpacer_double'>
		<h3 class='ipsType_sectionTitle ipsType_reset ipsHide'>{lang="explore_questions_title"}</h2>
		<div class="ipsTabs ipsClearfix" id="elSomethingTabs">
			<a href="#elSomethingTabs" data-action="expandTabs"><i class="fa fa-caret-down"></i></a>
			<ul role="tablist" class="ipsList_reset">
				<li>	
					<a href="{$item->url()}" id='details' class='ipsTabs_item {{if $tab === 'details'}}ipsTabs_activeItem{{endif}}' title="" role="tab" aria-selected="{{if $tab === 'details'}}true{{else}}false{{endif}}">
						{lang="x_tab_details"}
					</a>
				</li>				
				{{if $item->something < 4}}
					<li>
						<a href='{url="app=something&module=la&controller=yes&tab=abc&id={$item->some_id}" seoTemplate="something_yes_that" seoTitle="$item->friendly_name"}' id='abc' class='ipsTabs_item {{if $tab === 'abc'}}ipsTabs_activeItem{{endif}}' title="" role="tab" aria-selected="{{if $tab === 'abc'}}true{{else}}false{{endif}}">
							{lang="some_abc"}
						</a>
					</li>
				{{endif}}
		</div>

		<section id='elSomethingTabsContent'>
			<div id="ipsTabs_elSomethingTabs_{$tab}_panel" class="ipsTabs_panel" aria-labelledby="details" aria-hidden="false">
				{$content|raw}
			</div>
		</section>
	</div>

See anything in it that would cause this? Again all I did was take out the data- part. It shows the proper content on each page, the problem is solely that the dropdown menu blends in with the content at the top. But it does NOT blend into it for the first tab. Only the others.

[bfarber]

Did you check if there were any javascript errors?