Jquery slider adding slides after page loaded

Question

i found a template what kinda works like powerpoint but then for browsers, after i tried this i wanted to get the content out of a db with ajax and have my slider content up to date.

the problem is the slider works with divs , it adds classes to each div to see which divs slides are, but i guess my divs are made after the slide code...

so when i run this my page just looks like a normal webpage , all the divs under each other instead of hided like it should be...

when i code my divs at the home page everything works fine.

this is my homepage.php :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Biesmans</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="bootstrap/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/home.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body id="simpleslides">

</body>
</html>

my slideshow js :

$(function() {

    var ID = {
        slideshow : 'simpleslides',
        slide : 'slide',
        counter : 'counter',
        navigation : 'navigation',
        next : 'next',
        previous : 'previous',
        current : 'current'
    };

    var labels = {
        next : '&rarr;',
        previous : '&larr;',
        separator : ' / '
    };

    var $slideshow = $('#'+ID.slideshow);
    var $slides = $slideshow.children().addClass(ID.slide);
    var $currentSlide;
    var $firstSlide = $slides.first();
    var $lastSlide = $slides.last();

    $slideshow.append($('<div>').attr('id',ID.next).addClass(ID.navigation).html(labels.next));
    $slideshow.append($('<div>').attr('id',ID.previous).addClass(ID.navigation).html(labels.previous));
    $slideshow.append($('<div>').attr('id',ID.counter));

    var $counter = $('#'+ID.counter);
    var $next = $('#'+ID.next);
    var $previous = $('#'+ID.previous);



    /*** FUNCTIONS ***/

    var updateCounter = function() {
// updates the counter
        $counter.text(thisSlidePointer + labels.separator + lastSlidePointer);
    }

    var hideCurrentSlide = function() {
// hide the current slide
        $currentSlide.fadeOut().removeClass(ID.current);
    }

    var nextSlide = function() {
// hide current slide
        hideCurrentSlide();

// get the next slide
        var nextSlide = $currentSlide.next();

// not the last slide => go to the next one and increment the counter
        if ( thisSlidePointer != lastSlidePointer ) {
            nextSlide.fadeIn().addClass(ID.current);
            $currentSlide = nextSlide;
            thisSlidePointer++;
        }
        else {
// is the last slide => go back to the first slide and reset the counter.
            $firstSlide.fadeIn().addClass(ID.current);
            $currentSlide = $firstSlide;
            thisSlidePointer = 1;
        }

// update counter
        updateCounter();
    }

    var previousSlide = function() {
// hide current slide
        hideCurrentSlide();

// get the previous slide
        var previousSlide = $currentSlide.prev();

// If not the first slide, go to the previous one and decrement the counter
        if ( thisSlidePointer != 1 ) {
            previousSlide.fadeIn().addClass(ID.current);
            $currentSlide = previousSlide;
            thisSlidePointer--;
        }
        else {
// This must be the first slide, so go back to the last slide and set the counter.
            $lastSlide.fadeIn().addClass(ID.current);
            $currentSlide = $lastSlide;
            thisSlidePointer = lastSlidePointer;
        }

// update counter
        updateCounter();
    }

    /*** INIT SLIDESHOW ***/

// Initially hide all slides
    $slides.hide();

// The first slide is number first!
    var thisSlidePointer = 1;

// The last slide position is the total number of slides
    var lastSlidePointer = $slides.length;

// The first slide is always the first slide! So let's make visible and set the counter
    $currentSlide = $firstSlide.show().addClass(ID.current);
    updateCounter();


    /*** EVENTS ***/

// "next" arrow clicked => next slide
    $next.click(nextSlide);

// "previous" arrow clicked => previous slide
    $previous.click(previousSlide);

// Add keyboard shortcuts for changing slides
    $(document).keydown(function(e){
        if (e.which == 39) {
// right key pressed => next slide
            nextSlide();
            return false;
        }
        else if (e.which == 37) {
// left key pressed => previous slide
            previousSlide();
            return false;
        }
    });
});

and my ajax call in another js file :

$(document).ready(function () {
    $("#simpleslides").html("");
    $.ajax({
        url: "index.php/projecten/getprojecten",
        type: "POST",
        success: function (data) {
            var projecten = jQuery.parseJSON(data);
            for (i = 0; i < projecten.length; i++) {
                $("#simpleslides").append(
                    "<div>"
                    + "slider content here"
                    + "</div>"
                );
     }
    }
});
});

EDIT :

editing the init part to a function and calling this function after the succes also does not work :

var thisSlidePointer;
var lastSlidePointer;

init = function () {
    $slides.hide();
    thisSlidePointer = 1;
    lastSlidePointer = $slides.length;
    $currentSlide = $firstSlide.show().addClass(ID.current);
    updateCounter();
}

Answer 1

You need to call the INIT SLIDESHOW section (from the slideshow script) in the success function, right after you added your divs. (and of course remove it from the original script) Also, You need to add all the initialization lines.

I suggest you add an Init function (remamber to declare all var's outside the function), also, since you call the function only after you get success ajax call you can remove it from the $(function() {}) block:

 var thisSlidePointer; var lastSlidePointer; var $slideshow; var $slides; var $currentSlide; var $firstSlide; var $lastSlide; var $counter; var $next; var $previous; var ID = { slideshow : 'simpleslides', slide : 'slide', counter : 'counter', navigation : 'navigation', next : 'next', previous : 'previous', current : 'current' }; var labels = { next : '&rarr;', previous : '&larr;', separator : ' / ' }; /*** FUNCTIONS ***/ var updateCounter = function() { // updates the counter $counter.text(thisSlidePointer + labels.separator + lastSlidePointer); } var hideCurrentSlide = function() { // hide the current slide $currentSlide.fadeOut().removeClass(ID.current); } var nextSlide = function() { // hide current slide hideCurrentSlide(); // get the next slide var nextSlide = $currentSlide.next(); // not the last slide => go to the next one and increment the counter if ( thisSlidePointer != lastSlidePointer ) { nextSlide.fadeIn().addClass(ID.current); $currentSlide = nextSlide; thisSlidePointer++; } else { // is the last slide => go back to the first slide and reset the counter. $firstSlide.fadeIn().addClass(ID.current); $currentSlide = $firstSlide; thisSlidePointer = 1; } // update counter updateCounter(); } var previousSlide = function() { // hide current slide hideCurrentSlide(); // get the previous slide var previousSlide = $currentSlide.prev(); // If not the first slide, go to the previous one and decrement the counter if ( thisSlidePointer != 1 ) { previousSlide.fadeIn().addClass(ID.current); $currentSlide = previousSlide; thisSlidePointer--; } else { // This must be the first slide, so go back to the last slide and set the counter. $lastSlide.fadeIn().addClass(ID.current); $currentSlide = $lastSlide; thisSlidePointer = lastSlidePointer; } // update counter updateCounter(); } /*** EVENTS ***/ // Add keyboard shortcuts for changing slides $(document).keydown(function(e){ if (e.which == 39) { // right key pressed => next slide nextSlide(); return false; } else if (e.which == 37) { // left key pressed => previous slide previousSlide(); return false; } }); var init = function () { $slideshow = $('#'+ID.slideshow); $slides = $slideshow.children().addClass(ID.slide); $firstSlide = $slides.first(); $lastSlide = $slides.last(); $slideshow.append($('<div>').attr('id',ID.next).addClass(ID.navigation).html(labels.next)); $slideshow.append($('<div>').attr('id',ID.previous).addClass(ID.navigation).html(labels.previous)); $slideshow.append($('<div>').attr('id',ID.counter)); $counter = $('#'+ID.counter); $next = $('#'+ID.next); $previous = $('#'+ID.previous); $slides.hide(); thisSlidePointer = 1; lastSlidePointer = $slides.length; $currentSlide = $firstSlide.show().addClass(ID.current); updateCounter(); /*** EVENTS ***/ // "next" arrow clicked => next slide $next.click(nextSlide); // "previous" arrow clicked => previous slide $previous.click(previousSlide); }

Answer 2

Code from @tal worked!

still had to edit that this piece of code got declared outside the init function

$counter = $('#'+ID.counter);
$next = $('#'+ID.next);
$previous = $('#'+ID.previous);

Jquery slider adding slides after page loaded

Question

2 answers

solution1
0 ACCPTED 2017-04-14 15:52:00

solution2
0 2017-04-14 19:30:25

Jquery slider adding slides after page loaded

Question

2 answers

solution1 0 ACCPTED 2017-04-14 15:52:00

solution2 0 2017-04-14 19:30:25

solution1
0 ACCPTED 2017-04-14 15:52:00

solution2
0 2017-04-14 19:30:25