[jQuery] Re: open external web page inside the tab
What do you get? What were you expecting?
Using $().load() to call in HTML will load only the raw HTML code so
you won't get any images, or styles. If you actually want google to
look and work like google then you'll probably need to load it in an
iframe.
On Aug 28, 9:12 am, ts thaisi...@gmail.com wrote:
I have the following code, basically i want to load first page of
google into my ajax tab 1. But i dont get what i'm expecting. Any
idea?
==
!DOCTYPE html
html
head
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 /
titlejQuery UI Example Page/title
link type=text/css href=css/ui-lightness/jquery-
ui-1.7.2.custom.css rel=stylesheet /
script type=text/javascript src=js/jquery-1.3.2.min.js/
script
script type=text/javascript src=js/jquery-
ui-1.7.2.custom.min.js/script
script type=text/javascript
$(function() {
$(#tabs).tabs();
});
$('#tabs').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
/script
/head
body
div class=demo
div id=tabs
ul
lia href=#tabs-1Nunc tincidunt/a/li
lia href=http://www.google.com;Ajax Tab 1/a/li
lia href=ajax/content2.htmlAjax Tab 2/a/li
/ul
div id=tabs-1
pProin elit arcu, rutrum commodo, vehicula tempus, commodo
a,
risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam
elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed
magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et
mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt
interdum. Phasellus ipsum. Nunc tristique tempus lectus./p
/div
/div
/div!-- End demo --
div class=demo-description
pFetch external content via Ajax for the tabs by setting an href
value in the tab links. While the Ajax request is waiting for a
response, the tab label changes to say Loading..., then returns to
the normal label once loaded./p
/div!-- End demo-description --
/body
/html
[jQuery] Re: open external web page inside the tab
nope.. nothing.. it is just empty in that tab. the reason why i'm
doing this is actually when i'm doing the rails apps, i want the tab
to to perform certain things by the controller. and i dont know how to
load the view inside the tab since it only take in raw HTML.
On Aug 28, 4:24 pm, Leonard Martin leonard.mar...@gmail.com wrote:
What do you get? What were you expecting?
Using $().load() to call in HTML will load only the raw HTML code so
you won't get any images, or styles. If you actually want google to
look and work like google then you'll probably need to load it in an
iframe.
On Aug 28, 9:12 am, ts thaisi...@gmail.com wrote:
I have the following code, basically i want to load first page of
google into my ajax tab 1. But i dont get what i'm expecting. Any
idea?
===
===
!DOCTYPE html
html
head
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 /
titlejQuery UI Example Page/title
link type=text/css href=css/ui-lightness/jquery-
ui-1.7.2.custom.css rel=stylesheet /
script type=text/javascript
src=js/jquery-1.3.2.min.js/
script
script type=text/javascript src=js/jquery-
ui-1.7.2.custom.min.js/script
script type=text/javascript
$(function() {
$(#tabs).tabs();
});
$('#tabs').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
/script
/head
body
div class=demo
div id=tabs
ul
lia href=#tabs-1Nunc tincidunt/a/li
lia href=http://www.google.com;Ajax Tab 1/a/li
lia href=ajax/content2.htmlAjax Tab 2/a/li
/ul
div id=tabs-1
pProin elit arcu, rutrum commodo, vehicula tempus,
commodo a,
risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam
elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed
magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et
mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt
interdum. Phasellus ipsum. Nunc tristique tempus lectus./p
/div
/div
/div!-- End demo --
div class=demo-description
pFetch external content via Ajax for the tabs by setting an href
value in the tab links. While the Ajax request is waiting for a
response, the tab label changes to say Loading..., then returns to
the normal label once loaded./p
/div!-- End demo-description --
/body
/html
