abrir pagina.php no centro

_Marcos_Duarte_ · Janeiro 26, 2010

Caro Colegas estou com um probleminha a quase 1 mês, e gostaria muito de que me ajudassem. O problem é que tenho um script jquery que monta um layout com com duas colunas e duas linhas, até ai tudo bem, depois tenho um menu accordion que funciona perfeitamente, porém qdo. clico no link tabelas->bairros e mando abrir no centro ele abre uma nova página. script logo abaixo:

layout.html

<!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>
		<title>Resizing Border Layout example</title>
		<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1" />

		<link type="text/css" href="media/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="media/js/jquery.min.js"></script>
        <script type="text/javascript" src="media/js/ddaccordion.js"></script>
		<script type="text/javascript" src="media/js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="media/js/jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="media/js/jquery.metadata.js"></script>
		<script type="text/javascript" src="media/js/jquery.sizes.js"></script>
		<script type="text/javascript" src="media/js/jlayout.border.js"></script>
		<script type="text/javascript" src="media/js/jquery.jlayout.js"></script>
        <script type="text/javascript">
        ddaccordion.init({
	       headerclass: "submenuheader", //Shared CSS class name of headers group
	       contentclass: "submenu", //Shared CSS class name of contents group
	       revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	       mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	       collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
	       defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
	       onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	       animatedefault: false, //Should contents open by default be animated into view?
	       persiststate: true, //persist state of opened contents within browser session?
	       toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	       togglehtml: ["suffix", "<img src='media/images/plus.gif' class='statusicon' />","<img src='media/images/minus.gif' class='statusicon' />"],
				 //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"]
				 //(see docs)
	       animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	       oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		   //do nothing
	    },
	      onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		  //do nothing
	    }
        })
        </script>
		<script type="text/javascript">
			jQuery(function($)
			{
				var container = $('.layout');

				function relayout() {
					container.layout({resize: false});
				}
				relayout();

				$(window).resize(relayout);

				$('.north').resizable({
					handles: 's',
					stop: relayout
				});

				$('.south').resizable({
					handles: 'n',
					stop: relayout
				});

				$('.east').resizable({
					handles: 'w',
					stop: relayout
				});

				$('.west').resizable({
					handles: 'e',
					stop: relayout
				});
			});
		</script>
		<style>
			html, body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				overflow: hidden;
			}

			.layout {
				height: 100%;
			}

			.center, .east, .west, .north, .south {
				background-color: rgb(220,220,220);
				border: 1px solid rgb(200,200,200);
				text-align: center;
                display: inline-block;
			}

			.west, .east {
				width: 20%;
			}

			.north {
				height: 10%;
			}
			.south{
				height: 5%;
			}

        $(document).ready(function(){
           $('a').click( function(){
             var href = $(this).attr('href');// pega o valor do atributo href da âncora clicada
             $('#center').load(href);
             return false;
           });
        });

			
		</style>

		<style type="text/css">
            @import url(media/css/principal.css);
            @import "media/css/demo_page.css";
			@import "media/css/demo_table_jui.css";
			@import "examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";
        </style>


	</head>
	<body>
		<div class="layout {layout: {type: 'border', hgap: 3, vgap: 3}}">
			<div id="center" class="center">
				Center
			</div>
			<!--
			<div class="east">
				East
			</div>
            -->
			<div class="west">
				West

                 <div class="glossymenu">
                      <a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >Tabelas</a>
                         <div class="submenu">
	                          <ul>
	                          <li><a href="grid_bairro.php"">Bairros</a></li>
	                          <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Tipo de Documentos</a></li>
	                          <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Opcao 3</a></li>
	                          <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Opcao 4</a></li>
	                          <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Opcao 5</a></li>
	                          <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Opcao 6</a></li>
	                          <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Opcao 7</a></li>
	                          <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Opcao 8</a></li>
	                          </ul>
                         </div>
                      <a class="menuitem" href="http://www.dynamicdrive.com/">Requerimento</a>
                      <a class="menuitem" href="http://www.javascriptkit.com/jsref/">Relatórios</a>
                      <a class="menuitem" href="http://www.javascriptkit.com/domref/">DOM Reference</a>
                      <a class="menuitem submenuheader" href="http://www.cssdrive.com">CSS Drive</a>
                      <div class="submenu">
	                       <ul>
	                       <li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
	                       <li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
	                       <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
	                       <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
	                       <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
	                       <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
	                       </ul>
	                       <img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" />
                      </div>
                      <a class="menuitem" href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a>
                 </div>

				
			</div>
			<div class="north">
				North
			</div>
			<div class="south">
				South
			</div>
		</div>

	</body>
</html>

grid_bairro.php

	<?
      header("Content-Type: text/html; charset=ISO-8859-1");
      $host = 'c:/sistemas/www/alvara/dados/alvara.gdb';
      $username = 'sysdba';
      $password = 'masterkey';
      $dbh = ibase_connect($host, $username, $password);
      
	?>

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<!--<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico" />-->
		
		<title>DataTables example</title>
		<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table_jui.css";
			@import "examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";
		.style1 {font-size: 80%}
        </style>
		<script type="text/javascript" >
			$(document).ready(function() {
				oTable = $('#example').dataTable({
					"bJQueryUI": true,
					"sPaginationType": "full_numbers",
					"aoColumns": [
						{ bSortable: false },
						{ bSortable: false },
						null,
						{ bSortable: true },
						null
						
					]
				});
			} );
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				<i>Bairros</i> / Cadastro de Bairros
			</div>
			<div class="demo_jui">
                 <form action="" method="post" name="gridbairros" class="demo_jui" id="gridbairros">
                 <table border="0" align="center" cellpadding="0" cellspacing="0" class="display" id="example">
	                <thead>
		               <tr>
			           <th width="5" ><div align="center" class="style1">EDITAR</div></th>
			           <th width="5" ><div align="center">EXCLUIR</div></th>
			           <th width="5%">CODIGO</th>
			           <th width="75%">BAIRRO</th>
			           <th width="15%">ADL</th>
		               </tr>
	                </thead>
	                <tbody>
		   
	                  <?


                      header("Content-Type: text/html; charset=ISO-8859-1");
                      // consulta SQL e retornando os resultados em uma tabela HTML
                      ini_set('memory_limit',"1390M");
                      $stmt = 'SELECT * FROM ALV_BAIRRO';
                      $sth = ibase_query($dbh, $stmt);
      
	                  while ($row = ibase_fetch_object($sth)) {  ?>

                        <tr class="gradeX">
                        <td width="15" height="15" align="center" valign="top"><a href="cadastro_bairro.php?alvbair_cod=<?=$row->ALVBAIR_COD; ?>"><img src="media/images/editar3.png" id="imagem" width="16" height="16" border="0" align="top"></a>
                        <td width="15" height="15" align="center" valign="top"><a href=""> <img src="media/images/excluir.png" width="13" height="15" border="0"></a>
                        <td><?= $row->ALVBAIR_COD; ?></td>
                        <td><?= $row->ALVBAIR_NOME;   ?></td>
                        <td><?= $row->ALVBAIR_ADL;    ?></td>
                        </tr>


                      <?}?>

                      <?

                      ibase_free_result($sth);
                      ibase_close($dbh);
                      ?>
	                </tbody>
                 </table>
                 </form>
			</div>
			<div class="spacer"></div>
			
			<div id="footer" style="text-align:center;">
				<span style="font-size:10px;">
				
					InformaÃ§Ãµes mande um email para © <a href="#">duarteol2000@yahoo.com.br</a> </span>
			</div>
		</div>
	</body>
</html>

relmente não sei o que acontece, lembrando que sou principiante estou estudando para tentar fazer um sisteminha, obrigado desde já a todos que puderem me dar uma forcinha.

Marcos Duarte :rolleyes:

William Bruno · Janeiro 26, 2010

Não rodei o teu script, até pq tem diversos plugins.. esse trecho:

$(document).ready(function(){
           $('a').click( function(){
             var href = $(this).attr('href');// pega o valor do atributo href da âncora clicada
             $('#center').load(href);
             return false;
           });
        });

deveria ficar dentro de tags <script> e não dentro de um <style> ne?!

_Marcos_Duarte_ · Janeiro 26, 2010

puxa amigão que vacilo, obrigado pela observação.

Eu coloquei no lugar certo mas ele tira a formatação do grid e mostra todos os registos

estrapolando os limites das divs. poderia tentar me ajudar?

obrigado!!!

William Bruno · Janeiro 26, 2010

Posta um link para o site, ou tenta 'isolar' o problema, removendo tudo oque não for interferir nele.. pois o código atual, é dificil que eu consiga rodar por aqui...

tem banco de dados e tudo mais..

_Marcos_Duarte_ · Janeiro 27, 2010

amigão estou suspeitando que alguma biblioteca das divs está anulando a biblioteca do grid, o que você. acha?

William Bruno · Janeiro 27, 2010

Na verdade:

$('#center').load(href);

por sí só, já anula qualquer Javascript que você tente usar.

Carregar páginas por AJAX, atrapalha e muito a execução de scripts.

Algumas coisas que podem te ajudar:

-> Não traga <script>s na página que tá vindo por AJAX (deixe tudo num arquivo externo, e chame na página que já está carregada)

-> Se precisar atrelar eventos dinamicamente, use o método: live() do jQuery

-> Não chame várias vezes, e nem tenha vários arquivos da mesma biblioteca:

src="media/js/jquery.js">
media/js/jquery-1.3.2.js">

Qnto à parte php do teu código, prefira sempre usar a tag completa:

<?php

em vez de <?

coloque esse tipo de configuração:

$host = 'c:/sistemas/www/alvara/dados/alvara.gdb';
      $username = 'sysdba';
      $password = 'masterkey';
      $dbh = ibase_connect($host, $username, $password);

num arquivo externo, e o chame com include

Se você vai chamar 'uma página dentro da outra', a página interna, não deve conter os cabeçalhos:

<html>
        <head>

pois no HTML final, não pode haver duplicação de tags:

<html>, <head>, <body>

Geralmente:

<div class="submenu">
                                  <ul>

isso é completamente desnecessário, já que UL é um elemento nivel de bloco muito bom, então:

<ul class="submenu">

salvos casos muitos específicos, e em que você tem total controle sobre oque está fazendo, já é mais do que o suficiente.

Saídas header não podem aparecer após qualquer tipo de output

<?


                      header("Content-Type: text/html; charset=ISO-8859-1");
                      // consulta SQL e retornando os resultados em uma tabela HTML

pois isso gera erros.

Agora, sinceramente.. dei algumas 'dicas' para melhorar o teu código, mas pode ser que ainda não resolva o problema de 'carregar o GRID' sendo que ele vem numa página que tá vindo por AJAX.

_Marcos_Duarte_ · Janeiro 28, 2010

caraca você. não deu dicas você. deu uma grande aula obrigado, como estou aprendendo agora, vou tentar melhorar o código conforme você. me mostrou e qualquer coisa eu posto novamente, muitíssimo obrigado!!!

Entrar

Arquivado

abrir pagina.php no centro

Recommended Posts

_Marcos_Duarte_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

_Marcos_Duarte_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

_Marcos_Duarte_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

_Marcos_Duarte_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante