append divs in booklet pages

append divs in booklet pages

 The reason I'm writing is that I'm trying to incorporate booklet with a chat program for a college final project wherein a textarea entry is appended within the booklet <div>.

  This chat program works as planned in a static <div> but within the context of Booklet, it's made a little more complex.

  The following js function reads the messages on the server and appends them in a <div> called chatDisplayWindow.  The "if" statement determines whether the user is on the booklet page (based on the CSS sheet loaded) and, if not, it defaults to the other chat themes.
  The yourFilter function is my protection against XSS.

  1. function lireMessages(){
    $.ajax({
    url: 'lireMessages.php',
    success: function(data) {
    var liste = JSON.parse(data);
    var className = $('#index').attr('class');
    console.log(liste);
    for (var i=0; i<liste.length; i++){
    var string = yourFilter(liste[i].message);
    var string3 = yourFilter(liste[i].nomUsager);
    if(className=="styleBook"){
    console.log('HERE HERE');
    $("#booklet").append("<div>"+string3+": "+string+"</div>");
    }
    else{
    $("#chatDisplayWindow").append("<div>"+string3+": "+string+"</div>");
    }
    };
    }
    });
    setTimeout(lireMessages, 3000);
    } 

This portion displays the text and launches the booklet function
  1. <div class="chatDisplayWindow" id="chatDisplayWindow">
         <script type="text/javascript">
         $(document).ready(function() {
    $('#chatDisplayWindow').booklet();
    });
         </script>
         <div>
             <h3>Yay, Page 1!</h3>
             </div>
    <div>
            <h3>Yay, Page 2!</h3>
    </div>
            <div>
         <h3>Yay, Page 3!</h3>
    </div>
    <div>
    <h3>Yay, Page 4!</h3>
    </div> 
    </div>
 Anyone have any suggestions?  Also, any tips on loading a booklet page just enough and turning the page when full?

Thanks,

Stoker