Vista previa con jquery no funciona

ginuxC · #1 (**permalink**) 03/12/2009, 16:55

Tengo un text area (html) decorado con el CKEditor y al querer hacer una vista previa con JQuery no envia el valor del textarea.

Si elimino el editor CKeditor que decora el text area, la vista previa funciona de maravilla; por lo que no se llevan bien las 2 tecnologias......

seria genial que me ayuden, tanto a resolver este problema o buscar una nueva solución....

Formulario:

Código HTML:

<html>
<head>
<!-- carga de archivos -->
<link rel="stylesheet" type="text/css" href="css/editor.css" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>


<!-- Función AJAx que envia el valor del campo cuerpo para producir la vista previa-->
	<script id="headscript" type="text/javascript">
    function preview_ajax() {
        data_ = {cuerpo:$('textarea').val()} //"cuerpo="+ $('#id_cuerpo').val();
        $.ajax({
            type: "POST",
            url: "/preview",
            data: data_,
            
            beforeSend: function(objeto){
                $('#preview').hide();
                location.href="#begin";
            },                
            
            success: function(datos) {         
                  $('#body_preview').html( "" + datos + "<br />");
                  $('#preview').show('1000');
             }
        });        
    } // end FUNCTION    
	</script>
</head>
<body>

<!-- Aca se visualiza la vista previa-->
<div id="main_container">
    <div class="entry" id="preview"  style="display:none;">  
        <a name="begin"></a>
        <div class="side">&nbsp;</div>
        <div class="body" id="body_preview"></div>

    </div>

<!-- Formulario HTML -->

<FORM action="editor/nuevo" method="post">
<textarea  name="cuerpo" id="id_cuerpo" ></textarea>
        <input type="submit" onclick="submit" value="enviar" />
        <input type="button" onclick="preview_ajax()" value="Vista Previa" />
</form>

<!-- Configuración del editor CKEditor -->
<script type="text/javascript">
		//<![CDATA[
			var editor = CKEDITOR.replace( 'cuerpo',{
					toolbar : [ ['Source','-','Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink'],
    ['Image','Flash','HorizontalRule','Smiley','SpecialChar'],
    '/',
    ['Font','FontSize'],
    ['TextColor'],
    ['Maximize', 'ShowBlocks','-','About']
 ]
				});
		//]]>
		</script>
<!-- Fin configuración del editor CKEditor -->		
</div>		
</body>
</html>

Archivo PHP que procesa la vista previa "editor/preview/"

Código PHP:

              echo '<h2>Vista Previa</h2><br/>';
            echo '<pre>';
            print_r($_POST);
            echo '</pre>';

screen shoot del la vista previa funcionando (sin el decorado del editor)
sitiotemporal.com.ar/previa/previa_anda.JPG

--

screen shoot del la vista previa sin funcionar (con el decorado del editor)
sitiotemporal.com.ar/previa/previa_no_anda.JPG

--

Ejemplo del formulario sin funcionamiento
sitiotemporal.com.ar/previa/noformulario.php

--

Ejemplo del formulario funcionando
sitiotemporal.com.ar/previa/formulario.php

--

Codigo completo para descargar
sitiotemporal.com.ar/previa/formulario.rar

--

ginuxC · #2 (**permalink**) 04/12/2009, 00:49

Problema solucionado Aqui!!!

php-hispano.net/foros/Ajax/38946-vista-previa-con-jquery-no-funciona

--