grabbing variables from an href

[1internet]

If it helps, this is for ajax pagination.

So I have pagination links eg.

<a class="pagination" href="categories.php?filterCat=2&page=3">3</a>

So there is a sql query that shows results, in this case they are fileted by category=2, and page=3.

 

So I want to send these variables through ajax.

$(".pagination").click(function(){
    var filter = 
    var page = 
     AJAX CODE IN HERE, passing through the variables
});

1. I don't know how to get the variables out of the href

2. How do I de-activate the hyperlink, so that on click it will not go to that page, and instead it will just run the ajax code?

 

Oh and if I am doing this an unnecessarily difficult way, then please let me know.

Edited April 18, 2013 by 1internet

[gizmola]

Ajax is simply a method for javascript to send normal HTTP requests to a web server. The server gets its parameters the same way it would if it was a normal GET or POST method. Using jquery you would call: http://api.jquery.com/jQuery.get/

 

The url parameter is the normal href target: 'http://yoursite.com/categories.php?filterCat=2&page=3'.

 

You get those params in the serverside script as usual ... using $_GET.

[1internet]

Oh, I think I get it, so we grab the href attribute then

$("#pagination a").click(function(){
	var data = $(this).attr('href');
	$.ajax({
		url: "ajax-category.php",
		data: data,
		type: "POST",
		dataType: "html"
	}).done(function(result, status){
		$("#pages_results").html(result);
	});
	return false;
});

And the ajax page will pick up the variables. Is it fine to use POST?

[codebyren]

---

If you're going to pass the URL to your PHP code via AJAX, you will probably need something like this:

$.ajax({
    url: "ajax-category.php",
    data: {url: pagination_url}, // note the key/value pairs
    type: "POST",
    dataType: "html"
    // etc.
}); 

Now the URL should be available in $_POST['url'] but you will still need to extract the variables (parameters) from it.  Two functions, namely parse_url followed by parse_str should help with this.  Without any error checking, it might look like this:

<?php
$url = $_POST['url'];

// Break the URL into its parts
$url_parts = parse_url($url);

// Convert the query part of the URL into an array of parameters
parse_str($url_parts['query'], $params);

print_r($params);  // Array ( [filterCat] => 2 

---

 => 3 )
exit;
?>

[Jessica]

Ajax is simply a method for javascript to send normal HTTP requests to a web server. The server gets its parameters the same way it would if it was a normal GET or POST method. Using jquery you would call: http://api.jquery.com/jQuery.get/

 

The url parameter is the normal href target: 'http://yoursite.com/categories.php?filterCat=2&page=3'.

 

You get those params in the serverside script as usual ... using $_GET.

This is the way to do it, not trying to parse the URL manually. PHP handles this stuff for you.

[1internet]

Thanks Jessica

So what would code look like? Can it just us easily be passed through POST?

For

<div id="pagination"><a href="categories.php?filterCat=72&page=3">3</a></div>

I have this

$("#pagination a").click(function(event){
	event.preventDefault()
	var url = $(this).attr('href');
	var pos = url.indexOf("?");
	var data = url.substring(pos + 1);
	$.ajax({
		beforeSend: startRequest,
		url: "./public/js/ajax-category.php",
		data: data,
		type: "POST",
		dataType: "html"
	}).done(function(result, status){
		$("#pages_results").html(result);
	});
});

for the jquery script and

if(isset($_POST['filterCat'])) {
	$filterCat = $_POST['filterCat'];
	if($filterCat != 'allCats') $filterCat = (int)$_POST['filterCat'];
} else {
	$filterCat = 'allCats';
}

if(isset($_POST["page"])) $current_pagination = (int)$_POST["page"];

to obtain the variables in the ajax script.

This works, but you are saying this is not the right way?

[Jessica]

Do you need to send it via POST?

[1internet]

No, not necessarily, I am not entirely sure what the difference is when you using ajax anyway.

I am guessing that in this case GET probably is better, as it will be fine to cache the results in the browser, and I am passing very little data through.

So I have changed it to GET, and it still works.

 

The strangest thing is that when the ajax pulls the pagination, then the jquery stops working. Is it not possible for the script to read from the DOM when its inserted through ajax?

Edited April 18, 2013 by 1internet

[Jessica]

Look up the .live() handler. There's a ton of info in the jquery manual about that. When you did the initial .click() the new elements you've added did not exist.

[1internet]

Oh, thanks so much Jessica.