Tengo una lista desordenada en la cual tengo 3 link:
<ul class="gnr">
<li><a class="lnk" href="#" title="Link1">Link1</a></li>
<li><a class="lnk" href="#" title="Link2">Link2</a></li>
<li><a class="lnk" href="#" title="Link3">Link3</a></li>
</ul>
Todos los links son de la clase "lnk" y lo que quiero hacer es que al hacer click en cualquiera de ellos se guarde el valor del atributo "title" en una variable y enviarla usando la funcion ajax() de jquery a un documento php.
leete este tutorial (http://www.javascriptya.com.ar/jquery/) explican eso y más
hola,
exacto sigo aquel tutorial pero me quede truncado en la parte de la conexion entre ajax y php.
Muestro el codigo que tengo:
En en el html:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="probando_ajax.js"></script>
</head>
<body>
<div id="bloque_geners">
<ul class="gnr">
<li><a class="lnk" href="#" title="Link1">Link1</a></li>
<li><a class="lnk" href="#" title="Link2">Link2</a></li>
<li><a class="lnk" href="#" title="Link3">Link3</a></li>
</ul>
</div>
<div id="resultados">
</div>
</body>
</html>
En el JS:
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$(".lnk");
x.click(presionSubmit);
}
function presionSubmit(){
$("a.lnk").each(function(){ //Esta linea y
var t = this.title; // esta otra me dejaron en duda.
$.ajax({
async:true,
type: "POST",
dataType: "html",
contentType: "application/x-www-form-urlencoded",
url:"recibe.php",
data:"titulo="+t,
beforeSend:inicioEnvio,
success:llegadaDatos,
timeout:4000,
error:problemas
});
});
}
function inicioEnvio()
{
var x=$("#resultados");
x.html('<img src="loading.gif">');
}
function llegadaDatos(datos)
{
$("#resultados").text(datos);
}
function problemas()
{
$("#resultados").text('Problemas en el servidor.');
}
Y el PHP:
<?php
$g=$_REQUEST['titulo'];
if($g=="Link1"){
echo "click en Link1";
}else{
if($g=="Baladas"){
echo "click en Link2";
}else{
echo " click en Link3";
}
}
?>
Y al hacer click en cualquiera de los tres link me imprime que hice click en Link3 y no me muestra el nombre del link respectivo al que se hizo click.
Por que tantas vueltas?
$(document).ready(function() {
$('.gnr a').on('click', function(){
var title = $(this).attr('title');
alert(title);
// ... ajax
});
});
Gracias por esa respuesta tan breve .Le estaba dando mucha vuelta al tema xD
Saludos.