Conflict with jQuery and JPagination, JPagination

Question

JPagination is not working to paginate a <div> with <li>. I don't know if it is a conflict on the ID, or if it's the PHP, or what exactly is going on here, I hope someone can help me figure out what's happening.

So this is what I got. First, here's my HTML. This is a page I'm doing that will "post your text" to a wall (which is a <div> with an <ul>). Here's the HTML body:

    <div id="head">
    <form name="postbar_add_post" id="postbar_add_post" method="post">
        <fieldset>
            <legend>What are you doing now? ...</legend>
            <input type="text" name="addcontentbox" id="addcontentbox" maxlength="200" />
            <input type="submit" name="addpost" value="Submit" class="submit" />
            </fieldset>
    </form>
    </div>

    <div id="cuerpo"><ul id="wall"></ul></div> 

Ok, so, on the head of the document, I got jQuery called, and also a plugin called JPagination, and also on the head I got a script which is what will make the content "post to the wall" just to make sure I'm doing it right, here's what I got on the head of the document:

    <script src="http://c.fzilla.com/1286136086-jquery.js"></script> 
    <script src="http://c.fzilla.com/1291523190-jpaginate.js"></script>  

    // This is the script to post whats typed on the input to the div called wall:

    <script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function(){
        jQuery("form#postbar_add_post").submit(function() {
            var addcontentbox = jQuery('#addcontentbox').attr('value');

            if ( addcontentbox.replace(/\s/g,"") == "" ) return false;

    jQuery.ajax({
    type: "POST",
    url: "postear.php",
    data:"addcontentbox="+ addcontentbox,
    success: function(){
    jQuery("ul#wall").prepend("<li>"+addcontentbox+"</li>");
    jQuery("ul#wall li:first").fadeIn();
    document.postbar_add_post.addcontentbox.value='';
    document.postbar_add_post.addcontentbox.focus();
    }
    });
    return false; 
    });
    });
    </script>


    // and this would be where I try to paginate the content

    <script type="text/javascript">
        $(document).ready(function() {
            $("#wall").jPaginate();        
        });
    </script>

So, the posting works just great! But the pagination never happens, if I change the function to apply it to the parent <div>, nothing happens, it stays the same. Before adding the "noconflict" from jQuery it wouldn't even work.

Just in case need, I leave the PHP called on the first function here:

    <?php
    if( isset($_POST['addcontentbox']))
       {
       // Connection to Database
       include('config.php');

       // NO Query Injection
       $message = mysql_real_escape_string($_POST['addcontentbox']);

       // echo
       $sql = 'INSERT INTO WALL (message) VALUES( "'.$message.'")';
       mysql_query($sql);

       echo $message;
       }
    else
       { 
       echo '0';
       }
    ?> 

Any guidance or solution of any kind would be greatly appreciated.

Answer 1

I just read your question quickly, I think you use many plugins, so the problem I think is with when using multiple plugin, so always wrap up your javascript code with self invoking functions like

(function($){

  /// Your page code here
  // Here you can use $ 
  // We are passing jquery as $ to this self invoking function.

})(jQuery)

How do I fix Lightbox2 problems using $.noConflict()?