need an good ajax anchor navigation example with function calls??

Hi,

I am still having problems with the go back href when you have load content in a ajax div. I am loading the content by triggering a .js function which has an jQuery $.ajax call. I need to enable the go back to previous.

here's a simplified example
bldd.nl/stackoverflow/pagination/

after filtering or a detail page you should see a "Now go back to the result page"

any tips, suggestions??

 

Hi

if I understand correctly you want to use the history JavaScript object to go back. This is not possible with AJAX. What actually happens with AJAX is that a request is sent asynchronously to the server and the server response is passed to the caller in the form of XML (in your case the HTML).

history.go(-1) behaves as if you have pressed the "back" button in your browser which of course doesn't work as the page does not change when sending AJAX requests (the purpose of AJAX).

I see 2 solutions to your problem:
1. make an JavaScript object to emulate the history object; so when you send the AJAX request store the values used for the filters in a list; every time a filter changes just add to that list; when you want to go back just check the last addition to your list and use those filters to send a new request;
2. you can also store the actual HTML of the div you are using to display the AJAX response; hitting back means clearing that div and placing the HTML you stored

hope this helps
let me know if it worked.

kindest regards
John

 

@inegoita, tx for thinking along.

I am trying your suggestion 2 first, but i am a bit stuck with redisplaying the HTML i stored. Could you take a look:
bldd.nl/stackoverflow/pagination/index2.php


Going to try your first suggestion latter.

ps: don't let the pagination fool you it ain't working correctly

 

http://digitarald.de/project/history-manager/ (through mootools framework)

 

@dimitar, tx for the link. But i am trying to stick to jquery first.

I have added 2 more js functions
1 to set the previous searchResult in a global variable
1 to get the global variable

couple of questions i have:
1 How much data can a global variable hold???
2 This setup prevents another query to the DB, right?

Still not happy with the result, taking baby steps

[edit]
bldd.nl/stackoverflow/pagination/index2.php
seems ok but i still have the two questions and even 1 more.

3/how can i speed up the queries??

4/WAIT how do i trigger my js function goBackAfterSearch() with the go back browser button???

 

@inegoita, i like to try your first suggestion as well

should i make a callback to function generate_query() each time the user goes back??/

 

Another solution i would like to try is the anchor/hash navigation solution. Anyone like to help me out here??

 

dunno if the PM got through

Hi,

k, so the first solution was the one that you create a global variable

var myQueryHistory = new Array();

then, inside your generate_query() function you just do a push just before the ajax post

myQueryHistory.push(qry);

then the "go back" link should look something like

<a href='#' onclick='javascript:goBack();'>go back</a>

here's the goBack function

function goBack(){

historyQry=myQueryHistory.pop();

$.ajax({
type: "POST",
url: "ajaxSearchJobs.php",
data: historyQry,
//add here the rest of the actions that need to take place on completing the submit
}
});

}


Please let me know if it works. I'm online for the next 6 hours or so.

John

 

hello john,

I like your suggestion and i while am playing with your suggestion and it seems to works, but i am still struggling with a bunch of issues.
bldd.nl/stackoverflow/pagination/index5.php


1/ pagination doesn't remember which page i was on (i was trying to do a php pagination last hour but i am not sure if that will work)
now i am trying to push currentpage=.. to the myQueryHistory array, so i can use it latter. But it doesn't work.
[edit]Well in fact i now know how to get the currentpage by

myQueryHistory.push("currentPage="+(event.data['newPage']+1));

Code (markup):

....i am making mistakes with .js function and php function

function paginateIt(currentPage = 0) {

Code (markup):

is good in PHP but not in JS.
so i am trying with

function paginateIt() {
var currentPage = currentPage || 0;

Code (markup):

I need to set the write pagination number to active

if(????) {
		????	.addClass('active');
		} else {		
			$pager.find('span.page-number:first').addClass('active');
		}

Code (markup):

2/ back browser button is not working ( i think i need solution number 3 for this with the anchor/hash??)

Regards,


ps: in the end i need to take this all in Codeigniter

 

hi,

1. I don't really understand how the pagination mechanism works ( sorry I'm lazy) - you have to keep in mind that each push to the myQueryHistory array has to contain all the queries params;
when you do myQueryHistory.push("currentPage="+event.data['newPage']) this will trigger the request
"ajaxSearchJobs5.php?currentPage=3" when you click go back, and it tells me that the query was empty, so I don't really get how the thing should work; please explain

2. the browser's back button is useless with regards to AJAX as the browser history does something similar to the "push" in the myQueryHistory, but ONLY when the location of the page actually changes.

 

hi inegoita, your 6 hours online are almost over Hope you are here 2morrow

ad 1/ i would like to go back to page 3 and set the class='active' of the filter-search-result page. I didn't know that i should push all the queries parms, i thought push would add the params to the global variable.
I also notice i just adds to the array and i think i need to replace the myQueryHistory if a variable was already set??

ad 2/ That's why i think i need to check anchor/hash navigation as well. As i understand it the url should become something like

ajaxSearchJobs5.php#runquery=1&filterB=2&currentPage=3

Code (markup):

but i haven't found a good tutorial.

I found this: http://www.asual.com/jquery/address/

regards

 

aaaahhh, sorry, I didn't understand what you meant by anchor/hash navigation

I have a site with javascript tutorials and I've just found some useful tutorials on AJAX and anchor navigation - I will PM the link to you as I'm not allowed to post links yet :-(
anyway, you are correct about how the link should look, and you will have to parse the link by using the document.location.hash property

 

ah, i found this: http://www.freeitsolutions.com/javascript/?search=anchor navigation

going to try a couple of your suggestions.

could you take a look here
bldd.nl/stackoverflow/pagination/indexBBQAjax3.php

without the search filters the go back works
but as soon as you have used the search filters and want to go back it doesn't work from a detailed page???

regards

 

I think you need something like this (found in the example I told you about)

var currentAnchor = null;
//Function which chek if there are anchor changes, if there are, sends the ajax request
function checkAnchor(){
//Check if it has changes
if(currentAnchor != document.location.hash){
currentAnchor = document.location.hash;
//if there is not anchor, the loads the default section
if(!currentAnchor)
query = "section=home";//here goes your default query
else
{
//Creates the string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
var splits = currentAnchor.substring(1).split('&');//this makes a map with your parameters
//Get the section replace this with building your own query
var section = splits[0];
delete splits[0];
//Create the params string
var params = splits.join('&');
var query = "section=" + section + params;
}
//Send the petition
$("#loading").show();
$.get("callbacks.php",query, function(data){
$("#content").html(data);
$("#loading").hide();
});
}
}

 

with the hash/anchor

should a link to a detailed page look like
/indexBBQAjax4.php#details.php?jobid=1368

or

/#details.php?jobid=1368

Code (markup):

see: bldd.nl/stackoverflow/pagination/indexBBQAjax4.php