加载div以使ajax成功

Question

This has been asked before and I did look around, tried many methods but it does not execute. Only an alert function seems to work. I am trying to load a small div on success: after executing my POST in ajax. Here is my code:

$("#send").click(function(e) { e.preventDefault();

          $.ajax({
            type: 'POST',
            url: 'actions/update.php',
            data: $('#content').serialize(),
            success: function() {
          $(this).html('<div id="status">Saved!</div>');
          }
          });

        });

      $('#status').delay(5000).fadeOut(400);

My CSS to this Div:

#status {
position:fixed;
top:50%;
left:50%;
z-index:100000;
width:150px;
height:150px;
margin:-75px 0 0 -75px;
background-color:rgba(0,0,0,0.7);
border-radius:150px;
font-size:30px;
line-height:150px;
font-weight:700;
color:#fff;
text-align:center;
cursor:default; }

Could I be causing conflict somewhere? Is this because e.preventDefault(); Any help or link would be appreciated!

Answer 1

$("#send").click(function(e) { e.preventDefault();
          var that = $(this);
          $.ajax({
            type: 'POST',
            url: 'actions/update.php',
            data: $('#content').serialize(),
            success: function() {
          that.html('<div id="status">Saved!</div>');

          $('#status').delay(5000).fadeOut(400);
          }
          });

        });

The issue here is that this is not what you think it is inisde the callback. Try the above

Edit: In response to your comment:

The text is overwritten by the new div . One way to get around that is to insert the new div into a child element of the original element instead. To get the fading effect you have to put that into the callback as well. Otherwise it will execute before the ajax call returns. This is because ajax calls are asynchronous and the rest of the JavaScript code will continue to execute while you're waiting for the server to return the data

Edit2: I am not sure what type of element you're clicking, but there are two approaches here:

1) Add a child element into the clicked element ex: <a #id="send"><div id=someElement></div></a>

2) Add an element next to the clicked element and target that with the new div

Answer 2

Inside an $.ajax callback the context( this ) is by default the jqXHR object returned by $.ajax.
However you can use the context property in the configuration object for the $.ajax method to set what ever you want it to be. eg

  $.ajax({
    type: 'POST',
    url: 'actions/update.php',
    data: $('#content').serialize(),
    context: this, //<----
    success: function() {
      $(this).html('<div id="status">Saved!</div>');
    }
  });

This will set the context in all callbacks to the one in the calling function.

Answer 3

$("#send").click(function(e) { 
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'actions/update.php',
        data: $('#content').serialize(),
    }).done(function() {
        $('#status').html('Saved!');
    });
$('#status').delay(5000).fadeOut(400);
<div id='status'></div>