Enviar datos de formulario con JavaScript, Ajax, jQuery data type url success

[Lorenzo31]

Buenas tardes, a ver si alguien puede ayudarme con esto porque debe ser sencillo (dominando bien JavaScript)

Tengo el siguiente formulario

Código: [Seleccionar]

<form id="form_new_inc" role="form" onsubmit="incidenciaNueva(); return false">
<div class="form-group">
<label name="tipoInc">  Selecciona el tipo de incidencia: &nbsp;</label>

<select name="tipoInc" class="form-control"/>
<optgroup>
<option value="1">Comunidad</option>

<option value="2">Herramienta/Sistema</option>


</optgroup>
</select>
<br/>

<label name="titleInc">Asunto: </label> <input type="text" name="titleInc" id="tituloInc" class="form-control"/> <br/>
<label name="descInc">Mensaje: </label> <textarea type="text" name="descInc" id="descInc" class="form-control"></textarea> <br/>

</div>
</div>
<div class="modal-footer">


<button id="subInc" class="btn btn-default" style= "background-color:#6fb3e0 !important; border-color:#6fb3e0;" >Enviar</button>
</form>

Y el siguiente código JavaScript que llama a php para un insert

Código: [Seleccionar]

function incidenciaNueva(){
$("#subInc").click( function(e) {
e.preventDefault();
$.ajax({
data: $("#form_new_inc").serialize(),
type: "POST",
url: "insertar_incidencia.php",
success: function(data){
$('#modal_nueva_incidencia').modal('hide');
$('#modalSuccessInc').modal('show');
}
});
//alert("Your data has been saved!");
   clearInputModificar();
});
}

$("#form_new_inc").submit( function() {
  return false;
});
function clearInputModificar() {
    $("#form_new_inc :input").each( function() {
       $(this).val('');
    });
}


Funciona correctamente, el problema es que se debe hacer dos veces click en enviar para que se ejecute el código JavaScript.
Se que el fallo está en que llamo dos funciones anidadas una dentro de otra.

function incidenciaNueva(){
$("#subInc").click( function(e) {

pero no he logrado modificarlo para que resulte con un solo click al boton enviar, como deberia ser.

Gracias.

[Lorenzo31]

Alguna idea para solucionar esto, alguien que controle de Ajax y JavaScript y pueda ayudarme.

[César Krall]

Hola! Puede ser difícil verlo sin hacer pruebas. Si piensas que el fallo está en el anidamiento prueba a eliminar $("#subInc").click( function(e) { e.preventDefault(); y sus correspondientes cierres para comprobar qué ocurre. Puede ser útil activar la consola del navegador y comprobar si estás teniendo mensajes de error. También habría que ver los tiempos de respuesta del servidor, ten en cuenta que Ajax realiza procesos en segundo plano que dependen de la respuesta del navegador, por tanto la respuesta puede demorarse un tiempo y debido a eso "dar la impresión" de que hay que repetir el click, si fuera esto una opción sería mostrar un mensaje avisando de que se está procesando la petición hasta que llegue la respuesta del servidor.

Saludos!

[César Krall]

Se me está ocurriendo una cosa: $("#subInc").click( function(e) { ... } lo que está definiendo es lo que debe ocurrir cuando se haga click en el botón subInc. Entonces lo que podría estar ocurriendo es:

Con el primer click -- > se carga la respuesta que debe darse cuando se produce el evento click en el botón

Con el segundo click -- > se ejecuta la respuesta que antes no se pudo ejecutar porque no estaba establecido qué debía ocurrir cuando se produjera un click

Pero por otro lado cuando se hace click ya estás llamando a la función incidenciaNueva()

Habría que probar a dejar algo sin la re-definición como

Código: [Seleccionar]

function incidenciaNueva(){
$.ajax({
data: $("#form_new_inc").serialize(),
type: "POST",
url: "insertar_incidencia.php",
success: function(data){
$('#modal_nueva_incidencia').modal('hide');
$('#modalSuccessInc').modal('show');
}
});
//alert("Your data has been saved!");
   clearInputModificar();
}

De forma que no tengas que cargar primero cuál debe ser la respuesta para que luego se ejecute, sino que directamente se ejecute la respuesta. Si es así el problema estaría en que deberías haber establecido la función de respuesta de otra manera, ya que como está sería "establecer la función de respuesta como respuesta al evento click". Es un poco lioso.

[Lorenzo31]

Eso es exactamente lo que ocurria si, necesitaba dos clicks para pasar las dos condiciones, lo he solucionado de la siguiente forma (aunque la que tu propones también la he usado en otro lugar y funciona igual):

Código: [Seleccionar]

$( document ).ready(function() {

$("#sub_comment_inc").click( function(e) {
e.preventDefault();
$.ajax({
data: $("#newLineRecord").serialize(),
type: "POST",
url: "insertar_comentario_incidencia.php",
success: function(data){
$('#modalCierreInc').modal('show');
}
});
//alert("Your data has been saved!");
   clearInputModificar();
});

$("#newLineRecord").submit( function() {
  return false;
});
function clearInputModificar() {
    $("#newLineRecord:input").each( function() {
       $(this).val('');
    });
}

});


Function ready hace que no cargue el javascript hasta que el documento html este listo, y ya atiende al evento button click cuando ocurre (con un solo click).

Una cosa que me he dado cuenta es que la linea javascript en el html <script> </script> debe ser citada bastante previamente al uso de las funciones o eventos, porque lo puse justo encima y en algunos casos no me funcionaba.

Espero esto sirva para otros usuarios, saludos a todos y gracias César y Mario que comentan siempre.