ajax multiple link problem

[oblo10]

Hi . I have a problem with my ajax code. I have n number of links and I want to pass variables to my sort2.php so that I can understand which link to be run. Is there a way to do it? My code is as follows.

<script type="text/javascript">
$(document).ready(function()
{
$("#submit_prog").click(
function()
{
$.ajax(
{
type: "POST",
url: "sort2.php",


success:
function(t)
{


$("div#content").empty().append(t);
},
error:
function()
{
$("div#content").append("An error occured during processing");
}
});
});
});
</script>



<div id="content">                 <br />
<br />
<div class="float-left bg-white w-640 p-10">
<div class="title-box">
<ul class="list-row a-nounderline">
<li><a href="javascript:void(0)" id="submit_prog">Link 1</a></li>
<li><a href="javascript:void(0)" id="submit_prog">Link 2</a></li>
<li><a href="javascript:void(0)" id="submit_prog">Link 3</a></li>
...<br />
<li><a href="javascript:void(0)" id="submit_prog">Link n</a></li>
<br />
</ul>
</div>
<br />
<div class="p-10 float-left w-620">
<br />
<div class="float-left w-620">
<p />
first page<br />
<p />
<div class="span-14 last padding-bottom1-5" style="text-align:center;">
<p />
<br />
</div>
<br />
&lt;center&gt;<br />
<div style="text-align:center;height:30px;">
<span id="assessment_status" class="hide">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="exercise_css/loading0.jpg"/>&nbsp;Please Wait...</span><br />
</div>  <br />
&lt;/center&gt; <br />
<p />
</div>
<br />
</div>
</div>
</div>

[stbuchok]

Add an attribute to the links call data-linkid. In this attribute add something that indicates what the link is and what it should do (maybe just a number, whatever you want). Remove the id on each of the links (you should never use the same id more than once), instead use the data-linkid attribute to do your jQuery selector. Then grab the value from the data-linkid and pass it into the querystring when calling sort2.php.

Haven't tested it, but it should all work.

<script type="text/javascript">
$(document).ready(function()
{
$("[data-linkid]").click(function(){

var linkid = $(this).attr('data-linkid');

$.ajax({
type: "POST",
url: "sort2.php?linkid=" + linkid,

success: 
function(t) 
{

$("div#content").empty().append(t);
},
error:
function()
{
$("div#content").append("An error occured during processing");
}
}); 
});
});
</script>


<div id="content"> <br />
<br />
<div class="float-left bg-white w-640 p-10">
<div class="title-box">
<ul class="list-row a-nounderline">
<li><a href="javascript:void(0)" data-linkid="1">Link 1</a></li>
<li><a href="javascript:void(0)" data-linkid="2">Link 2</a></li>
<li><a href="javascript:void(0)" data-linkid="3">Link 3</a></li>
...<br />
<li><a href="javascript:void(0)" data-linkid="n">Link n</a></li>
<br />
</ul>
</div>
<br />
<div class="p-10 float-left w-620">
<br />
<div class="float-left w-620">
<p />
first page<br />
<p />
<div class="span-14 last padding-bottom1-5" style="text-align:center;">
<p />
<br />
</div>
<br />
&lt;center&gt;<br />
<div style="text-align:center;height:30px;">
<span id="assessment_status" class="hide">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="exercise_css/loading0.jpg"/>&nbsp;Please Wait...</span><br />
</div> <br />
&lt;/center&gt; <br />
<p />
</div>
<br />
</div>
</div>
</div>

[oblo10]

thank you very much.