Page break in jquery user interface content tab

I am making a page with jQuery UI TABS. In one of the tabs, I want to paginate for comments. I want such a thing. When the user clicks on the page number, the data of the linked page will be loaded 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 allows you to talk with the identifier "pagination"

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

?? thanks in advance

I tried recently like this even  and no luck. 

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

Here he works

<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 is a piece of HTML that Carl has given but is not in time. When you click on the link "Test", you go to another page ........ When you click on

HTML , - < 10 HTML ,

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

, , , #demo . , "", , $.

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

- HTML - , - .

' id "pagination" ' , . : , .

+1

, , ui.panel. .

<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>
0

I wrote a plugin to make Hijax, which seems to help you. You would use Tabs instead of the plugin, so you might have to tweak the tabs to display correctly in css (I'm not familiar with tab plugins).

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

0
source

Source: https://habr.com/ru/post/1726911/


All Articles