Pagination in Tab Content of Jquery UI

Question

I am making a page with Jquery UI TABS. In one of tabs I want to make pagination for comments. I want such thing. When user clicks on the number of the page, the data of the page , which is linked will load via ajax in the tab.

Here is my code

<script type="text/javascript">
 $(function() {
  $("#tabs").tabs();
 });



 $('#demo').tabs({
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
});




 </script>

How can I change this , so that any link inside the content with lets say with id "pagination"

<a href="/coments?page=12&user_id=12" id="pagination">12</a>

?? Thanks beforehand

I tried recently like this even  and no luck. 

This is from http://www.bannerite.com/jquerytest/index2.php

Here it work

<script type="text/javascript">
    $(function() {          
        $("#tabs").tabs();
        var hijax = function(panel){
            $('a', panel).click(function() {            
                /**makes children 'a' on panel load via ajax, hence hijax*/
                $(panel).load(this.href, null, function(){
                    /**recursively apply the hijax to newly loaded panels*/
                    hijax(panel);                  
                });

                /**prevents propagation of click to document*/
                return false;
            });

            $('form', panel).css({background: 'yellow'}).ajaxForm({
                target: panel,
            });    
        };

        $('#demo ul').tabs({
            /**initialize the tabs hijax pattern*/
            load: function(tab, panel) {
                hijax(panel);
            }
        }); 
    });
</script>

HEre are the HTML part as Karl gived , but no succes. When clicking on Test link its going to another page........ When clicking on

I wanted to post HTML here but because of users with less reputation <10 cant give HTML with links I have posted it here

http://gevork.ru/2009/12/31/jquery-ui-tab-and-pagination-html/#more-58

Answer 1

One reason it might not work is that #demo isn't tabified within the ready event and instead right away. As long as a scripts-at-the-bottom approach is not used this call needs to be moved into the anonymous function which is passed into $.

$(function() {    
    $('#tabs').tabs({
        load: function(event, ui) {
            $('a', ui.panel).click(function() {
                $(ui.panel).load(this.href);
                return false;
            });
        }
    });
});

Apart from that - without knowing about the actual HTML - I cannot tell if there's something else wrong.

'any link with id "pagination"' sounds as if there were more than one. In that case: An id has to be unique so it should be changed to a class here.

Answer 2

I think you have your code wrong where you have panel should be ui.panel. This worked for me.

<script type="text/javascript">
    $(function() {
        var hijax = function(panel) {
            $('a.pagination', panel).click(function(){
                $(panel).load(this.href, {}, function() {
                    hijax(this);
                });
                return false;
            });
        };
        $("#tabs").tabs({
            ajaxOptions: {
                error: function(xhr, status, index, anchor) {
                    $(anchor.hash).html("Couldn't load this tab.");
                },
            },
            load: function(event, ui) {
                hijax(ui.panel);

            }
        });
    });
</script>