How to update tab content using jQuery

108 100+

Hi
I have created a tabbed interface using jQuery using the code below

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

     <script type="text/javascript">

        $(document).ready(function(){

            $('#tabs').tabs({ remote: true });

        });

    </script>

</head>
 
<title>Ajax Tabs</title>
 
<body>
 
    <h2>Ajax tabs</h2>
 
    <div id="tabs">

        <ul>

            <li><a href="p1.html"><span>One</span></a></li>

            <li><a href="p2.html"><span>Two</span></a></li>

            <li><a href="p3.html"><span>Three</span></a></li>

        </ul>

    </div>
 
</body>

</html>

Offcourse all the external script files have been included, and the tabs are working fine, what i want to do is

I have a fourth html file named p4.html, also p3.html contains a link to this file. i want to replace the content in the third tab with p4.html (when a link in p3.html file is clicked). Please help

Oct 17 '08 #1

Subscribe Post Reply

7365

acoder

16,027

Expert Mod 8TB

Is this what you're looking for?

Oct 17 '08 #2

rizwan6feb

108

100+

This seems to be the solution but not working for me, i have tried like this

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

      <script type="text/javascript">

         $(document).ready(function(){

             $('#tabs').tabs({ remote: true });

         });

    $('#tabs').tabs({

        load: function(e, ui) {

            $('a.link', ui.panel).click(function() {

                $(ui.panel).load(this.href);

                return false;

            });

        }

    });

     </script>

 </head>

<title>Ajax Tabs</title>

 <body>

     <h2>Ajax tabs</h2>

      <div id="tabs">

         <ul>

             <li><a href="p1.html"><span>One</span></a></li>

             <li><a href="p2.html"><span>Two</span></a></li>

            <li><a href="p3.html"><span>Three</span></a></li>

         </ul>

     </div>

   </body>

 </html>

p3.html contains a link to p4.html and a class with name 'link' is applied

Oct 18 '08 #3

rizwan6feb

108

100+

Please help.........

Oct 18 '08 #4

acoder

16,027

Expert Mod 8TB

Where's the jQuery file included in your code?

Oct 20 '08 #5

rizwan6feb

108

100+

Where's the jQuery file included in your code?

Offcourse the file is included, before line #4 in the head section, if it was not there, tabs should not be working

Oct 20 '08 #6

acoder

16,027

Expert Mod 8TB

Besides that line, have you got any other code in that test page? Try with a simple test exactly as described and then build from there.

Oct 20 '08 #7

rizwan6feb

108

100+

I have attached a zip file containing all the scripts and html files. Please find a link in the third tab which in not opening in the current tab, clicking the link leaves the tabbed interface

Attached Files

jquery.zip (32.7 KB, 211 views)

Oct 21 '08 #8

acoder

16,027

Expert Mod 8TB

It seems as if the function has not been applied to the link. Try selecting all links.

Oct 21 '08 #9

rizwan6feb

108

100+

It seems as if the function has not been applied to the link. Try selecting all links.

I have selected all links, still not working

Oct 22 '08 #10

rizwan6feb

108

100+

Anyone with a better response ?

Oct 24 '08 #11

by: Irmen de Jong | last post by:

Hi I'm trying to create e-mail content using the email.MIMEText module. It basically works, until I tried to send mail in non-ascii format. What I did, to test both iso-8859-15 and UTF-8...

Python

Update Query using if or iff function in MS Acess

by: Kannan s | last post by:

Dear Sir, Sub: help requred to build an Update Query using if or iif I am having two tables with the following fields I wish to create a single update query in MS Access Table1: code,...

Microsoft Access / VBA

Update table using partial word match

by: SQL Learner | last post by:

Hi Alex (Kuznetsov) and All, This is to follow up with my last post, "Link two tables using partial word match". How can I UPDATE table using partial word match? How can I write a SQL statement...

Microsoft SQL Server

Anyone using JQuery witth ASP.net?

by: darrel | last post by:

I'm still struggling to find a javascript/ajax library that I want to stick with for a while. JQuery is looking great these days...refined, LOTS of plug-ins, and an active community. Is...

ASP.NET

Popup aspx page using jquery

by: pavanip | last post by:

Hi, I want to popup aspx page using jquery. I have written the following code <a href="Contactus.aspx?TB_iframe=true&height=250&width=200" class="thickbox" >AboutUs</a> I have called...

Javascript

jquery pagination problem

by: pradeepjain | last post by:

<html> <head> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.rating.js" type="text/javascript" language="javascript"></script> <link...

Javascript

update data using jquery

by: semanticnotion | last post by:

I have a page that lists records from a database call. I want to have an 'edit' link on each row that will popup a Jquery dialog so that the row can be edited. My question is how do I pass the data...

Web Applications

How to apply autocomplete in gridview (in asp.net3.5 with C#) using jquery?

by: rhtdmrai | last post by:

I want to apply autocomplete in gridview (in asp.net3.5 with C#) using jquery and this gridview is within the ajax update panel <asp:UpdatePanel ID="UpdatePanel1" runat="server"> ...

.NET Framework

How do reload the page using jQuery?

by: apssiva | last post by:

Hello All, 1. First i select the class name in combo box -> using jQuery reload the page. 2. after reload the page, Student name was display in random. so i add two radio button. 1....

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

How to update tab content using jQuery

Similar topics