jQuery (only first link is jquerying?)

Sim · 10-25-2012, 06:17 PM

Heres my HTML without the JS includes. I got included the latest jquery.min.1.8 or whatever and my own js file which is shown below

the problem is it only works with the Baltimore location and not New York? Why? If its because of a conflicting name issue, anyone got a simple work-a-round because I will be adding a ton more locations.

Code:

<a href="#" name="loc" id="loc" src="index.php?where=location&id=2">Baltimore</a><br>
								<a href="#" name="loc" id="loc" src="index.php?where=location&id=1">New York</a><br>

heres my JS file:

Code:

$(document).ready(function(){			
	$("#loc").mouseup(function () {
			alert($("#loc").attr("src"));

		$.ajax({
		      url: $("#loc").attr("src"),
		      global: false,
		      type: "POST",
		      data: $("#form1").serialize(),
		      dataType: "html",
		      success: function(msg){     		         
		      	 $("#right_col").html(msg);		         
		      },
		      error: function(msg) {
		      	$("#right_col").html(msg);
		      }
   		});
	});
});

sunfighter · 10-26-2012, 04:33 AM

You are using the same ID for both anchors. You can only have one id with a given name.
id="loc" will only get the first <a> recognized.

the scr attribute does not belong in a <a> tag. It throws up errors and will get you into trouble.

Here's an easy way to do what you want [the ajax has not been checked, it don't look like it works]:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Call your javascript jquery library here
<script type="text/javascript">
function anchor_ajax(place){
	$.ajax({
		url: place,
		global: false,
		type: "POST",
		data: $("#form1").serialize(),
		dataType: "html",
		success: function(msg){
		 $("#right_col").html(msg);
		},
		error: function(msg) {
		$("#right_col").html(msg);
		}
	});
}
</script>
</head>

<body>
<a href="" class="loc" onclick="anchor_ajax('index.php?where=location&id=2');">Baltimore</a><br />
<a href="" class="loc" onclick="anchor_ajax('index.php?where=location&id=1');" >New York</a><br />

</body>
</html>