Ejecutar codigo javascript desde php

[lazurda17]

Hola!!

Bueno espero poder explicar bien mi problema.

Me estoy iniciando en el desarrollo de paginas web, y para empezar estoy haciendo una pagina de prueba donde tengo los siguietens archivos en mi proyecto:

1 - index.html ---> que tiene un menu de opciones una cabecera de pagina y un pie de pagina.

2- Un miJavascript.js --> donde tengo una funcion ajax que es la siguiente:

function recargar(str)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("cuadroDeContenido").inner HTML=xmlhttp.responseText;

}
}
xmlhttp.open("POST",str+".php",true);
xmlhttp.send();
}

Aclaracion: en mi html tengo un div "cuadroDeContenido" donde recargo con ajax la pagina cuando se hace un click sobre alguna opcion del menu de la pagina html. STR, es el nombre del php que se ejecuta tiene que ejecutar segun la opcion donde se hizo click, es decir que tengo un archivo php por cada opcion del menu.

Aca viene mi problema: en le menu de opciones tengo un opcion que es Contacto, cuando se hace un click sobre la opcion contacto se ejecuta lo siguiente:

en el html:

<li><a href="#"onclick="javascript:recargar('contacto');" >Contacto</a></li>

Recargar es la funcion javascript que escribe anterirmente.

y por ultimo contacto.php que tiene lo siguiente -->

<?php
echo "
<form id='formContacto' action='enviarMail.php' method='post'>
<fieldset>
<legend> Enviar un Mail: </legend>
Nombre :<input type='text' name='nombre' size='40' value='Su Nombre' /><br>
Apllido:<input type='text' name='apellido' size='40' value='Su Apellido' /><br>
E-mail :<input type='text' name='email' size='40' value='Su email' /><br>
Mensaje:<br><textarea rows='10' cols='37' name='mensaje'>Escriba su mensaje para contactanos. Le responderemos a la brevedad.</textarea> <br>
<input type='submit' value='Enviar'>
<input type='reset' value='Limpiar'>
</fieldset>
</form>";
?>

Como veran cuando se envia el formulario tendria que porcesar los datos y enviarlos a un mail por ejemplo: miMail, esto lo hago en enviarMail.php que tiene los siguiente:

<?php
$to = "[email protected]";
$subject = "Asunto: " . $_POST["nombre"] . "; " . $_POST["apellido"] . "; " . $_POST["email"];
$message = $_POST["mensaje"];
$from = $_POST["email"];
$headers = "From:" . $_POST["email"];
mail($to,$subject,$message,$headers);
echo "<scritp>recargar('envioCorrecto');</script>";
?>

Bueno esto hace que el mail llegue pero vacio, no me ejecuta la fucnion recargar(), y cuando reemplazo lo que esta en el echo "<scritp>recargar('envioCorrecto');</script>"; por echo "Envio correcto" funciona perfectamente pero el tema es que eso me redirecciona a una pagina nueva y mi intencion es que recargue la pagina con el menu, cabecera y pie de pagina en mi cuadro de contenido.

Nose si alguien va a leer todo esto, espero que me puedan dar una ayudita, por lo menos lo intente. saludos!

[jerkan]

Si lo que quieres es recargar la página al recibir un 'ok' de un proceso AJAX (en este caso, enviar un mail) deberías hacer un echo, como ya estás haciendo, en el fichero PHP y mirar su contenido en la función de retorno (callback) del método que inició la llamada AJAX.

Yo te recomiendo que le eches un vistazo a la librería jQuery que te facilitará mucho la vida a lo que AJAX se refiere.

Un saludo

[perryjr]

Que insertes un javascript, no significa que se ejecute, y es posible que incluso lo este bloqueando el navegador (Internet Explorer lo hace) y tampoco se esté ejecutando. ¿Porqué no llamas directamente a la función? Es decir, cuando la llamada AJAX termine, y ya tengas el contenido, llamas a la funcion recargar directamente:

Código Javascript:

document.getElementById("cuadroDeContenido").inner HTML=xmlhttp.responseText;
recargar(...);
 

y el código PHP no tiene que hacer ningun echo "<script>...</script>" ni nada asi

[lazurda17]

Bueno, perdon por la demora, recien retomo con la programacion de mi pagina web. Muchas graicas por responder.

La verdad estuve viendo como usar jquery y me funciona por ejemplo puede lograr este codigo


(document).ready(function(){
$.ajax({url:"inicio.php",success:function(result){
$("#cuadroDeContenido").html(result);
}}); // fin ajax inicio
$("#inicio").click(function(){
$.ajax({url:"inicio.php",success:function(result){
$("#cuadroDeContenido").html(result);
}});
}); //fin click inicio
$("#contacto").click(function(){
$.ajax({url:"contacto.php",success:function(result ){
$("#cuadroDeContenido").html(result);
}});
}); //fin click contacto
$().ajaxStart(function() {
$('#loading').show();
$('#cuadroDeContenido').hide();
}); // fin ajaxStart
$().ajaxStop(function() {
$('#loading').hide();
$('#cuadroDeContenido').fadeIn('slow');
}); //fin ajaxStop

Esto funciona perfectamente pero cuanod agrego el submit de mi formulario no anda mi codigo jquery para mi form es el siguiente



$('#myform').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);

}
});

return false;
}); // fin submit

este es el pedacito de html que interactua con el submit
<a href="#" id="contacto">Contacto</a>
<div id="loading"></div>
<div id="cuadroDeContenido">
<div id="result"></div>
</div>


Este codigo lo tome de un ejemplo navegando por la web, el ejemplo lo probe y funciona perfectamente.

Puede ser que tenga algo que ver que mi formulario lo armo mediante una llama a un php, yo tengo un conctacto.php que hace lo siguiente:

?php
echo "
<form method='post' action='envio.php' id='myform' name='myform' >
//esta linea seria las mas importante el resto solo arma un formulario
<fieldset id='form'>

<legend> Enviar un Mail: </legend>

Nombre :<input type='text' name='nombre' size='40' value='Su Nombre' /><br>

Apllido:<input type='text' name='apellido' size='40' value='Su Apellido' /><br>

E-mail :<input type='text' name='email' size='40' value='Su email' /><br>

Mensaje:<br><textarea rows='10' cols='37' name='mensaje'>Escriba su mensaje. Le responderemos a la brevedad.</textarea> <br>

<input type='submit' name='mysubmit' value='Enviar' />

<input type='reset' value='Limpiar' />

</fieldset>

</form>";
?>

basicamente me dibuja el formulario.

Luego el evento submit tendria que captarlo mi javascript pero no lo hace, me redirecciona a otra pagina donde solo dice gracias por su comentario. A diferencia del ejemplo que yo tengo el formulario es estatico en el html.

Aqui dejo mi "envio.php" que se ejecuta cuando presion enviar en el formulario

<?php
$mensaje="";
$mensaje.="Contact from:". "\n\n";
$mensaje.="Name: ".$_POST['nombre']."\n";
$mensaje.="E-mail: ".$_POST['email']."\n";
$mensaje.="Comments: ".$_POST['mensaje']."\n";

$email_destino="[email protected]";
$subject= "Pagina Web: " . $_POST["nombre"] . "; " . $_POST["apellido"] . "; " . $_POST["email"];

if (mail($email_destiny,$subject,$mensaje,"From: Contact<".$_POST['email'].">")) {
echo '<p align="center"><b>Gracias por el comentario</b></p>';
} else {
echo '<p align="center">Ocurrio un error vuelva a intenrarlo</p>';
}


Espero me puedan ayudar. Desde ya muchas gracias. Saludos

[perryjr]

1. Si el código PHP funciona bien, no mezcles las dos cosas: servidor y cliente. No se que navegador usas, pero lo que tienes que hacer es simplemente "Ver Código Fuente", y ahi puedes ver no ya el php que hace echo el html todo mezclado, sino lo que finalmente resulta; te pude ayudar. Tienes que ver el código fuente HTML resultante, el que de verdad tu navegador puede ver. EJ: view-source:http://google.com/.

2. Usa Highlight para pegar código aqui en el foro, por favor!!

3. Coloca alerts, y asi ve las evolucion de lo que se llama, no se llama, etc. Prueba este código, y mira las alertas que vayan saliendo, y lo que pongan, y lee mis comentarios a ver que tal te va ahora.

Código Javascript:

// cantidad de elementos con el id "myform" que ha encontrado
// si es cero, es evidente que el código que viene ahora no va a funcionar
// en absoluto porque no hay formulario, o no lo ha encontrado bien
alert($('#myform').length);
 
$('#myform').submit(function() {
  alert('captado evento. procedemos a llamada ajax');
 
  // esto será lo que se envie al servidor
  alert($(this).serialize());
 
  $.ajax({
    type: 'POST',
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(data) {
      alert('la llamada ajax termino');
      $('#result').html(data);
    }
  });
 
  alert('llamada ajax hecha. peticion realizandose en segundo plano.');
 
  return false;
}); // fin submit
 

[lazurda17]

Muchas gracias por responder! me fue de mucha ayuda tu respuesta, efectivamente, cuando miro el codigo fuente le formulario no esta!

Podria crearlo mediante javascript?? o es mejor que lo deje estatico, y lo oculto y muestro cuando sea necesario?

Saludos!

[perryjr]

1. Puedes revisar el código PHP y buscar donde te has equivocado, y corregirlo.

2. Puedes intercalar código PHP y HTML:

Código PHP:

<?php echo 'hola'; ?>
<a href="otrapagina.html">enlace en el medio</a>
<?php
echo "
varias
lineas
";
?>
 

3. Puedes ponerlo en la página oculto con style="display: none;" y luego si estas usando jQuery:

Código Javascript:

$('#myform').show();
 

4. Puedes crearlo mediante Javascript... aunque no te lo recomiendo si no lo necesitas explicitamente porque es mas dificil.

... y muchas opciones más. Todo depende de lo que necesites, y con que opción te sientas mejor.

[lazurda17]

Bien, muchas gracias nuevamente perryjr, tus respuestas fueron de mucha auyda . Voy a poner manos a la obra para resolver este problema y cualquier cosa andare de nuevo por aqui

Saludos!