Cross domain AJAX (YQL) - Navigate between consequent data pages of the variable query changed by click
I have some divs:
- <div id="id1"><h3>A</h3><h4>X</h4></div>
- <div id="id2"><h3>B</h3><h4>Y</h4></div>
- <div id="id3"><h3>C</h3><h4>Z</h4></div>
And use xdomainajax plugin ( YQL powered) -
to load external pages.
I added the following function :
When i click on div it search for <h3> contents in the external dictionary and loads it to the "#cont"
- $("div") .click(function(){
- var filter = $('h3',this).text();
- $('#cont') .load ('http://jisho.org/words?jap=*'+filter+'*');
-
- });
In current form it loads the desired results - but only the first page .
I would like to add function that:
* when div is clicked search its <h3> content in the dictionary and load it to "#cont"
* have navigation feature that load consequent dictionary pages of the found word (triggered by prev/next buttons)
* when clicking on another div it change the search query and use the same buttons to navigate through new result pages
for example :
- http://jisho.org/words?jap=*%E6%B0%B4*&page=2
- http://jisho.org/words?jap=*%E6%B0%B4*&page=3
- http://jisho.org/words?jap=*%E6%B0%B4*&page=4
- http://jisho.org/words?jap=*%E6%B0%B4*&page=5
etc
i failed using these two functions :
- $("div") .click(function(){
- var filter = $('h3',this).text();
- $ ('#buffer') .empty();
- $('#buffer') .append ('http://jisho.org/words?jap=*'+filter+'*');
- });
- var filterone = $('#buffer') .contents () .clone ();
- var curIndex = 0;
- function fun(index) {
- curIndex = parseInt(index);
- $('#cont').load (filterone+"&page="+index);
-
- }
and then navigation by
-
- function forw() {
- fun(curIndex + 1);
- };
- function back() {
- fun(curIndex - 1);
- };
Your help would be appreciated.