actualizar div con jquery

[mensajeescrito]

Hola amigas y amigos una duda.
Para actualizar un div uso este codigo, por ejemplo:

Código Javascript:

$(".div_contenido").load(" .div_contenido");
 

Pero como se hace para actualizar un div de una archivo que esta en otra ruta distinta?

seria algo como esto?:

Código Javascript:

$("ruta/archivo.php .div_contenido").load(" ruta/archivo.php .div_contenido");
 

Es que lo estoy intentado asi y no me sale.

Cualquier ayuda es bienvenida ,gracias de antemano.

[ArturoGallegos]

Javascript trabaja de forma local, por lo que tengo entendido solo afecta a la pagina en la que fue cargado, lo que puedes hacer o al menos lo que yo aria, es utilizar sockets para notificar a la otra pagina cuando se actualiza algo

El como trabajar con sockets depende mucho del lenguaje que utilices, con NodeJS suele ser una tarea bastante fácil.
puedes revisar socket.io

Aunque claro, este concepto es mucho mas complejo que el uso de jQuery

[mensajeescrito]

Hola Arturo, gracias por contestar, bueno la verdad es que lo de soket creo que se me escapa a mis conocimientos.

Creo que será mejor exponer de manera mas detallada el problema que tengo, sera lo mejor.

Lo explico:

Tengo un combobox en html, el cual tiene una serie de "options" hasta ahí todo normal.

Dichas options las recoge mediante php con un while extrayendo el texto de las options de una base de datos y apareciendo en el combobox lógicamente.


En otro lado de la pagina web se crean nuevos contenidos para nuevas options.

Y tienen que figurar dentro de este combobox.

un ejemplo, tengo este select:

Código HTML:

<div id="div_contenedor">
 
<select>
option...pizza
option... kebab
</select>
 
</div>
 

Y en otro lado de la pagina creo un nuevo contenido para una nueva option y que se carge en ese select.

creo : hamburguesa.

con lo cual se carga en el select quedando asi:

Código HTML:

<div id="div_contenedor">
 
<select>
option...pizza
option... kebab
option...hamburguesa
</select>
 
</div>
 

bien para cargar la nueva option, lo que hago es usar jquery para refrescar el div contenedor del select de esta forma:

$("#div_contenedor").load(" #div_contenedor");

y bueno lo hace bien, en el select aparece la option de la hamburguesa tambien.


Pero el problema viene ahora:

al ejecutar el jquery load, lo que sucede es que aparece dos divs con el mismo id llamado div_contenedor anidados, es decir algo asi:

Código HTML:

<div id="div_contenedor">
<div id="div_contenedor">
 
<select>
option...pizza
option... kebab
option...hamburguesa
</select>
 
</div>
</div>
 

Y esto es un problema para mi.

Alguien podria ayudarme con esto?

Gracias de antemano.

[ArturoGallegos]

Ya veo, el caso es muy diferente a lo que tenia en mente, identificando tus problemas

traes o estas aprendiendo conceptos de la vieja escuela, no deberías usar jQuery para esto, pero si quieres seguir este camino
- en lugar de load usa una función ajax ya sea get o post
https://api.jquery.com/jquery.post/
- una vez obtenida la respuesta usa replaceWith, dado que la respuesta es un HTML e incluye el contenedor no debes agregar contenido sino reemplazarlo
https://api.jquery.com/replaceWith/


Como consejo en lugar de jQuery prueba utilizar fetch o axios, en lugar de retornar un HTML seria conveniente retornar un JSON, en lugar de reemplazar o cargar todo ese contenedor solo añade la nueva opción al select
https://developer.mozilla.org/es/doc...de/appendChild

[mensajeescrito]

vieja escuela?, me has hecho sentirme viejecito jajajajaj.

Arturo, una cosa, se que es un poco enrevesado pero a ver si puede ser esto que te comento como solucion a mi problema:

en jquery para recargar una web se puede usar:

Código Javascript:

location.reload();
 

Bien, dicho esto imaginate el siguiente escenario.

Una web que por defecto tiene una capa oculta y que hacendo click en un boton se hace visible mediante jquery.

Una vez que este div esta visible , hacemos un "location.reload();"

Al hacer esto el div vuelve a su estado inicial es decir ocultandose de nuevo.

la pregunta es:

¿Habria alguna manera de que al hacer "location.reload();", dicho div siguiera estando

visible sin tener que hacer de nuevo click al boton que lo hace visible?

Quien dice "location.reload();", podria ser otro codigo jquery que permitiera hacer esto logicamente.

[Alexis88]

Iniciado por mensajeescrito

vieja escuela?, me has hecho sentirme viejecito jajajajaj.

Arturo, una cosa, se que es un poco enrevesado pero a ver si puede ser esto que te comento como solucion a mi problema:

en jquery para recargar una web se puede usar:

Código Javascript:

location.reload();
 

Bien, dicho esto imaginate el siguiente escenario.

Una web que por defecto tiene una capa oculta y que hacendo click en un boton se hace visible mediante jquery.

Una vez que este div esta visible , hacemos un "location.reload();"

Al hacer esto el div vuelve a su estado inicial es decir ocultandose de nuevo.

la pregunta es:

¿Habria alguna manera de que al hacer "location.reload();", dicho div siguiera estando

visible sin tener que hacer de nuevo click al boton que lo hace visible?

Quien dice "location.reload();", podria ser otro codigo jquery que permitiera hacer esto logicamente.

Puedes usar una cookie o el almacenamiento local, de tal forma que puedas guardar un valor que modificarías cada vez que muestres u ocultes el elemento. Luego, al recargar la ventana, solo tendrías que evaluar el valor en cuestión. Por ejemplo, si el valor fuera 1, muestras al elemento; y si fuera 2, lo ocultas.

[ArturoGallegos]

vieja escuela?, me has hecho sentirme viejecito jajajajaj.

No te sientas, yo tambien ya estoy viejo pero hay que actualizarlos, el hecho que de aun quieras seguir usando jquery para esto en especifico es lo que me hizo decirlo.

-----

Dicho lo anterior, usando el reload como bien ya te dijeron tendrás que hacer uso de una cookie o localstorage, pero ademas tendrás que implementar otra función que lea esa cookie/localstorage cada que carga el sitio.

En pocas palabras, te complicas la vida, lo peor de todo esto es que estarás dando una muy mala experiencia de usuario (UX)