Não sei se aqui é o local correto para esta dúvida, mas vamos lá.
Na aplicação que estou desenvolvendo, estou utilizando tab's da seguinte forma: a 1ª tab contem um formulário e dentro dela tem outra tab que exibe outro tipo de formulário, sendo que os formulários da 2ª tab são páginas externas que são exibidas dinamicamente por meio a um include. Nos teste funciona muito bem , mas quando integro a aplicação não aparece nada, alguém poderia me dar uma ajuda??
Obs: Link do exemplo que peguei a tab http://www.dynamicdr...jaxtabscontent/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="../css/cadastro_cliente.css" /><link rel="stylesheet" type="text/css" href="../css/cd.css"/><link rel="stylesheet" type="text/css" href="../css/contato.css" /><link rel="stylesheet" type="text/css" href="../css/horario.css" /><link rel="stylesheet" type="text/css" href="../css/local.css"/><script type="text/javascript" src="../js/ajaxtabs.js"></script><title>Untitled Document</title><head></head><body><div id="cadastro_cli"> <ul id="cad_cliente" class="formatacao"> <li class="selecionado"><a href="local.php" rel="conteudo_cliente">Cadastro</a></li> </ul> <div id="conteudo_cliente"> <form id="form" name="form" method="post" action=""> <table width="941" border="0" cellpadding="0" cellspacing="0" id="cliente" name="cliente"> <tr> <td width="64" height="24"><label>Código</label></td> <td width="209"><input name="txf_codigo_cliente" type="text" id="txf_codigo_cliente" size="10" maxlength="5" /></td> <td width="49"><label>Pessoa</label></td> <td width="201"> <select name="lst_tipo_pessoa" id="lst_pessoa_cliente" onchange="form_tipo_pessoa();"> <option value="0" selected="selected">Física</option> <option value="1">Jurídica</option> </select> </td> <td width="56"><label>Bloqueio</label></td> <td width="203"> <select name="lst_bloqueio_cliente" id="lst_bloqueio_cliente" tabindex="20"> <option value="sim">Sim</option> <option value="nao" selected="selected">Não</option> </select> </td> <td width="71"><label>Categoria</label></td> <td width="88"> <select name="lst_categoria_cliente" id="lst_categoria_cliente" tabindex="16"> <option value="" selected="selected">Escolha</option> <option value="sim">Sim</option> <option value="nao">Não</option> </select> </td> </tr> <tr> <td colspan="6" rowspan="15"> <!--Tabela de pessoa fisica--> <table id="pf_cd_cliente" width="774" height="144" border="0" cellpadding="0" cellspacing="0"><tr> <td width="64" height="22"><label>Nome</label></td> <td width="209"> <input name="txf_nome_cliente" type="text" id="txf_nome_cliente" tabindex="1" size="32" maxlength="35" /> </td> <td width="48"><label>Sexo</label></td> <td width="202"> <select name="lst_sexo_cliente" id="lst_sexo_cliente" tabindex="2"> <option value="" selected="selected">Escolha</option> <option value="M">Masculino</option> <option value="F">Feminino</option> </select> </td> <td width="56"><label>Data nasc.</label></td> <td width="195"> <input id="txf_dt_nasc_cliente" tabindex="3" name="txf_dt_nasc_cliente" type="text" size="15" maxlength="10" /> </td> </tr> <tr> <td height="21"><label>CPF</label></td> <td><input name="txf_cpf_cliente" type="text" id="txf_cpf_cliente" tabindex="4" size="15" maxlength="14" /></td> <td><label>RG</label></td> <td><input name="txf_rg_cliente" type="text" id="txf_rg_cliente" tabindex="5" size="15" maxlength="9" /></td> <td><label>CRO</label></td> <td><input name="txf_cro_cliente" type="text" id="txf_cro_cliente" tabindex="6" size="15" maxlength="10" /></td> </tr> <tr> <td height="23"><label>Telefome</label></td> <td> <select name="lst_tipo_telefone1_cliente" id="lst_tipo_telefone1_cliente" tabindex="7"> <option value="0" selected="selected">Escolha</option> <option value="cel">Celular</option> <option value="com">Comercial</option> <option value="fax">Fax</option> <option value="res">Residencial</option> </select> <input name="txf_ddd1_cliente" tabindex="8" type="text" id="txf_ddd1_cliente" size="2" maxlength="2" /> <input tabindex="9" name="txf_telefone1_cliente" type="text" id="txf_telefone1_cliente" size="6" maxlength="8" /> </td> <td><label>Telefone</label></td> <td> <select name="lst_tipo_telefone2_cliente" id="lst_tipo_telefone2_cliente" tabindex="10"> <option selected="selected">Escolha</option> <option value="cel">Celular</option> <option value="com">Comercial</option> <option value="fax">Fax</option> <option value="res">Residencial</option> </select> <input name="txf_ddd2_cliente" tabindex="11" type="text" id="txf_ddd2_cliente" size="2" maxlength="2" /> <input name="txf_telefone2_cliente" tabindex="12" type="text" id="txf_telefone2_cliente" size="6" maxlength="8" /> </td> <td><label>Telefone</label></td> <td> <select name="lst_tipo_telefone3_cliente" id="lst_tipo_telefone3_cliente" tabindex="13"> <option selected="selected">Escolha</option> <option value="cel">Celular</option> <option value="com">Comercial</option> <option value="fax">Fax</option> <option value="res">Residencial</option> </select> <input name="txf_ddd3_cliente" type="text" tabindex="14" id="txf_ddd3_cliente" size="2" maxlength="2" /> <input name="txf_telefone3_cliente" type="text" id="txf_telefone3_cliente" tabindex="15" size="6" maxlength="8" /> </td> </tr> <tr> <td height="22"><label>Email</label></td> <td><input name="txf_email_cliente" type="text" id="txf_email_cliente" size="32" maxlength="40" /></td> <td><label>Site</label></td> <td><input name="txf_site_cliente" type="text" id="txf_site_cliente" size="32" maxlength="30" /></td> <td><label>Chat</label></td> <td><input name="txf_chat_cliente" type="text" id="txf_chat_cliente" size="32" maxlength="50" /></td> </tr> <tr> <td height="29"><label>Limite crêd.</label></td> <td><input id="txf_limite_credito_cliente" tabindex="21" name="txf_limite_credito_cliente" type="text" size="10" maxlength="10" /> </td> <td><label>Saldo</label></td> <td><input name="txf_saldo_cliente" type="text" id="txf_saldo_cliente" tabindex="22" size="10" maxlength="10" readonly="true"/> </td> <td> </td> <td> </td> </tr> <tr> <td height="19"><label>Obs.</label></td> <td colspan="5"><input name="txf_observacao_cliente" type="text" id="txf_observacao_cliente" size="135" maxlength="110" /></td> </tr> </table> <!--Tabela de pessoa juridica--> <table id="pf_cliente" width="774" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="64" height="22"><label>Razão soc.</label></td> <td width="209"><input name="txf_razao_social_cliente" type="text" id="txf_razao_social_cliente" tabindex="1" size="20" maxlength="35" /> </td> <td width="48"><label>CNPJ</label></td> <td width="202"><input name="txf_cnpj_cliente" type="text" id="txf_cnpj_cliente" tabindex="4" size="15" maxlength="14" /> </td> <td width="57"><label>Insc. Mun.</label></td> <td width="194"><input id="txf_insc_municipal_cliente" tabindex="3" name="txf_insc_municipal_cliente" type="text" size="15" maxlength="10" /> </td> </tr> <tr> <td height="23"><label>Insc. Est.</label></td> <td><input id="txf_insc_estadual_cliente" tabindex="3" name="txf_insc_estadual_cliente" type="text" size="15" maxlength="10" /> </td> <td><label>Site</label></td> <td><input name="txf_site_pj_cliente" type="text" id="txf_site_pj_cliente" tabindex="5" size="15" maxlength="9" /> </td> <td><label></label></td> <td> </td> </tr> <tr> <td colspan="6"><hr class="divisor_linha_horiz" /></td> </tr> <tr> <td height="23"><label>Limite créd.</label></td> <td><input id="txf_limite_credito_pj_cliente" tabindex="21" name="txf_limite_credito_pj_cliente" type="text" size="10" maxlength="10" /> </td> <td><label>Saldo</label></td> <td><input name="txf_saldo_pj_cliente" type="text" id="txf_saldo_pj_cliente" tabindex="22" size="10" maxlength="10" readonly="true"/> </td> <td> </td> <td> </td> </tr> <tr> <td height="22"><label>Obs.</label></td> <td colspan="5"><input name="txf_observacao_pj_cliente" type="text" id="txf_observacao_pj_cliente" size="118" maxlength="110" /> </td> </tr> <tr> <td> </td> <td colspan="5"> </td> </tr> <tr> <td> </td> <td colspan="5"> </td> </tr> </table> </td> <td height="25"><label>Grupo</label></td> <td> <select name="lst_grupo_cliente" id="lst_grupo_de_cliente" tabindex="17"> <option value="" selected="selected">Escolha</option> <option value="M">Masculino</option> <option value="F">Feminino</option> </select> </td> </tr> <tr> <td height="23"><label>Tipo cliente</label></td> <td> <select name="lst_tipo_cliente" id="lst_tipo_cliente" tabindex="19"> <option value="" selected="selected">Escolha</option> <option value="Sim">Sim</option> <option value="Não">Não</option> </select> </td> </tr> <tr> <td height="19"><label>Tipo fiscal</label></td> <td> <select name="lst_tipo_fiscal_cliente" id="lst_fiscal_cliente" tabindex="18"> <option value="" selected="selected">Escolha</option> <option value="Sim">Sim</option> <option value="Não">Não</option> </select> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="12"> </td> <td> </td> </tr> <tr> <td height="25"> </td> <td> </td> </tr> </table> </form> <div id="sub_cadastro"> <ul id="sub_cad" class="formatacao1"> <li class="selecionado1"><a href="php/local.php" rel="conteudo_subcadastro" subtabid="subtab1">Local</a></li> <li><a href="php/cd.php" rel="conteudo_subcadastro" subtabid="subtab">CD</a></li> <li><a href="php/contato.php" rel="conteudo_subcadastro" subtabid="subtab">Contato</a></li> <li><a href="php/horario.php" rel="conteudo_subcadastro" subtabid="subtab">Horario</a></li> </ul> <div id="conteudo_subcadastro"> </div> </div> </div> </div><script type="text/javascript">//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.startajaxtabs("sub_cad");</script></body></html>código javascript
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)var loadstatustext="<img src='../imagem/loading.gif' /> Aguarde o carregamento..."var enabletabpersistence=1 //enable tab persistence via session only cookies, so selected tab is remembered (1=yes, 0=no)?////NO NEED TO EDIT BELOW////////////////////////var loadedobjects=""var defaultcontentarray=new Object()var bustcacheparameter=""function ajaxpage(url, containerid, targetobj, subcontainerid){ var page_request = false if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc page_request = new XMLHttpRequest() else if (window.ActiveXObject){ // if IE try { page_request = new ActiveXObject("Msxml2.XMLHTTP") }catch <img src='http://forum.wmonline.com.br/public/style_emoticons/<#EMO_DIR#>/envelope.gif' class='bbc_emoticon' alt='(e)' />{ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") }catch <img src='http://forum.wmonline.com.br/public/style_emoticons/<#EMO_DIR#>/envelope.gif' class='bbc_emoticon' alt='(e)' />{} } }else return false var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li") for (var i=0; i<ullist.length; i++) ullist[i].className="" //deselect all tabs targetobj.parentNode.className="selected" //highlight currently clicked on tab if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax) document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]; return } document.getElementById(containerid).innerHTML=loadstatustext page_request.onreadystatechange=function(){ loadpage(page_request, containerid, subcontainerid)} if (bustcachevar) //if bust caching of external page bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', url+bustcacheparameter, true) page_request.send(null)}function loadpage(page_request, containerid, subcontainerid){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ document.getElementById(containerid).innerHTML=page_request.responseText if (document.getElementById(subcontainerid)!=null) startajaxtabs(subcontainerid)}}function loadobjs(revattribute){if (revattribute!=null && revattribute!=""){ //if "rev" attribute is defined (load external .js or .css files)var objectlist=revattribute.split(/\s*,\s*/) //split the files and store as arrayfor (var i=0; i<objectlist.length; i++){var file=objectlist[i]var fileref=""if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceedingif (file.indexOf(".js")!=-1){ //If object is a js filefileref=document.createElement('script')fileref.setAttribute("type","text/javascript");fileref.setAttribute("src", file);}else if (file.indexOf(".css")!=-1){ //If object is a css filefileref=document.createElement("link")fileref.setAttribute("rel", "stylesheet");fileref.setAttribute("type", "text/css");fileref.setAttribute("href", file);}}if (fileref!=""){document.getElementsByTagName("head").item(0).appendChild(fileref)loadedobjects+=file+" " //Remember this object as being already added to page}}}}function expandtab(tabcontentid, tabnumber){ //interface for selecting a tab (plus expand corresponding content)var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber]if (thetab.getAttribute("rel")){ajaxpage(thetab.getAttribute("href"), thetab.getAttribute("rel"), thetab)loadobjs(thetab.getAttribute("rev"))}}function savedefaultcontent(contentid){// save default ajax tab contentif (typeof defaultcontentarray[contentid]=="undefined") //if default content hasn't already been saveddefaultcontentarray[contentid]=document.getElementById(contentid).innerHTML}function startajaxtabs(){for (var i=0; i<arguments.length; i++){ //loop through passed UL idsvar ulobj=document.getElementById(arguments[i])var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within ULvar persisttabindex=(enabletabpersistence==1)? getCookie(arguments[i]) : "" //get index of persisted tab (if applicable)var isvalidpersist=(persisttabindex<ulist.length)? true : false //check if persisted tab index falls within range of defined tabsfor (var x=0; x<ulist.length; x++){ //loop through each LI elementvar ulistlink=ulist[x].getElementsByTagName("a")[0]ulistlink.index=xif (ulistlink.getAttribute("rel")){var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sakesavedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab contentulistlink.onclick=function(){ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this, ulistlink.getAttribute("subtab"))loadobjs(this.getAttribute("rev"))saveselectedtabindex(this.parentNode.parentNode.id, this.index)return false}if ((enabletabpersistence==1 && persisttabindex<ulist.length && x==persisttabindex) || (enabletabpersistence==1 && persisttabindex=="" && ulist[x].className=="selected") || (enabletabpersistence==0 && ulist[x].className=="selected")){ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink, ulistlink.getAttribute("subtab")) //auto load currently selected tab contentloadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files}}}}}////////////Persistence related functions//////////////////////////function saveselectedtabindex(ulid, index){ //remember currently selected tab (based on order relative to other tabs)if (enabletabpersistence==1) //if persistence feature turned onsetCookie(ulid, index)}function getCookie(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn ""}function setCookie(name, value){document.cookie = name+"="+value //cookie value is domain wide (path=/)}
