inserir página dinamicamente pt.2

MarcelinhoB · 18 de outubro de 2013

Utilizando do assunto abordado no topico: forum.clubedohardware.com.br/inserir-pagina-dinamicamente/1156480

usando ajax e php... consegui solucionar em parte aquele problema, criei quase que uma nova função .load() do jquery, isso porque o load fazia eu perder algumas funcionalidades da minha página php que eu NÃO posso perder... o que fiz? criei 2 novos arquivos.

Menu.js:


$(function() {

	$("#11").click(function() {
		$("#valMenu").val("11");
		enviar();
	});
	$("#12").click(function() {
		$("#valMenu").val("12");
		enviar();
	});
	$("#13111").click(function() {
		$("#valMenu").val("13111");
		enviar();
	});

	function enviar() {
		var dados = {
			"valMenu" : $("#valMenu").val()
		};
		alert(dados.valMenu);
		$.ajax({
			type : "post",
			url : "php/menu.php",
			data : dados,
			success : function(data) {
				$("#principal").html(data);
			}
		});
	}

});

e menu.php


<?php
$opcao = $_POST['valMenu'];
switch ($opcao) {
	case 11:
		require_once '..\item1.php';
		break;
	case 12:
		require_once '..\item2.php';
		break;
	case 13111:
		require_once '..\item3.php';
		break;
}
?>

Dai perfeito, consigo puxar a página com as mesmas funcionalidades!! e um pouco mais leve do que usando o .load() do Jquery

Meu problema agora ta sendo quando clico duas vezes no mesmo link, da primeira vez ela é carregada de boa...., a partir da segunda vez ele tambem carrega a página direitinho, so que perde algumas funcionalidades.... como o .dialog() que eu uso na minha página item2 por exemplo.

Quando clico no botão pra exibir o dialog() aparece isso: Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

Isso tambem ocoria quando eu usava o .load(), so que era ainda pior :$

Gostaria de uma sugestão....

MAGEDDO · 21 de outubro de 2013

acho que comecei a entendeir o que voce quer amigo,

acontece que seu codigo funcioona mas quando voce fazendo o ajax o html é modificado e o javascript não reconhece mais seu codigo certo?

bom seria interessante se voce postasse o seu html mas vamos tentar fazer alguma coisa

seria alguma coisa do tipo


$(function() {

	$("body").delegate("#11", "click", function() {
		$("#valMenu").val("11");
		enviar();
	});
	$("body").delegate("#12", "click", function() {
		$("#valMenu").val("12");
		enviar();
	});
	$("body").delegate("#13111", "click", function() {
		$("#valMenu").val("13111");
		enviar();
	});

	function enviar() {
		var dados = {
			"valMenu" : $("#valMenu").val()
		};
		alert(dados.valMenu);
		$.ajax({
			type : "post",
			url : "php/menu.php",
			data : dados,
			success : function(data) {
				$("#principal").html(data);
			}
		});
	}

});

MarcelinhoB · 21 de outubro de 2013

bom seria interessante se voce postasse o seu html mas vamos tentar fazer alguma coisa

index.php:


<!doctype html>
<html lang="pt">
<head>
	<link rel="stylesheet" href="css/jmenu.css" type="text/css" />
	<script src="jq/jquery-1.8.3.js"></script>
<!-- Biblioteca do menu -->	
	<script src="scr/jsdomenu.js"></script>
	<script src="scr/menu.js"></script>
	<style>
		div#menu { position:fixed!important; top:0px; width :100%; height: 40px; left: 0; border: 1px solid #eee; padding: .6em 10px; text-align: left; }
	</style>
</head>
<body>
<form id="form" name="form">

<div id="menu" class="ui-widget">
		<ul id="jMenu">
			<li><a>Home</a>
				<ul>
					<li><a id="11">Página 1</a></li>
					<li><a id="12">Página 2</a></li>
					<li><a>Submenu</a>
						<ul>
							<li><a>Submenu 2</a>
								<ul>
									<li><a>Submenu 3</a>
										<ul>
											<li><a id="13111">Página 1</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
</div>

<input type="hidden" id="valMenu">
</form>
<div id="principal"></div>

</body>
</html>

Bom, em geral, ainda nem testei seu código, mas acho que não vai funcionar porque ai ele vai modificar o "body" que tem o conteúdo do meu menu, vou fazer o teste mesmo assim ^^

vou reexplicar o problema rs, quando eu chamo a página a primeira vez, ele executa as funções java script, mas se eu chamar a página novamente, ele para de executar.

------------------------------------------EDITADO-------------------------------------

Eu testei seu código velho, e deu na msma rs, na primeira vez que carego o item1 por exemplo, o javascript funciona, na segunda vez que carrego já não funciona mais.

A intenção é que ele "re-escrevesse" o conteúdo que ta na div, apagasse o conteúdo e escrevesse novamente, ou algo do tipo

MAGEDDO · 21 de outubro de 2013

agora sim, vamos la...

as funcionalidades que você disse que tá perdendo são do HTML que vem do ajax e entra no na div #principal?

MarcelinhoB · 21 de outubro de 2013

não, são funcionalidades de jquery ou javascript que tão na minha página adjacente, tipo o .datapicker() <- Jquery, .dialog() <- Jquery, testeIdade() <- JavaScript, etc...

MAGEDDO · 21 de outubro de 2013

Ok, então no caso essas funcionalidades devem estar dentro do jsdomenu.js, considerando isso é o seguinte, quando você carrega com o ajax então o navegador cria novos elementos que o jquery até então ainda não conhecia pra o jQuery ficar sempre "sabendo" dos elementos que estão vindo do ajax você deve fazer o seguinte:

no seu arquivo jsdomenu.js você deve trocar todos os lugares onde voce está chamando os eventos pela funcionalidade delegate é ela que resolve isso.

um exemplo

o original:

$("input").datepicker();

o novo:

$("body").delegate("input", "focusin", function(){
    $(this).datepicker();
});

e a mesma coisa com o dialog e etc.

olha um codigo de exemplo

https://docs.google.com/file/d/0BwBEh4QJvkXjT3M0dEd4RFJHREU/edit?usp=sharing

-----------------EDITADO-------------------

o codigo acima só funciona em um servidor

para tentar localmente usa esse

https://docs.google.com/file/d/0BwBEh4QJvkXjV0J4VmRUOVBtYWs/edit?usp=sharing

se quiser posta seu codigo

Entrar

inserir página dinamicamente pt.2

Posts recomendados

MarcelinhoB

MAGEDDO

MarcelinhoB

MAGEDDO

MarcelinhoB

MAGEDDO

Arquivado

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos