Модальное из загруженного Ajax частичного представления не отображается после однократного нажатия кнопки - PullRequest
Новая
       18

Модальное из загруженного Ajax частичного представления не отображается после однократного нажатия кнопки

0 голосов
/ 04 ноября 2018

Я пытаюсь создать частичное представление, которое будет отображаться в модальном режиме при нажатии кнопки. Если есть другой подход, который работает лучше для этого, я открыт для него - модал работал отлично, пока я не добавил List к основному виду. Если есть способ вернуть обратно список и форму публикации единственной сущности, которая может работать для моего сценария. Прямо сейчас код, который у меня есть, работает до некоторой степени, однако вам нужно дважды нажать кнопку Add Service, чтобы появился модальный режим, и когда единственный способ избавиться от него - отправить, оба X верхняя часть и кнопка закрытия не работают.

основной вид 

@model List<ServicesPosting>

<div>
    <button id="addService" onclick="OpenModal()">Add Service</button>
</div>

<div id="AddServiceForm"></div>


<script type="text/javascript">
    function OpenModal() {
        var url = '@Url.Action("AddServiceModal", "Services")';
        $('#AddServiceForm').load(url);
        $('#serviceModal').modal();
    }
</script>

Контроллер 

public class ServicesController : Controller
{
    // GET: Services
    public ActionResult Index()
    {
        List<ServicesPosting> postings = DataAccess.GetAllPostings();
        return View(postings);
    }

    [HttpGet]
    public ActionResult AddServiceModal()
    {
        return PartialView("~/Views/Services/AddNewService.cshtml");
    }
}

частичный вид 

@model ServicesPosting


<!-- Modal -->
<div class="modal fade" id="serviceModal" tabindex="-1" role="dialog" aria-labelledby="serviceModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="serviceModalLabel">Add New Service</h4>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm("Index", "Services"))
                {
                    // TODO: validate up front
                    <div class="row">
                        Service Title : @Html.TextBoxFor(x => x.ServiceTitle)
                    </div>
                    <div class="row">
                        ServiceDescription : @Html.TextAreaFor(x => x.ServiceDescription)
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 04 ноября 2018

  1. Проблема заключается в том, что при первом нажатии кнопки $('#serviceModal').modal(); функция вызывается до модальной нагрузки. Итак, вам нужно вызвать эту $('#serviceModal').modal(); функцию после того, как $('#AddServiceForm').load(url); будет сделано. Означает, что после загрузки AddNewService.cshtml вы можете найти нужный вам модал в вашей DOM. Подробнее смотрите здесь http://api.jquery.com/load/

  2. После этого вы можете показать модал. Иногда, когда вы добавляете какие-либо элементы DOM, достигнутые с помощью ajax-вызова, вам добавляется основной DOM, особенно DOM с элементами формы; синтаксический анализатор DOM не может получить его в первый раз, поэтому используйте тег body , чтобы найти любой дочерний элемент. Я поставил код ниже. Попробуйте с этим: 

      $("#AddServiceForm").load(url, function(responseTxt, statusTxt, xhr) {
    // debugger;
     if (statusTxt == "success") 
        {   
          $('body #serviceModal').modal('show');      
        }
    if (statusTxt == "error") 
        {
         console.log("Error: " + xhr.status + ": " + xhr.statusText);
        }
   });
...