Jquery UI的Tab内容中的分页

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>

Answer 3

I have wrote a plugin to do Hijax which seems migth help you. You would use instead of the Tabs plugin, so you might have to setup the tabs to show properly in css (I'm not familiar with the tabs plugin).

You can download, see the docs and an example: www.yarontadmor.co.cc/hijax.php