Cuando muestro un resultado con AJAX ¿Como puedo hacer para que con un botón al hacer click actualice ese resultado (no la página)? ya que si lo hago con un reload con JAVASCRIPT me recarga la pagina y se pierde el resultado que obtuve de AJAX
1
-
1Ivxn coloca algo de código, para buscar una solución... – Alfonso Carrasco el 16 jun. 16 a las 18:30
añade un comentario
|
3 respuestas
Me imagino que debes de tener un evento onclick y envias un dato en específico a una función algo así:
<input type="button" onclick="nombreFuncion(dato); return false;" >
para evitar que recargue toda la página, carga el resultado que te arroja el ajax en un div, algo asi:
<div id="divCarga"></div>
este sería el ajax, me imagino que debes de tener algo similar:
function nombreFuncion(data){
$.ajax({
type: 'POST',
url: 'url',
dataType:"html",
data: data,
beforeSend:function(){
},
success:function(response){
$('#divCarga').html('cargara lo siguiente'+response);
}
});
}
NOTA
recuerda que el input no debe de ser tipo submit, asi evitaras que recargue toda la página
-
Tenga o no el button de
type="submit
puede entrar" solo habrá que agregar una linea mas a la función para evitar el doble envioevent.preventDefault()
– JuankGlezz el 16 jun. 16 a las 22:25 -
Siempre he tenido ese problema y mejor proceder por no utilizar el submit, gracias por el aporte :) – Alan el 16 jun. 16 a las 22:42
Dale ejecutar y pruebalo. Saludos
$(document).on('click', '.borrar', function (event) {
event.preventDefault();
$(this).closest('tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table border="1">
<tr id="fila0">
<td>Columna 1.1</td>
<td>Columna 1.2</td>
<td>Columna 1.3</td>
<td>Columna 1.4</td>
<td>Columna 1.5</td>
<td>Columna 1.6</td>
<td><input type="button" class="borrar" value="Eliminar" /></td>
</tr>
<tr id="fila1">
<td>Columna 2.1</td>
<td>Columna 2.2</td>
<td>Columna 2.3</td>
<td>Columna 2.4</td>
<td>Columna 2.5</td>
<td>Columna 2.6</td>
<td><input type="button" class="borrar" value="Eliminar" /></td>
</tr>
<tr id="fila2">
<td>Columna 3.1</td>
<td>Columna 3.2</td>
<td>Columna 3.3</td>
<td>Columna 3.4</td>
<td>Columna 3.5</td>
<td>Columna 3.6</td>
<td><input type="button" class="borrar" value="Eliminar" /></td>
</tr>
<tr id="fila3">
<td>Columna 4.1</td>
<td>Columna 4.2</td>
<td>Columna 4.3</td>
<td>Columna 4.4</td>
<td>Columna 4.5</td>
<td>Columna 4.6</td>
<td><input type="button" class="borrar" value="Eliminar" /></td>
</tr>
<tr id="fila4">
<td>Columna 5.1</td>
<td>Columna 5.2</td>
<td>Columna 5.3</td>
<td>Columna 5.4</td>
<td>Columna 5.5</td>
<td>Columna 5.6</td>
<td><input type="button" class="borrar" value="Eliminar" /></td>
</tr>
</table>
</body>
</html>
Si estas utilizando algun tipo de input, podrias agregar una funcion en js
function refresh() {
var dato1 = String(document.getElementById("dondeobtienevalor").value);
document.getElementById("dondesemostrara").value = (dato1);
}
sin olvidar agregar (onkeyup o onclick) ="refresh();" a tu elemento