Web Analytics Made Easy -
StatCounter pagination not working... Looong script - CodingForum

Announcement

Collapse
No announcement yet.

pagination not working... Looong script

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • pagination not working... Looong script

    so.. im tryign to paginate a div with content being added by an input. but its not working at all...

    first, I got this input:

    Code:
    <form name="postbar_add_post" id="postbar_add_post"  method="post">
    	<fieldset>
        	<legend>What chu doign? ...</legend>
            <input type="text" name="addcontentbox" id="addcontentbox" maxlength="200" />
            <input type="submit" name="addpost" value="Submit" class="submit" />
          	</fieldset>
    </form>
    then, what i will happen is that, the content being submited, will be posted to an unsorted list, named wall, i used jquery to help me out on this, heres the script:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	$("form#postbar_add_post").submit(function() {
    		var addcontentbox = $('#addcontentbox').attr('value');
    		
    		if ( addcontentbox.replace(/\s/g,"") == "" ) return false;
    		
    $.ajax({
    type: "POST",
    url: "postear.php",
    data:"addcontentbox="+ addcontentbox,
    success: function(){
    $("ul#wall").prepend("<li>"+addcontentbox+"</li>");
    $("ul#wall li:first").fadeIn();
    document.postbar_add_post.addcontentbox.value='';
    document.postbar_add_post.addcontentbox.focus();
    }
    });
    return false; 
    });
    });
    </script>
    the div where it is beign opsted at, looks like this:

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

    adn then, below i got this div, wich is where the navgiation links will be at:
    (before u read, "current_page" and "show_per_page" are 2 hidden inputes to save the values.)

    Code:
    <div id="navwrapper"></div>
    so, to make the navigation, i found a script online and tried to adapt it to the div, i got this:

    Code:
    $(document).ready(function(){ 
    
    	//how much items per page to show  
    	var show_per_page = 5;  
    	//getting the amount of elements inside content div .   
        var number_of_items = $('#wall').children().size();  
        //calculate the number of pages we are going to have  
        var number_of_pages = Math.ceil(number_of_items/show_per_page); 
    	
    	//set the value of our hidden input fields  
        $('#current_page').val(0);  
        $('#show_per_page').val(show_per_page);  
    	
    	
    	//navigation '  
      
          
        var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';  
        var current_link = 0;  
        while(number_of_pages > current_link){  
            navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';  
            current_link++;  
        }  
        navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';  
      
        $('#navwrapper').html(navigation_html);  
      
        //add active_page class to the first page link  
        $('#navwrapper .page_link:first').addClass('active_page');  
      
        //hide all the elements inside content div  
        $('#wall').children().css('display', 'none');  
      
        //and show the first n (show_per_page) elements  
        $('#wall').children().slice(0, show_per_page).css('display', 'block');  
      
    });  
    
    function previous(){  
      
        new_page = parseInt($('#current_page').val()) - 1;  
        //if there is an item before the current active link run the function  
        if($('.active_page').prev('.page_link').length==true){  
            go_to_page(new_page);  
        }    
    }  
    
    function next(){  
        new_page = parseInt($('#current_page').val()) + 1;  
        //if there is an item after the current active link run the function  
        if($('.active_page').next('.page_link').length==true){  
            go_to_page(new_page);  
        }  
    } 
    
    function go_to_page(page_num){  
        //get the number of items shown per page  
        var show_per_page = parseInt($('#show_per_page').val());  
      
        //get the element number where to start the slice from  
        start_from = page_num * show_per_page;  
      
        //get the element number where to end the slice  
        end_on = start_from + show_per_page;  
      
        //hide all children elements of content div, get specific items and show them  
        $('#wall').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');  
      
        /*get the page link that has longdesc attribute of the current page and add active_page class to it 
        and remove that class from previously active page link*/  
        $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');  
      
        //update the current page input field  
        $('#current_page').val(page_num);  
    }


    but all looks cool but... it is actually not working... everything its being posted great to the unsorted listt, but its not paging =S. .. it just all shows on the div, and scrolls.

    Could it be somethign on the css? ... or... what ...? =|


    Guidance? =( . my brains toasted. =\
Working...
X