How can I call the modal partial view. It can't be shown

Question

0.00/5 (No votes)

See more:

data are retrieved and populated in the modal. but the modal wont show if the button is clicked. how can i show the modal. :( help. thanks

What I have tried:

$scope.ButtonClick = function () {
        var post = $http({
            method: "GET",
            url: "/Catalogs/CurrencyMarkUps",
            dataType: 'json',
            params: { currencyCode: $("#currency-code").val() },
            headers: { "Content-Type": "application/json" },

            success: function (result) {
                // refreshes partial view
                $('#modalMarkup').html(result);
            }
        });
    }; //THIS IS THE JS FILE

@model CurrencyManager.ViewModels.CurrencyMarksUpsViewModel

<div id="modalMarkup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3 class="modal-title">Currency Markup</h3>
            </div>
                <div class="modal-body">
                    <div class="currencyList">
                        <div class="table border">
                            <div>
                                <div>Currency</div>
                                <div>Carrier</div>
                                <div>Start date</div>
                                <div>End date</div>
                                <div>Markup</div>
                            </div>
                            @foreach (var currencyMarkUp in Model)
                            {
                                <div ng-click="">
                                    <div>@currencyMarkUp.CurrencyCode</div>
                                    <div>@currencyMarkUp.CarrierCode</div>
                                    <div class="startDate">
                                        <div>@currencyMarkUp.StartDate</div>
                                        <input type="text" class="textbox calerdar" value="@currencyMarkUp.StartDate" />
                                    </div>
                                    <div class="endDate">
                                        <div>@currencyMarkUp.EndDate</div>
                                        <input type="text" class="textbox calerdar" value="@currencyMarkUp.EndDate" />
                                    </div>
                                    <div class="currentMarkup">
                                        <div>@currencyMarkUp.MarkUpRate</div>
                                        <input type="text" class="textbox" value="@currencyMarkUp.MarkUpRate" />
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-button">
                        <input class="btn btn-green pull-right btnUpdateMarkup" type="button" name="" value="UPDATE" />
                    </div>
                </div>
        </div>
    </div>
</div> // THIS IS THE MODAL PARTIAL VIEW

<input class="btn btn-green" type="button" name="" value="MARKUP" ng-click="ButtonClick()" /> //THIS IS THE BUTTON IN THE MAIN VIEW



public ActionResult CurrencyMarkUps(string currencyCode)
        {
            var currencyMarkUpList = _currencyServiceModel.RetrieveCurrenciesMarkUp(currencyCode);

            CurrencyMarksUpsViewModel currencyMarkUpViewModel = new CurrencyMarksUpsViewModel();

            if (currencyMarkUpList != null && currencyMarkUpList.Count > 0)
            {
                foreach (var currencyMarkUp in currencyMarkUpList)
                {
                    DateTime endDate;
                    DateTime startDate;
                    DateTime.TryParse(currencyMarkUp.EndDate, out endDate);
                    DateTime.TryParse(currencyMarkUp.StartDate, out startDate);
                    currencyMarkUpViewModel.Add(new CurrencyMarkUpViewModel
                    {
                        CurrencyMarkupID = currencyMarkUp.CurrencyMarkupID,
                        EndDate = endDate,
                        StartDate = startDate,
                        CarrierCode = currencyMarkUp.CarrierCode,
                        CurrencyCode = currencyMarkUp.CurrencyCode,
                        MarkUpRate = currencyMarkUp.MarkUpRate
                    });
                }
            }
            return PartialView("~/Views/Catalogs/PartialViews/_CurrencyMarkUp.cshtml",currencyMarkUpViewModel);
        } //I HAVE THIS PARTIAL VIEW CONTROLLER TO BE CALLED.

Posted 9-Apr-17 18:39pm

Jayson Angelo Adriano

Updated 9-Apr-17 19:49pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sachin.vishwa90 · Answer 1 · 2017-04-09T19:49:00

Solution 1

your code is 99% complete. only one thing is left.
if you are using bootstrap (i believe it is) then after putting HTML in you container div you have to invoke .modal method.

success: function (result) {
                // refreshes partial view
                $('#modalMarkup').html(result);
                $('#modalMarkup').modal('show'); // invoke the modal
            }

If above code doesnot work then try to put the #modalMarkup html in Moda-body container not in the parent div.

Posted 9-Apr-17 19:49pm

sachin.vishwa90

Updated 9-Apr-17 19:50pm

v2

Comments

Jayson Angelo Adriano 10-Apr-17 2:29am

sad to say, the modal still wont show after calling the render partial.

sachin.vishwa90 10-Apr-17 2:36am

as advised try to put the outcome html in div and keep your content there only.

i believe you have this button on the same page

after click of this button you want the
partial view to appear in modalpopup.
and you have given the partial view code too.

if that is the case in in the success method you have to invoke only the modal function. I reckon you don't need to update the modal
try removing the below code
// refreshes partial view
$('#modalMarkup').html(result);

and return false;

also you will have to use $scope.apply function after you update the http://jimhoskins.com/2012/12/17/angularjs-and-apply.html refer this.

$('#modalMarkup').html(result);
$('#modalMarkup').modal('show');
$scope.apply();