[SOLUCIONADO] Recargar archivos JS

[degrar]

Buenos días,

Estoy generando una pagina html, y mediante una funcion javascript llamo a un archivo php para poner contenido en un div concreto del archivo HTML (iniciar), así pongo contenido nuevo sin recargar la página.

El problema es que necesito que se ejecuten unos archivos js que inicialmente se ejecutan, pero al mostrar el nuevo contenido, estos no se ejecutan y por lo tanto el nuevo contenido no funciona.

¿Alguna solución?

Muchas gracias por avanzado.

[Artificium]

Pon algo de código para que nos aclares un poco la cosa.

[PHPeros]

Puedes utilizar funciones y las invocas cuando te convenga...

[degrar]

Phperos, lo que me comentas de ejecutar la funcion lo he probado pero no he tenido suerte.

Lo que he estado investigando es que el pluguin en un inicio funciona, pero una vez se ha ejecutado la funcion para cambiar el contenido del div, deja de funcionar.
Dejo el codigo (ya que lo he sacado de una web de acceso gratuito) que se deberia recargar cada vez que cambio el contenido del div.

<script src="libs/jquery.imagesloaded.js"></script>
<script src="jquery.wookmark.js"></script>
<script type="text/javascript">
(function ($){
$('#tiles').imagesLoaded(function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#todo'), // Optional, used for some extra CSS styling
offset: 20, // Optional, the distance between grid items
itemWidth:280, // Optional, the width of a grid item
fillEmptySpace: true // Optional, fill the bottom of each column with widths of flexible height
};

// Get a reference to your grid items.
var handler = $('#tiles li'),
filters = $('#filters li');

// Call the layout function.
handler.wookmark(options);

/**
* When a filter is clicked, toggle it's active state and refresh.
*/
function onClickFilter(e) {
var $item = $(e.currentTarget),
activeFilters = [],
filterType = $item.data('filter');

if (filterType === 'all') {
filters.removeClass('active');
} else {
$item.toggleClass('active');

// Collect active filter strings
filters.filter('.active').each(function() {
activeFilters.push($(this).data('filter'));
});
}

handler.wookmarkInstance.filter(activeFilters, 'or');
}

// Capture filter click events.
$('#filters').on('click.wookmark-filter', 'li', onClickFilter);
});
})(jQuery);
</script>

[Eleazan]

Buenas,

Intentaré ayudarte un poco...

¿Ves esta linea?

Código Javascript:

$('#filters').on('click.wookmark-filter', 'li', onClickFilter);
 

Ahí le estás diciendo que el elemento #filters este a la escucha del evento 'click.wookmark-filter' y le pase ese li y ejecute onClickFilter.

Si te lees la doc de .on ( https://api.jquery.com/on/ ) verás que existe una parte q se llama "delegate", que será el problema que tienes.

Imagino que al recargar el div, "pierdes" ese elemento #filters, para añadir otro... ¿q es lo q pasa? Q pierdes los eventos "attached" (añadidos? embebidos? a los q estaba a la escucha? ) en ese elemento.. y su no vuelves a ejecutar eso, no funciona.

Tienes dos posibles soluciones...

1)
Volver a ejecutar $('#filters').on('click.wookmark-filter', 'li', onClickFilter); después de cargar el div.

2)
Hacer el attach al body

No sé si me he explicado, si has entendido algo o no

[degrar]

Entiendo lo que me comentas, cosa que te agradezco mucho, pero no se como ponerlo...

Lo ideal es que se ejecute una vez carga todo el contenido del div.

[Eleazan]

Perdón, contesté muy rapidito....


Prueba con este código:

Código Javascript:

(function ($){
 
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#todo'), // Optional, used for some extra CSS styling
offset: 20, // Optional, the distance between grid items
itemWidth:280, // Optional, the width of a grid item
fillEmptySpace: true // Optional, fill the bottom of each column with widths of flexible height
};
 
// Get a reference to your grid items.
var handler = $('#tiles li'),
filters = $('#filters li');
 
 
$('#tiles').imagesLoaded(function() {
 
// Call the layout function.
handler.wookmark(options);
 
/**
* When a filter is clicked, toggle it's active state and refresh.
*/
function onClickFilter(e) {
var $item = $(e.currentTarget),
activeFilters = [],
filterType = $item.data('filter');
 
if (filterType === 'all') {
filters.removeClass('active');
} else {
$item.toggleClass('active');
 
// Collect active filter strings
filters.filter('.active').each(function() {
activeFilters.push($(this).data('filter'));
});
}
 
handler.wookmarkInstance.filter(activeFilters, 'or');
}
 
// Capture filter click events.
$('#filters').on('click.wookmark-filter', 'li', onClickFilter);
});
})(jQuery);
 

Así, las variables "options", "handlers" y "filters" serán globales (accesibles para cualquier trozo de código de js).

Una vez comprobado que así funciona, al recargar tu div, supongo que usarás alguna función en plan $.ajax, o cosas.... puedes volver a ejecutar esta linea:

Código Javascript:

handler.wookmark(options);
 

[degrar]

El código que me has pasado funciona, pero cuando recargo el div deja de funcionar.

Tengo esto al final del div:

Código:

<script>
$(document).ready(function(){
   //código a ejecutar cuando el DOM está listo para recibir instrucciones.
   (function ($){
    handler.wookmark(options);
	})(jQuery);
});

</script>

Es correcto, o me estoy equivocando de sitio?

Agradezco mucho tu ayuda!

[Eleazan]

Digo yo...

Usarás una funcion js para recargar el div, no? xD

Mete la línea despues de cambiar el html ahí

[degrar]

Si si, te la pongo a continuación:

<script>
function showUser(str)

{

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

xmlhttp.open("GET","url"+str,true);
xmlhttp.send();

}
</script>

Entiendo pues, que debería poner una nueva sentencia para ejecutar la función " handler.wookmark(options);" no?

[degrar]

Perdona si te estoy liando, pero estoy un poco perdido com el tema, y no domino demasiado jQuery

[Eleazan]

Justo después de "document.getElementById('todo').innerHTML=xmlhttp . responseText;"

Por ejemplo! :P

PD: Usando jQuery, es más sencillo usar esto:

Código Javascript:

$.get(url, datos, function(data){
   $("#todo").html(data);
});
 

Ahí tendrías ese codigo entero xD

[degrar]

No me funciona :(

Me pone esto: "ReferenceError: handler is not defined"

[Eleazan]

¿Y si cambias handler por $('#tiles li') ? xD

[degrar]

Mañana lo pruebo y te digo :)

[degrar]

Hola Eleazan,

Finalmente ya he encontrado la solución! gracias a lo que me comentabas, finalmente he optado para poner toda la función después de "document.getElementById('todo').innerHTML=xml http . responseText;", ya que lo que me comentabas no funcionaba del todo bien.

Muchas gracias por tu ayuda!

Un saludo!