why is jquery select load looping

Question

I can't figure out why this is alerting me several times for each change...

    $(function(){
    $("#shift_name_<?php print $shift_id;?>").change(function () {
        $(".alertmessage").load("messages.php?eid="+$("#shift_name_<?php print $shift_id;?>").val(), function(data<?php print $shift_id;?>) {
            if(data<?php print $shift_id;?>!=''){
             alert(data<?php print $shift_id;?>);
            }
        });
    });
    });

Basically, there are a few that are looped through and given specific ids based on a php variable. However, when I change one it alerts me x number of times where x is the number of exist on the page...

Answer 1

Do you have multiple "alertmessage" divs? If so, you're loading into all of them not just one. Personally I wouldn't do it this way. Instead try:

<select name="..." id="shift13" class="alert">
  ...
</select>
<div id="alert13" class="alertmessage shift13"></div>

with:

$(function() {
  $("select.alert").change(function() {
    $("div.alertmessage." + this.id).load("messages.php",
        {id: this.id}, function() {
      alert(this.id); // alert13
    });
  });
});

is (imho) a lot cleaner solution than looping through and creating repetitive event handlers. Basically, encode the information you need in the elements. In the above, the ID of the combo box provides the ID for the AJAX call and links it to the relevant DIV to load to.