Articles filtered results using JQuery tabs paging issue

8 Posts

pags11 Reply #1, 11 years ago

I am trying to filter my articles into tag categories displayed along the top of the page. I have it working with JQuery tabs to display each getPage call inside each tab. This is done so far using this chunk.

 <div id="content">
            <div id="tabs">
                <ul>
                    <li><a href="blog/#tabs1">All</a></li>
                    <li><a href="blog/#tabs2">Tips & Advice</a></li>
                    <li><a href="blog/#tabs3">Tech News</a></li>
                    [[!SimpleSearchForm? &tpl=`blogCats` &method=`get` &landing=`359`]]
                </ul>
                <div id="tabs1">
                    <p>[[!getPage? &includeTVs=`1` &processTVs=`1` &tpl=`articleRowSearchTpl` &element=`getResources` &limit`12` &showHidden=`1` &ActivePageTpl=`<li class="current"><a[[+title]] href="[[+href]]">[[+pageNo]]</a><li>`]]</p>

                    <p>[[!+page.nav]]</p>
                </div>
                <div id="tabs2">
                    <p>[[!getPage? &tvFilters=`articlestags==%Tips%` &includeTVs=`1` &processTVs=`1` &tpl=`articleRowSearchTpl` &element=`getResources` &limit`12` &showHidden=`1` &ActivePageTpl=`<li class="current"><a[[+title]] href="[[+href]]">[[+pageNo]]</a><li>`]]</p>

                    <p>[[!+page.nav]]</p>
                </div>
                <div id="tabs3">
                    <p>[[!getPage? &tvFilters=`articlestags==%Tech%` &includeTVs=`1` &processTVs=`1` &tpl=`articleRowSearchTpl` &element=`getResources` &limit`12` &showHidden=`1` &ActivePageTpl=`<li class="current"><a[[+title]] href="[[+href]]">[[+pageNo]]</a><li>`]]</p>

                    <p>[[!+page.nav]]</p>
                </div>
            </div>
            
            <script>
                 $( "#tabs" ).tabs();
            </script>
</div>

Although when I am trying to add pagination to my articles is works but does not keep the results inside the tab as the URL changes. Ending up with every tab displaying all three divs content.

Is there an easier way to do this or solve my issue? Any help would be great.

Thanks. [ed. note: pags11 last edited this post 11 years ago.]

295 Posts

comp_nerd26 Reply #2, 11 years ago

all pagination is doing is refreshing the page and appending page=1 etc... to the url.
you could use jquery and pull the data without the need of page refreshing using ajax.

8 Posts

pags11 Reply #3, 11 years ago

Quote from: comp_nerd26 at Sep 28, 2015, 10:38 AM

all pagination is doing is refreshing the page and appending page=1 etc... to the url.
you could use jquery and pull the data without the need of page refreshing using ajax.

How would I go about doing this?

295 Posts

comp_nerd26 Reply #4, 11 years ago

use jquery to: prevent the default occurance when an a href link is pressed. ajax to send a request to a url to retreive the data (ideally a json array), and a div container to refresh the data within. you would use a snippet and a template to convert the json array to php, then send the data to a chunk using php, you would then have to specify a page that processes all the data.

i may be able to come up with something but its not a quick task!