Показать сообщение об успехе

Question

Я хотел отобразить сообщение об успехе в том же режиме, что пользователь вводил информацию, но не получил желаемый результат.

$.ajax({
  url: form.attr('action'),
  type: form.attr('method'),
  data: formData,
  dataType: 'json',
  cache: false,
  contentType: false,
  processData: false,
  success: function(html) {
    $("#createTakeoutBtn").button('reset');
    $("#TakeoutForm")[0].reset();
    $("html, body, div.modal, div.modal-content, div.modal-body").animate({
      scrollTop: '0'
    }, 100);

    $('#add-takeout-messages').html('<div class="alert alert-success">' +
      '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
      '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> ' + 'Successfuly Saved' +
      '</div>');

    // remove the mesages
    $(".alert-success").delay(500).show(10, function() {
      $(this).delay(3000).hide(10, function() {
        $(this).remove();
      });
    });
  }
});

<div id="add-takeout-messages"></div>

Это результат, который я получаю прямо сейчас

{
  "success": true,
  "messages": "Successfully Added"
}

Answer 1

Я создаю два файла - файл index.php и еще один, который называется request.php. Я не знаю, используете ли вы php или json или другой внутренний язык, важная часть - структура json, полученная из вашего ajax и сам ajax, я также запускаю вызов ajax для некоторой пользовательской кнопки с событием щелчка, вы можете запустить вызов ajax, где бы вы ни хотели, он будет одинаковым, вот код:

php:

$array = [
  "status"=>"success",
  "messages"=>  [
    array('date' => "2019-04-11", 'msg'=>'Love you', 'from'=>'Annie' ),
    array('date' => "2019-04-10", 'msg'=>'Have a nice day', 'from'=>'Annie' )
  ]

];
echo json_encode($array);

или JSON:

{"status":"success","messages":[{"date":"2019-04-11","msg":"Love you","from":"Annie"},{"date":"2019-04-10","msg":"Have a nice day","from":"Annie"}]}

JavaScript:

$(document).ready(function() {
  var formData = {id:"1",name:"stan",lastname:"chacon",color:"blue"};
  function _ajaxMessage(formData){
    return $.ajax({
      url: "request.php",
      type: 'POST',
      data: formData,
      dataType: 'json'
    })
  }

  $("#btnDisplayModal").on('click', function(){
    _ajaxMessage(formData)
    .done(function(response){
      $('#add-takeout-messages').empty();
      $.each(response.messages,function(index,value){
        console.log(index,value);
      $('#add-takeout-messages').append('<div class="alert alert-success">' +
    '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
    '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> From: '+ value.from + '<br>' +  ' msg: ' + value.msg +
    '</div>')
      })
      $("#myModal").modal();
    })
  })

})

Обратите внимание, я использую Boostrap 4.

отображает:

Надеюсь, это поможет =)

Answer 2

Проблема скрыта в комментариях:

В результате я хочу отобразить сообщение об успехе под заголовком модального сообщения, но на нем отображается страница с ответным сообщением

Вы пытаетесь инициировать этот запрос ajax с помощью кнопки отправки формы, но забыли предотвратить действие формы по умолчанию, поэтому вместо запроса ajax вся страница обновляется с результатами скрипта.

Чтобы предотвратить это, вы можете использовать event.preventDefault или return false из события отправки формы :

// "form" variable defined earlier, as shown in your existing code
form.bind('submit', function (e) {
   e.preventDefault();
   $.ajax({ .... })
}

... или используйте кнопку, отличную от «submit», для запуска AJAX-запроса.

Answer 3

Попробуйте, вы забыли конкатенировать html.messages

$('#add-takeout-messages').html('<div class="alert alert-success">' +
      '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
      '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> ' + html.messages +
      '</div>');

Пожалуйста, используйте data / response вместо html в методе успеха, чтобы избежать путаницы, т.е.

success: function(response) {
      $('#add-takeout-messages').html('<div class="alert alert-success">' +
      '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
      '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> ' + response.messages +
      '</div>');
}