jQuery ajax response not operating correctly

Question

Ok this is frustrating... The code below works "correctly" as far as sending the email address to the SaveEmail URL and it gets saved correctly each time I change the drop down. However it only outputs the "Successful" message once, no matter how many times I change the value in the drop down. The "data" that is returned is "Successful". I would like to show the message for a couple seconds, then fade it out. It works correctly the first time I change the drop down, after that the change happens and the value gets saved, but the "Successful" message doesn't display.

jQuery code:

$('#AgentEmails').change(function() {
  var NewAddress = $('#AgentEmails').val();
  $.post('SaveEmail.aspx', { email: NewAddress }, function(data) {
    $('#SelectMsg').html("<b>" + data + "</b>").fadeOut();
  });
});

HTML code:

<select ID='AgentEmails' runat='server'>
  <option value="[email protected]">TEST</option>
</select><span id='SelectMsg'></span>

What needs to be changed in my code to make this operate correctly? Thanks for the help.

Answer 1

the selection ain't made correctely in asp.net there is a couple of different ways to make selection by jquery you shoudl try this code:

$("*[id$='AgentEmails']").change(function() {
  var NewAddress = $("*[id$='AgentEmails']").val();
  $.post('SaveEmail.aspx', { email: NewAddress }, function(data) {
    $("*[id$='SelectMsg']").html("<b>" + data + "</b>").fadeOut();
  });
});

Answer 2

Once fadeOut is executed, the display property of #selectMsg is set to none, so you won't see it again, unless you restore it's visibility. For example:

$('#AgentEmails').change(function() {
  var NewAddress = $('#AgentEmails').val();
  $.post('SaveEmail.aspx', { email: NewAddress }, function(data) {
    $('#SelectMsg').show();
    $('#SelectMsg').html("<b>" + data + "</b>").fadeOut();
  });
})