Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

DaRkShAfT

[Resolvido] JQuery + Ajax

Por , em Javascript

Recommended Posts

DaRkShAfT    0

DaRkShAfT
Postado

Oi galera, vou postar aqui um exemplo para ver se alguém me pode ajudar:

 

Página teste.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM Ready</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".link a").live('click', function(){
		var href = $(this).attr("href");
		
		$.get(href, function(data) {
			$("#mainFrame").empty().html(data);
		});
		
		return false; // very important!
	});
	
	$(".teste3 a").live('click', function(){
		var href = $(this).attr("href");
		$.get(href, function(data) {
			$("#mainFrame").empty().html(data);
		 });
		
		return false;
	});

});
</script>
</head>

<body>
	<div id="leftFrame">
    	<ul id="systemmenu">
        	<li class="link"><a href="teste_2.php">Link_1</a></li>
        </ul>
    </div>

	<div id="mainFrame"></div>
</body>
</html>

Declarei aqui 2 funcoes que vou utilizar em teste.php e teste_2.php, pretendo o seguinte: ao clicar em .link vou carregar o url correspondente(teste_2.php) em #mainFrame.

 

Tudo ok, agora teste_2.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ficheiro de Teste_2</title>
</head>

<body>
	Isto é um teste! <div class="teste3"><a href="teste_3.php">clique aqui.</a></div>
</body>
</html>

Ao clicar em .teste3 ele vai novamente carregar o url correspondente(teste_3.php) em #mainFrame.

 

Tudo ok, agora teste_3.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ficheiro de Teste 3</title>
<script type="text/javascript" src="jquery.tinymce.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	<!-- Load TinyMCE -->
	$('textarea.tinymce').tinymce({
		script_url : 'js/tiny_mce_js/tiny_mce.js',
		elements : "ajaxfilemanager",
		theme : "advanced",
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
		// Theme options
		theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,
		paste_use_dialog : false,
		theme_advanced_resizing : true,
		theme_advanced_resize_horizontal : true,
		apply_source_formatting : true,
		force_br_newlines : true,
		force_p_newlines : false,	
		relative_urls : true
	});
	<!-- /TinyMCE -->
});
</script>
</head>

<body>
Teste!!!<br/>
<textarea name="text" rows="5" cols="100" class="tinymce"></textarea>
</body>
</html>

Agora pretendia transformar a textarea no editor tinymce, eu consigo com este código no Firefox e no Ie8, mas eu não estou conseguindo no Google chrome, nem no Safari... http://forum.imasters.com.br/public/style_emoticons/default/natal_mad.gif

 

Alguém sabe como ultrapassar isto? Alguém faz alguma idéia do que se está passando?

 

Eu penso que no Google chrome e no Safari o DOM não fica disponível mesmo utilizando a funcao .live(); Que treta!

 

Estou mesmo precisando de ajuda... se alguém souber, agradecia!

 

Valeu[]

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não traga Javascript por AJAX, isso realmente não funciona. Existem meios de forçar o navegador a ler, mas eu nunca consegui usar nenhum

http://forum.imasters.com.br/index.php?/topic/264642-executar-funcoes-js-em-paginas-carregadas-com-ajax/

 

Deixe todos os scripts que você for precisar já na página que está carregada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

DaRkShAfT    0

DaRkShAfT
Postado

não traga Javascript por AJAX, isso realmente não funciona. Existem meios de forçar o navegador a ler, mas eu nunca consegui usar nenhum

http://forum.imasters.com.br/index.php?/topic/264642-executar-funcoes-js-em-paginas-carregadas-com-ajax/

 

Deixe todos os scripts que você for precisar já na página que está carregada.

 

Bingo!! Resolvi a questão de outra maneira... http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif

 

Então quer dizer que você não me aconselha a desenvolver uma aplicação toda rodando em Ajax?

 

Eu se deixar todos os scripts que vou precisar na página carregada, não vou conseguir fazer com que o $('textarea.tinymce').tinymce() rode a função tinymce(), pelo menos pelo que eu testei...

 

Então resolvi fazer o seguinte:

 

$.getScript("...../tiny_mce_js/.."), function(script){

$("head").append(script);

});

 

$.getScript("...../js/jquery.tinymce.js"), function(script){

$("head").append(script);

});

 

E aí ele funciona em Firefox, Ie, Chrome, Safari(últimas versões).. Só no Firefox é que estou tendo um problema, ele por vezes não carrega, e já recebi o erro na consola que a função tinymce() não existe!

 

Agora eu vou tentar encontrar novamente uma função jquery que permitia eu declarar num array logo todos os ficheiros que queria carregar... podia ser css e script js http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

 

Ver se eu encontro e ver se realmente funciona...

 

Se alguém poder ajudar, seja bemvindo!

 

[]

Compartilhar este post

Link para o post
Compartilhar em outros sites

DaRkShAfT    0

DaRkShAfT
Postado

Uma outra questão, eu vou ter que chamar sempre $.getScript("...../js/jquery.tinymce.js"); sempre que clico num link...

 

Se eu colocar if(typeof tinymce === undefined){ $.getScript("...../js/jquery.tinymce.js"); } ele no segundo click ja encontra a funcao tinymce, mas depois nao despara a mesma!

 

Estou certo ou existe outra maneira de fazer?

 

Valeu[]

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito