ginux
04 de Diciembre del 2009
|
Vista previa con jquery no funciona
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"> </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
--
|
