How to reload javascript but not page

Question

I have a problem with a slider. When I load the first time my Web page, it shows a slider with some images. I have some links to change the images to show, so when I click, I want to display as a slider the other ones. The problem is that when I click on the new link, it doesn't use the jquery function to format the slider.

Here I paste some code so you can figure out:

<div class="contenidor_escaparates_2011">
    <div id="contenidor_slider" class="containerGaleria">
        <ul id="slideshow">
              <li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li>
              <li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li>
              <li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li>
</ul> </div></div>

And then the jquery:

$(document).ready(function()
{
    var timeout, manualMode = false,

            $slideshow = $('#slideshow'),
    $items = $slideshow.find('li').hide(),
    total = $items.length,
    getItem = function($item, trav) {
        var $returnItem = $item[trav]();
        return $returnItem.length ?
            $returnItem :
            $items[(trav == 'next') ? 'first' : 'last']();
    },

    showItem = function($currentItem, $itemToShow) {
        var $itemToShow =
            $itemToShow || getItem($currentItem,'next');

        $currentItem.fadeOut(300, function() {
            $itemToShow.fadeIn(300, fadeCallback);
        });
    },

    fadeCallback = function() {
        if (manualMode) { return; }

        var $this = $(this),
            $next = getItem($this, 'next'),
            num = $this.prevAll().length + 1;


        // set the timeout for showing
        // the next item in 5 seconds
        timeout = setTimeout(function() {
            showItem($this, $next);
        }, 3000);
    },

    handleBtnClick = function(e) {
        clearTimeout(timeout);

        manualMode = true;

        var $currentItem = $items.filter(':visible'),
            $itemToShow = getItem($currentItem, e.data.direction);

        showItem($currentItem, $itemToShow);
    };

    $items.eq(0).fadeIn(500, fadeCallback);

});

This works perfect for the first time I load the page, but when I change the content with this:

<script type="text/>
$('#nuestra_tienda_show').click(function()
    {
     $('.containerGaleria').html('');
     $('<ul id="slideshow"><li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li></ul> ')
         .prependTo('.containerGaleria');
         $('#galeria_seleccionada').html('Nuestra tienda 2011');
         location.reload();
         });
</script>

So basically, what I do is, after an onclick() event on some link, I change the html content of a div, but obviously, it doesn't use the jquery, as it wasn't loaded at first. Any idea on how to solve this?

If I use location.reload(); it shows the first items I had inside, so it doesn't work for me...

EDIT:
Wait, I edit the jsFiddle...

Why you don't wrap your gallery code in a function and call it on document ready. Then, if you need to change the elements, change them and call function again? — RaphaelDDL
– RaphaelDDL, Commented Oct 4, 2012 at 17:42
We don't have the html for the rest of the subject. Please post the html code for your links/buttons — Armel Larcier
– Armel Larcier, Commented Oct 4, 2012 at 17:45
You can't remove javascript that has already executed, however, you can re-execute javascript by storing it in a function and running the function multiple times as needed. — user400654
– user400654, Commented Oct 4, 2012 at 17:48
<script type="text/> should be <script type="text/javascript"> Can you create a js fiddle or update this one: jsfiddle.net/6ZvFW And post the new link in your question — Armel Larcier
– Armel Larcier, Commented Oct 4, 2012 at 17:48
Rather than reloading the javascript, you need another function that will swap the images on the page. I'm going through your code now and writing an example, will post in a few minutes. — Jeff Escalante
– Jeff Escalante, Commented Oct 4, 2012 at 17:53

Kai Qing · Accepted Answer · 2012-10-04 18:07:41Z

1

You need to create an init method for your slideshow and recall that when you need to.

I want to gag seeing how this js is set up so I will ignore it and post how I would have handled it:

$(document).ready(function(){
    slideshow.init();

    $('#nuestra_tienda_show').on('click', function()
    {
        $('.containerGaleria').html('');
        $('<ul id="slideshow"><li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li></ul> ')
        .prependTo('.containerGaleria');
        $('#galeria_seleccionada').html('Nuestra tienda 2011');
        slideshow.init();
    });
});

var slideshow = {
    timeout: null,
    manualMode: false,
    total: 0,
    init: function(){
        clearTimeout(this.timeout);
        var items = $('#slideshow').find('li').hide();
        this.total = items.length;
        items.eq(0).fadeIn(500, this.fadeCallback);
    },
    getItem: function(item, trav) {
        var returnItem = item[trav]();
        return returnItem.length ?
            returnItem :
            items[(trav == 'next') ? 'first' : 'last']();
    },
    showItem: function(currentItem, itemToShow) {
        var itemToShow =
            itemToShow || this.getItem(currentItem,'next');

        currentItem.fadeOut(300, function() {
            itemToShow.fadeIn(300, this.fadeCallback);
        });
    },
    fadeCallback: function() {
        if (manualMode) { return; }

        var $this = $(this),
            next = getItem($this, 'next'),
            num = $this.prevAll().length + 1;

        // set the timeout for showing
        // the next item in 5 seconds
        timeout = setTimeout(function() {
            this.showItem($this, next);
        }, 3000);
    },
    handleBtnClick: function(e) {
        clearTimeout(this.timeout);

        this.manualMode = true;

        var currentItem = items.filter(':visible'),
            itemToShow = this.getItem(currentItem, e.data.direction);

        this.showItem(currentItem, itemToShow);
    },
    handleBtnClick: function(e) {
        clearTimeout(this.timeout);

        this.manualMode = true;

        var currentItem = items.filter(':visible'),
            itemToShow = this.getItem(currentItem, e.data.direction);

        this.showItem(currentItem, itemToShow);
    };
};

Then you would just call slideshow.init() when you want to re-evaluate the slideshow content.

I didn't thoroughly audit this but the general idea is to turn this massive chain of vars into a single js object and contain the whole thing.

I cannot understand why you would write the contents of the slideshow like this in the click function. You're wiping the html of the container, creating the elements, then prepending them to the container and rewriting the title id with the same string over and over. Why not just set the html of the slideshow to the new images?

$('#slideshow').html('<li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li>');

edited Oct 4, 2012 at 18:07

answered Oct 4, 2012 at 17:54

Kai Qing

18.9k6 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

BeetleTheNeato Over a year ago

Although I think your solution is swell and everything, I don't see why Sonhja's code would make you gag. There are different styles of coding and there's space for everyone. Maybe he's still learning, maybe he doesn't care for the organization an object provides... Given such a simple task, what exactly are the benefits of organizing everything so neatly? It might just be your personal taste, you know?

Sonhja Over a year ago

It's a good solution, but you changed it so much, I can't understand it and actually the slider doesn't work... It's almost done! But it doesn't slide... Changes content perfectly, but doesn't slide... >_< @BeetleTheNeato Yes... so newby... but woman!!

Kai Qing Over a year ago

I work for a firm and we maintain certain habits to avoid confusion when code is handled by others. You can have your own style, go ahead. But if you apply for a job here and I see that code you better have a very impressive portfolio or I will end up believing the curve for adjustment may be too high to justify the expense. Nothing personal, just a reality. Anyhow, it can't hurt to be warned about this kind of thing. I didn't know when I started, but it might have been nice.

Kai Qing Over a year ago

@sonhja - It may not work as is. As I said I didn't audit it fully. But getting it to work would be minimally challenging. Anyhow, even if it doesn't work out of the box, the general idea is the same: make a function to handle checking the slideshow length and populating the content. then call that function in the click listener you have set up AS WELL AS when page loads.

Sonhja Over a year ago

@Kai Qing if I only change the images, it doesn't work. I'm gonna try deeply your first solution, but still doesn't work... But thanks.

|

Collectives™ on Stack Overflow

How to reload javascript but not page

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related