Question

I am foxed by this… I am generating a “slide show” using the jQuery http://slidesjs.com plugin. Nothing fancy, except, I want to insert the contents of the slide via an ajax call. Everything works well, the html requested via ajax is retrieved successfully, no errors, except, the div holding the text doesn’t get updated. In other words, the $().html(data) line below does nothing. What am I doing wrong?

Here is a very simplified version of the code

<div id="slides">
    <div class="slides_container" id="slides_container"></div>
    <div id="controls">
      <a href="#" class="next"><img src="/img/arrow-prev.png"></a>
      <a href="#" class="prev"><img src="/img/arrow-next.png"></a>
    </div>
    <div class="pagination"></div>
</div>

<script type="text/javascript">
    var FOO = {
        "Pages": {
            "0": "Page0",
            "2": "Text_for_Page_2",
            "4": "A_Discourse_on_4",
            "7": "Seven_is_Heaven"
        }
    };

    $(function() {
        var str = "";
        for (var i = 0; i < 9; i++) {
            str +=  '<div class="slide">' + 
                    '<div id="#page_' + i + '" class="text"></div>' + 
                    '</div>';
        }

        $("#slides_container").html(str);
    });

    $(function(){
        $('#slides').slides({
            preload: false,
            effect: 'fade',
            animationStart: function(current) {
                if (FOO.Pages[current]) {
                    $.ajax({
                        url: '/path/to/' + FOO.Pages[current] + '.html',
                        type: 'GET',
                        dataType: 'text',
                        success: function( data ) {

                            // The following line does nothing
                            $("#page_" + current).html( data );
                        }
                    });
                }
            }
        });
    });
</script>

Answer 1

Typo in the below function

  ` $(function() {
    var str = "";
    for (var i = 0; i < 9; i++) {
        str +=  '<div class="slide">' + 
                '<div id="#page_' + i + '" class="text"></div>' + 
                '</div>';
    }

    $("#slides_container").html(str);
  });

`

Change

'<div id="#page_' + i + '" class="text"></div>' + '</div>';

to

'<div id="page_' + i + '" class="text"></div>' + '</div>';

NOTE: the div id page has # before it..