1

I am having problems passing data to modal view. Either modal view doesn't open at all or reads data from first item every time I open it. The biggest problem I have is that I don't know jQuery. I want a button to open a modal that reads a variable of my item in this case item.Code. Items are in a foreach loop.

This is how i want my code to look.

<div class="row" style="padding: 0px 50px">
@foreach (var item in Model)
{
    <div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
        <h4>@item.Name</h4>

        <!-- Button to open modal view here for this specific item -->

    </div>
}

I tried it with and without a partial view. This is the code I currently have which just opens a modal window but doesn't show anything else. I know the problem is in id's, but I tried to change all id's to unique ones which caused even more problems.

    @foreach (var item in Model)
{
    <div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
        <h4>@item.Name</h4>
    </div>
    <input class="btn btn-default" type="button" value="Details" id="@item.id" onclick="Details(this.id);" />


    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @Html.Raw(item.Code);
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
}
<script>
    function Details(id) {
        $.get("@Url.Action("preview","Generator")/"+id, function (data) { $('.modal-body').html(data); });
        $('#myModal').modal('show');
    }

    $('#myModal').on('hidden.bs.modal' , function (e) {
        $('.modal-body').html("");
    })
</script>

Thank you!

1 Answer 1

2

Eg. This is the your html after the complete the forLoop

<div class="row" style="padding: 0px 50px">
     <div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
          <h4>Item Name - 1</h4>
          <button type="button" data-item="Item Name - 1" class="btn btn-default clsDetails">Details</button>
     </div>
     <div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
          <h4>Item Name - 2</h4>
          <button type="button" data-item="Item Name - 2" class="btn btn-default clsDetails">Details</button>
     </div>
     <div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
          <h4>Item Name - 3</h4>
          <button type="button" data-item="Item Name - 3" class="btn btn-default clsDetails">Details</button>
     </div>
</div>

HTML Modal

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="dvData"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Scripts

$(document).ready(function(){
    $(document).on("click",".clsDetails",OpenModalPopUp);   
});

function OpenModalPopUp(){
   var itemName = $(this).data("item");
   alert(itemName);
   $('#dvData').html(itemName);
   $("#myModal").modal();
}
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you !!! You have one mistake in your code (or at least I think it is since it didn't work until I changed it). in Scipts line: $('#dvData').html(itemName); needs to be changed to $('.dvData').html(itemName); .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.