CODEWITHSUNDEEP
c#jqueryasp.net-mvcrazorbootstrap-modal
Kevin Mee
Kevin Mee

Reputation: 549

Modal from Ajax loaded partial view is not showing after clicking button one time

I am trying to create a partial view that will appear in a modal when a button gets pressed. If there is another approach that works better for this, I am open for it -- I had the modal working great until I added the List to the main view. If there is a way to return back a list and form post a single entity that might work for my scenario. Right now the code I have works to an extent, however you need to push the Add Service button twice in order for the modal to show up and when it does the only way to get rid of it is to submit, both the X in the top as well as the close button don't work.

main view

@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>

controller

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");
    }
}

partial view

@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>

Upvotes: 0

Views: 1296

Answers (1)

Muhammad Ashikuzzaman
Muhammad Ashikuzzaman

Reputation: 3143

  1. The problem is when you click the button first time the $('#serviceModal').modal(); function is being called before the modal load. So, you need to call this $('#serviceModal').modal(); function after $('#AddServiceForm').load(url); is done. Means that ater loading the AddNewService.cshtml is completed then you can find your desired modal in you DOM. See for more in here http://api.jquery.com/load/

  2. After that you can show the modal. Some times when you add any DOM elements achieved by ajax call added to you main DOM specially DOM with form elements; the DOM parser can't get it first time so use the body tag to find any child element. I have put a code bellow. Try with this : 

      $("#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);
        }
   });

Upvotes: 2

Related Questions