Home:ALL Converter>Two Modal popup; passing id

Two Modal popup; passing id

Ask Time:2015-07-11T22:41:33         Author:Nick Kahn

Json Formatter

EDIT:

I narrow down the problem and i found that if I have: plain input tag without MVC RAZOR then it work as expected

<input type="text" class="hiddenid2" /> //WORKED

but if i have : (does not work)

 @Html.Editor("id", "", new { htmlAttributes = new { @class = "hiddenId2" } })

or

 @Html.Editor("id", "", new { @class = "hiddenId2"  })

then it does not work

END UPDATE

This is driving me crazy after going through line by line and everything seems correct but I'm not sure what else do I need to do here.

The problem I'm having is:

I'm passing the Id to the modal popup so I have two modal popup with different Ids & class name. The First modal popup works and it does pass the Id to modal popup but the second modal popup does not pass the id.

First Modal:

//View Link

<a href="/Home/Employee/@item.Id" data-id="@item.Id" 
data-toggle="modal" data-target="#myModal" 
class="modalLink">Load Employee</a>

View:

@using (Html.BeginForm("Employee", "Home", FormMethod.Post))
{

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Record</h4>
                </div>
                <div class="modal-body">
                 @Html.Hidden("id", "", new { @class = "hiddenid" })
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
}

JQuery:

$(.modalLink").click(function () {
     var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid").val(passedID);
});

Second Modal:

//View Link

<a href="/Home/Employer/@item.Id" data-id="@item.Id" 
data-toggle="modal" data-target="#myModal2" 
class="modalLink2">Load Employer</a>

View:

@using (Html.BeginForm("Employer", "Home", FormMethod.Post))
{

    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Record</h4>
                </div>
                <div class="modal-body">
                 @Html.Hidden("id", "", new { @class = "hiddenid" })
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
}

JQuery:

$(.modalLink2").click(function () {
     var passedID = $(this).data('id');
     $('#id').val(passedID);
     $(".modal-body .hiddenid").val(passedID);
});

Author:Nick Kahn,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/31358312/two-modal-popup-passing-id
Ji_in_coding :

The problem lies with your selector. Both modals contains the same $(\".modal-body .hiddenid\").val(passedID); this will always operate on the first .modal-body .hiddenid jquery finds, and this is indeed always the hidden input in your first modal.\n\nyou can perform a quick fix by changing the class name of the 2nd modal.\n\nHEre is a running example on Codepen\n\nHtml:\n\n<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css\">\n<script src=\"//code.jquery.com/jquery-1.11.3.min.js\"></script>\n<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js\"></script>\n\n<a href=\"/Home/Employee/@item.Id\" data-id=\"id-number-one\" \ndata-toggle=\"modal\" data-target=\"#myModal\" \nclass=\"modalLink\">Load Employee</a>\n\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n <h4 class=\"modal-title\" id=\"myModalLabel\">Record</h4>\n </div>\n <div class=\"modal-body\">\n <input type=\"text\" class=\"hiddenid\"/>\n </div>\n <div class=\"modal-footer\">\n </div>\n </div><!-- /.modal-content -->\n </div><!-- /.modal-dialog -->\n </div><!-- /.modal -->\n\n\n\n\n<br>\n<a href=\"/Home/Employer/@item.Id\" data-id=\"id-number-two\" \ndata-toggle=\"modal\" data-target=\"#myModal2\" \nclass=\"modalLink2\">Load Employer</a>\n\n<div class=\"modal fade\" id=\"myModal2\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n <h4 class=\"modal-title\" id=\"myModalLabel\">Record</h4>\n </div>\n <div class=\"modal-body\">\n <input type=\"text\" class=\"hiddenid2\"/>\n </div>\n <div class=\"modal-footer\">\n </div>\n </div><!-- /.modal-content -->\n </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->\n\n\nJS:\n\n$(\".modalLink\").click(function () {\n var passedID = $(this).data('id');\n $('#id').val(passedID);\n $(\".modal-body .hiddenid\").val(passedID);\n});\n\n$(\".modalLink2\").click(function () {\n var passedID = $(this).data('id');\n $('#id').val(passedID);\n $(\".modal-body .hiddenid2\").val(passedID);\n});\n",
2015-07-13T15:21:00
yy