data - jquery submit form ajax example

Ajax: cómo actualizar<DIV> después de enviar

Question

¿Cómo puedo actualizar solo parte de la página ("DIV") después de que mi aplicación libera un envío? Estoy usando JQuery con el plugin ajaxForm. Establecí mi objetivo con "divResult", pero la página repite su contenido dentro de "divResult". Fuentes:

 <script>
$(document).ready(function() {
$("#formSearch").submit(function() {
var options = {
target:"#divResult",
url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action"
}
$(this).ajaxSubmit(options);
return false;
});
})
</script>

Página

 <s:form id="formSearch" theme="simple" class="formulario" method="POST">
...
<input id="btTest" type="submit" value="test" >
...
<div id="divResult" class="quadro_conteudo" >
<table id="tableResult" class="tablesorter">
<thead>
<tr>
<th style="text-align:center;">
<input id="checkTodos" type="checkbox" title="Marca/Desmarcar todos" />
</th>
<th scope="col">Name</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tbody>
<s:iterator value="entityList">
<s:url id="urlEditar" action="editar"><s:param name="id" value="%{id}"/></s:url>
<tr>
<td style="text-align:center;"><s:checkbox id="checkSelecionado" name="selecionados" theme="simple" fieldValue="%{id}"></s:checkbox></td>
<td> <s:a href="%{urlEditar}"><s:property value="name"/></s:a></td>
<td> <s:a href="%{urlEditar}"><s:property value="phone"/></s:a></td>
</tr>
</s:iterator>
</tbody>
</table>
<div id="pager" class="pager">
<form>
<img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/first.png" class="first"/>
<img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/next.png" class="next"/>
<img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="<s:property value="totalRegistros"/>">todos</option>
</select>
<s:label>Total de registros: <s:property value="totalRegistros"/></s:label>
</form>
</div>
<br/>
</div> 

Gracias.

Answer 1

Puede usar la mayoría de los parámetros de la función jquery ajax normal con ajaxSubmit. Solo pasa una función de éxito.

$(''#formSearch'').ajaxSubmit({success: function(){ /* refresh div */ }); 

Vea aquí para un ejemplo más elaborado.

Answer 2

Su problema está en el lado del servidor: debe crear una página que devuelva solo el div que desea, y luego cambiar la ''url'' para que coincida con eso.

Actualmente está cargando la página completa con la llamada AJAX, por lo que devuelve toda la página.

Answer 3

Para resolver esto usando jquery probaría esto;

$(document).ready(function() {
$("#formSearch").submit(function() {
var options = {
/* target:"#divResult", */
success: function(html) {
$("#divResult").replaceWith($(''#divResult'', $(html)));
},
url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action"
}
$(this).ajaxSubmit(options);
return false;
});
});

alternativamente, puede hacer que el servidor devuelva solo el html que necesita insertarse en el div en lugar del resto del documento html.

Realmente no conozco el plugin TableSorter pero sí sé que necesitarás reiniciar tu plugin TableSorter cada vez que recargues el elemento. a fin de agregar una línea a su función de éxito que se dirige a su tabla, como

success: function(html) {
var resultDiv = $("#divResult").replaceWith($(''#divResult'', $(html)));
$(''table.tablesorter'', resultDiv).TableSorter();
}

Answer 4

Si solo desea actualizar su div con el mismo contenido estático que estaba antes de que los resultados de su publicación lo anularan, puede intentar algo como:

$("#Container").html($("#Container").html());

por supuesto, tenga cuidado de que el HTML interno no haya cambiado, o alternativamente, puede almacenar el innerHTML en una variable en la función document.ready() , luego cárguelo cuando lo necesite. Lo siento, escrito a toda prisa.

Answer 5

Usando jQuery, a veces cuando realizo una llamada .get ajax para actualizar una base de datos, recargo / actualizo otra parte de la página usando una declaración jQuery .load simple en la función de devolución de llamada correcta para reemplazar el contenido de un div.

$("#div_to_refresh").load("url_of_current_page.html #div_to_refresh")

Me gustaría señalar que esta no es la forma más eficiente de volver a cargar una pequeña porción de datos, por lo que solo la usaría en una aplicación web de poco tráfico, pero es simple de codificar.