Quero carregar uma página dentro de uma div via load passando uma variável que definirá o conteúdo da página a ser carregada.
Meu código:
index.php
<!DOCTYPE html>
<html>
<head>
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<script>
$(document).ready(function(){
$('.carrega').click(function(){
$('#aqui').load('pagina.php?variavel='+$('.carrega').val());
});
});
</script>
<?php
$arr = array('azul', 'branco', 'cinza');
for ($i = 0; $i < count($arr); $i++) {
$temp=$arr[$i];
echo "<button class='carrega' value='$temp'>$temp</button>";
}
?>
<div id="aqui"></div>
</html>
pagina.php
<?php
$variavel=$_GET['variavel'];
echo $variavel;
?>
A página carrega corretamente, porém somente a primeira variável é passada pela URL. Não sei o que estou fazendo errado, alguém poderia me dar uma ajuda?