Opened 10 years ago

Closed 10 years ago

Last modified 7 years ago

#4608 closed bug (worksforme)

jQuery UI Tabs Ajax Problem

Reported by: giovanni21 Owned by:
Priority: major Milestone:
Component: ui.tabs Version: 1.7.2
Keywords: tabs ajax include Cc:
Blocked by: Blocking:

Description

The formatting of jNice is lost, while the content via ajax in the container.

Tested in IE7 and Firefox.

code.php

<!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" xml:lang="ISO-8859-1">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link type="text/css" href="jQuery/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jQuery/ui.core.js"></script>
<script type="text/javascript" src="jQuery/ui.tabs.js"></script>

<script type="text/javascript">
jQuery(function($) {
	$('#tabs').tabs();
});
</script>

<link type="text/css" rel="stylesheet" href="_css/typo.css" />

	<link href="jQuery/jquery.jNice.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="jQuery/jquery.jNice.js"></script>
	
</head>

<body>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Dados Pessoais</a></li>
		<li><a href="frmEtapa1.php">Escolaridade</a></li>
	</ul>

	<div id="tabs-1">
	<? include('frmEtapa1.php'); ?>
	</div>
</div>
</body>
</html>

frmEtapa1.php

<form class="jNice">
<table border="0" cellpadding="3" cellspacing="2">
<tr>
	<th>Nome Completo:</th>
	<td><input type="text" name="fnome" id="fnome" size="32" maxlength="128" /></td>
</tr>

<tr>
	<th>Data de Nascimento:</th>
	<td><input type="text" name="fnasc" id="fnasc" size="32" maxlength="128" /></td>
</tr>
</table>
</form>

Attached Images

http://www.box.net/shared/9pp2226rvq

http://www.box.net/shared/uu0tpgpoe8

Change History (4)

comment:1 Changed 10 years ago by Jörn Zaefferer

Resolution: worksforme
Status: newclosed

Assuming jNice needs JS to initialize its styling, you need to apply that to the content loaded via Ajax, too. Either include a script in the ajax content, or use Tabs tabsload event to run the script.

comment:2 Changed 10 years ago by giovanni21

Tested all the examples cited in this address, and the style was not preserved in any of them. I need Help!

Sorry, the translation into English.

Demos: http://jqueryui.com/demos/tabs/

comment:3 in reply to:  1 Changed 10 years ago by giovanni21

Joern, I was reading the documentation, but found no solution. I need to know if I should quit or not to use ui.tabs with jNice?

Replying to joern.zaefferer:

Assuming jNice needs JS to initialize its styling, you need to apply that to the content loaded via Ajax, too. Either include a script in the ajax content, or use Tabs tabsload event to run the script.

comment:4 Changed 7 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.