JQuery ajax tabs, prevent loading

Hi all, I'm new to JQuery and I've been trying to solve this one for a while, but still no luck.

I'm using JQuery ajax tabs, with 2 tabs:

1st one is where movies are displayed
2nd one is where movies I bought are displayed

(the website is not actually about movies, but is easier to explain it this way, the point is that 2 different JSP's are loaded on every tab)

I also have some links outside the JQuery tabs, where categories are displayed, let's say: action, sci-fi, romance, horror etc.

When any of these links are clicked, movies of the respective category are listed (on the 1st tab) and if click on "my movies tab" (the 2nd one), movies I bought are displayed.

This works fine so far.

The problem comes, when the 2nd tab is selected, and I click on any of the categories (which are outside the tabs, as I mentioned), then everything stops working properly.

As I have to activate the 1st tab, the load method is triggered no matter how hard I've tried to stop it and at the end, the 1st tab loads it's default data, after loading the requested data.

If I include alerts on every step, at the end it actually loads the requested data, after loading the default data, which is not desirable as well, but if I remove these alerts, then the default data is loaded and the behaviour in general gets wrong.

So here's some relevant code,
//This is the code of the outside links, they're all from the class: vacanteItem

		$('a.vacanteItem').bind('click', function (e) {
				e.preventDefault();
				$.ajaxSetup({cache: false});
	
				$( "#tabs" ).tabs({ active: 0 });


				$('#tabs div.ui-tabs-panel').load(this.href);
				e.stopImmediatePropagation();
				e.preventDefault();

		});


//This is the code for the tabs element, that actually doesn't have much to do with my problem here described. Both events are triggered by other actions and has nothing to do with the problem. One is for displaying the movie details and the other one is for displaying previous/next page of results.

		$('#tabs').tabs({

			load: function(event, ui) {

				$(ui.panel).on('click', 'a.ligaEspecial2', function(event) {
					event.preventDefault();
					$(ui.panel).load(this.href);
					event.stopImmediatePropagation();
				});

				$(ui.panel).on('click', 'a.laVacante', function(event) {
					event.preventDefault();
					$( "#dialog" ).load(this.href).dialog( "open" );
					event.stopImmediatePropagation();
				});

			}

		});

Open in new window


I've tried using the beforeLoad event, but didn't succed:
		$('#tabs').tabs({
			beforeLoad: function(event, ui) {
				if (ui.newTab.context.id == "ui-id-1"){ // <--- HOW ELSE CAN I GET THE CURRENT/ACTIVE TAB FROM HERE??
					alert("en el activate ui.index: " + ui.newTab.context.id);
					event.preventDefault();
					return;
				}
			}
		});

Open in new window


Even though there's an "event.preventDefault();" and a "return;" the load event is still invoked after this.

There's a lot of other approaches I've tried, which I think there's no point to show them here, as any of those worked.

Any help will be really appreciated.

Regards
sergiomnAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sergiomnAuthor Commented:
Anyone??, any ideas??
0
Michel PlungjanIT ExpertCommented:
Can you set up a jsfiddle.net?
0
sergiomnAuthor Commented:
I've already solved it. I'll post the solution tomorrow.
0
sergiomnAuthor Commented:
In case this helps others not to waist so many hours like I did:

My problem was that when I had to activate a different tab, and make an ajax request, the jsp was executing twice: one for the original click action, and another one when the tab was activated, and when that happened, the default data was shown, not the requested one by the link, even though, both actions were made.

What I did was changing the link of that tab, so the activate event would trigger the right request, which means, the link would include all necesary parameters, and then, don't call the load event, so it doesn't execute twice.

It might not be the cleanest solution, but it works just fine now.

Here's the code:

		$('a.vacanteItem').bind('click', function (e) {
				e.preventDefault();
				$.ajaxSetup({cache: false});

				// 1.- these next 3 lines, modify the tab link:
				var tabs = $("#tabs");
				var tab = $(tabs.data('uiTabs').tabs[0]);
				tab.find('.ui-tabs-anchor').attr('href', this.href);

				//here, the 1st tab is activated, so when that happens, the jsp gets executed
				$( "#tabs" ).tabs({ active: 0 });

				//2.- here I validate if the user is on the 1st tab already or not, at the time he clicked on the outside links, otherwise, the jsp would be executed twice, and for some reason, would display the default info (without parameters)
				if ($currentTab == 0)
					$('#tabs div.ui-tabs-panel').load(this.href);
				
				//3.- Now I know the user is wathching the 1st tab, so I set this variable to '0' so the next time he clicks on any other outside link, the previous statement will be executed
				$currentTab = 0;

				e.stopImmediatePropagation();

		});

// 4.- And now, on the tabs element I've added this.
//The activate event is triggered only when switching tabs, so if the desired tab is the 1st one, I set $currentTab to 1, so the load action from the previous method is not invoked:

		$('#tabs').tabs({

			load: function(event, ui) {

			activate: function( event, ui ) {
				if (ui.newTab.index() == 0){
					$currentTab = 1;
				}
			}
		});

Open in new window


Now the information displayed is correct, and JSP's are executed only once.

I had to deal with another problem after this, and it was that the url encoding for creating the links wasn't working all the time, since the website is in spanish. Javascript can only  encode for UTF-8 and ISO-8859-1 was needed. I solved this too, but I believe that's material for a new/different thread.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sergiomnAuthor Commented:
Because it works. The main problem is that there's no way to stop the tabs load event from being executed when a tab changes, no matter how many event. preventDefault's you add. So, "if you can't beat them, join them", I just let that load event to do the job by changing it's link, and then prevented the other call, (wich I could control) to be executed.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.