#4608 closed bug (worksforme)

Opened June 15, 2009 11:17PM UTC

Closed June 16, 2009 10:48AM UTC

Last modified October 11, 2012 09:15PM UTC

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

Attachments (0)

Change History (4)

Changed June 16, 2009 10:48AM UTC by jzaefferer comment:1

resolution:	→ worksforme
status:	new → closed

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.

Changed June 16, 2009 01:56PM UTC by giovanni21 comment:2

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/

Changed June 16, 2009 04:06PM UTC by giovanni21 comment:3

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 [comment:1 joern.zaefferer]: