jQuery UI Ajax tabs problem

[eluser]blorriman[/eluser]
Sorry if the this has been answered before, but I couldn't find it.

I have a jQuery tabs set up that works with the content already loaded with the page, but I want to load remote content when the tab is clicked. I read through the jQuery tabs - load content via Ajax - but I can't get it to work, it just opens the content in a new page.

here is my view :

Code:

<div id="tabs">
    <ul id="featured-links">
        <li><a href="#tab-collapsible">collapsible content</a></li>
        <li><a href="#tab-tables">zebra tables</a></li>
        <li><a href="#tab-dl">definition list</a></li>
        <li><a href="#tab-blog">blog test</a></li>
        <li><a href="/start/remote_tab">remote</a></li>
    </ul>
    <div id="featured-content">
        <div id="tab-collapsible">
            &lt;?php $this->load->view('default/collapsible-content'); ?&gt;
        </div>
        <div id="tab-tables">
            &lt;?php $this->load->view('default/tables'); ?&gt;
        </div>
        <div id="tab-dl">
            &lt;?php $this->load->view('default/definition-list'); ?&gt;
        </div>
        <div id="tab-blog">
            &lt;?php $this->load->view('default/blog'); ?&gt;
        </div>
    </div>
</div>

As you can see from the last tab the href is /start/remote tab which is just loading the view:

Code:

function remote_tab() {
        $this->load->view('default/remote-tab');
    }

Any direction would be greatly appreciated.

Cheers,

[eluser]leonardteo[/eluser]
I think the problem might be the actual jquery. Could you post the Javascript you are calling?

I'm assuming that you're using JQuery UI:
http://jqueryui.com/demos/tabs/

If not, you have to prevent what is known as "event bubbling" so that when you bind a click function to each of the tabs, you have to return false, or it will tell the browser to load a new page.

Leonard

[eluser]blorriman[/eluser]
Thanks Leonard,
Here is the javascript

Code:

$(function(){
        $("#tabs").tabs({
            ajaxOptions: {
                error: function(xhr, status, index, anchor) {
                    $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
                }
            }
        });
    });

[eluser]leonardteo[/eluser]
Hey,

Hmmm ok it's not the javascript. If you had implemented your own js for the tabs you would have needed to prevent event bubbling.

I just took a quick look and implemented a mixed jquery pre-loaded and ajax tab very similar to yours above. Unfortunately I don't know why your implementation isn't working...cuz it should.... *shrug*
http://www.leonardteo.com/jquerytabs/

Sorry, I don't have more time right now to trouble-shoot this issue....

L.

[eluser]intractve[/eluser]
Did you check what firebug has to say about your ajax request?

[eluser]kimo_gusatava[/eluser]

Code:

<div id="tabs">
     <ul>
          <li><a href="#tabs-1">Your Tab</a></li>
          <li><a href="&lt;?php echo site_url('/remote/stuff'); ?&gt;">remote</a></li>
          <li><a href="#tabs-3">edit Tab</a></li>
     </ul>
......

I think that you should set the .htaccess first if you haven't set it use index.php/remote/tab

[eluser]blorriman[/eluser]
Thanks kimo_gusatava,
I've just got the standard .htaccess and don't know anything about it. How would I allow access to the remote/tab.php - and other files I would want to access?

Cheers, Bob

[eluser]kimo_gusatava[/eluser]
Try this I saw this on the forum and been using it ever since...

Code:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

<IfModule !mod_rewrite.c>
    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.
    # Submitted by: ElliotHaughin

    ErrorDocument 404 /index.php
</IfModule>