CODEWITHSUNDEEP
htmlbootstrap-modal
user3762810
user3762810

Reputation: 143

Associated each modal to an id

I want each of my modal to have a unique ID. But what I am actually doing is giving me:

Syntax error, unrecognized expression: #myModal(7)

Below is my code:

<tbody class="tbodyBookTable">
    @foreach (var item in Model)
    {
        <tr class="trBookTable">
            <th>@Html.DisplayFor(modelItem => item.Title)</th>
            <th>@Html.DisplayFor(modelItem => item.Author)</th>
            <th>@Html.DisplayFor(modelItem => item.DateRented)</th>
            <th>@Html.DisplayFor(modelItem => item.ReturnDate)</th>
            <th>
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal(@Html.DisplayFor(modelItem => item.BookID))">Yes</button>
                <!-- Modal -->
                <div class="modal fade" id="#myModal(@Html.DisplayFor(modelItem => item.BookID))" role="dialog">
                    <div class="modal-dialog">
                      <!-- Modal content-->
                        <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Return confirmation</h4>
                        </div>
                        <div class="modal-body">
                            <p>Are you sure you want to return this book?.</p>
                            <p>Book title:@Html.DisplayFor(modelItem => item.Title)</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        </div>
                    </div>
                </div>
            </th>
        </tr>
    }
</tbody>

As you can see, I am setting my data-target as

#myModal(@Html.DisplayFor(modelItem => item.BookID))

and the id of my model in the same way. I don't understand why I am getting this error. Any help please?

Upvotes: 0

Views: 56

Answers (2)

Wes Foster
Wes Foster

Reputation: 8900

Remove the hashtag symbol (#) from the id declaration:

<div id='myModal(' + @Html.DisplayFor(item =>  item.BookID) + ')'></div>

The data-target uses the hashtag symbol because it is then placed directly into jQuery to find the element. When writing the id of an HTML element, you do not write the # symbol.

Upvotes: 2

anmarti
anmarti

Reputation: 5143

You aren't building the id correct. Use these:

<div id='myModal(' + @Html.DisplayFor(item =>  item.BookID) + ')'></div>

Since # can be conflictive, don't use in elements id.

Upvotes: 0

Related Questions