Do I really need JQuery UI Tabs to switch back and forth between two Ajax loads?

Question

Sorry if this was covered before in some way that I wasn't able to understand.

I'm somewhat new to JavaScript/Jquery and I normally enjoy wasting hours, fighting my way through things until I figure them out, but my lack of knowledge may be causing me to complicate things where an easier solution unknown to me may be available.

I've already successfully implemented JQuery UI Tabs for a portfolio page that switches between two types of designs. I then was able to load each with AJAX, which I liked, although not sure how in my situation it's beneficial besides separating the content.

I then wanted to switch to using text links instead of the ul.tabs. I've always just stripped the style from the tabs to make them appear as basic text links, but I figured there was a more direct way of doing this and wanted to move the links out of the tabbed area, to the sidebar. However, I couldn't figure out how to make the text links load AJAX.

After trying to figure it out, I wondered if the UI Tabs were even something I needed. I only used them as a way to fade in and out back and forth between two sets of content.

I'm taking a wild guess that there's a much simpler way for me to be doing this?

Two text links, two html files to be loaded with Ajax, a fade in between changes. That's all I want.

Here's how I want the html-

<div id="sidebar">
  <ul>
    <li><a href="ajax/designs1">Designs 1</a></li>
    <li><a href="ajax/designs2">Designs 2</a></li>
  </ul>
</div>
<div id="content">
  This is where stuff will load
</div>

I guess it would also be nice to append a class to the active li a so I could style it differently and give it a text cursor.

Can I do this with just a few lines of of JavaScript/JQuery?

Also, is there a noscript method to load both html files at once if JavaScript is disabled?

Sorry for the ignorance. I will be very happy and grateful for some help.

UPDATE:

---

I don't mind the tabs, they are great and very easy to use. I've had them controlling my portfolio for a while now. I just know I'm barely using the functionality and it isn't worth the weight.

This site was down for a while, so I was stuck trying to figure out the code you gave me for myself. I couldn't get it to work quite like you had it. The append function confused me, I didn't know what was being appended before the click. But I was able to trial and error my way through it to get it working, almost perfectly for what I wanted, but the fade in and out of the hidden section was all messed up. The visible section was perfect.

Here's what I came up with. Like I said, I am deep in the learning process so excuse this code if it's just wrong for whatever reason.

$(document).ready(function(){
        $('#websites').hide();
        $('#hitlogo').addClass("activ");    

        $('#hitlogo').click(function() {
     $(this).addClass("activ"); 
     $('#hitweb').removeClass("activ");
     $('#websites').fadeOut(1000);
     $('#logos').fadeIn(1000);
    })

     $('#hitweb').click(function() {
      $(this).addClass("activ"); 
      $('#hitlogo').removeClass("activ");
      $('#logos').fadeOut(1000);
      $('#websites').fadeIn(1000);
    })

});

I gave up trying to fix the issue with the fade and moved onto something else. Though I was pretty proud of myself when I was able to add and remove the classes when each one was clicked so I could style them as I needed.

I quickly just used the code you gave me to load the pages and it seems to be working, I just have to add some fade.

Should the html page that gets loaded in be written up in any specific way? Right now it's just the group of elements that were inside the original page and nothing else. Viewed on it's own, there'd be no CSS styling or any other elements. Am I missing something or is this just how it is for those with JS disabled?

I appreciate your help. It's fun learning. I mastered html and css a while ago and it's about time I get to learning this now. It's intimidating as hell at first, but I think I'm slowly starting to grasp the concept.

Thanks again.

Answer 1

The simplest way to do all this is to put all of the content staticly on the same page.

You can then add all of the interaction in Javascript do that it works seamlessly with Noscript.

You can write something like this:

$(function() {
    $('#page2').hide();
    $('#linkContainer')
        .appendChild(
            $('<a href="#">Page 1</a>').click(function() {
                $('#page2').fadeOut();
                $('#page1').fadeIn();
            })
        ).appendChild(
            $('<a href="#">Page 2</a>').click(function() {
                $('#page1').fadeOut();
                $('#page2').fadeIn();
            })
        )
});

If you want to have more than two pages, you should do this in a loop.

Answer 2

There's nothing wrong with jQuery UI Tabs... the plugins are supposed to make your life easier.

Anyway, check out this tutorial on nettuts+ about Ajax tabs. I think you might like it and learn from it as well :)

EDIT: Hmmm... ok I guess I didn't answer your question. To get a link to load AjAX you just need to bind a click event to it.

<script type="text/javascript">
$(document).ready(function(){
 $('#sidebar a').click(function(){
  var url = $(this).attr('href');
  $('#content').load(url,loaded);
  return false;
 })
});
function loaded() {
 $('#content').show();
}
</script>

Doing it this way also allows your site to work properly if javascript is disabled, since the links will take you to the appropriate page. Without javascript you won't be able to display both pages at once without using frames.