兩個模態彈出;通過ID

我縮小的問題，我發現，如果我有：無MVC RAZOR純輸入標籤，然後它的工作如預期

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

，但如果我有：（不工作）

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

或

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

然後它不行

結束時更新

這是推動我瘋了由線通過線去後，一切似乎是正確的，但我不知道做什麼別的，我需要在這裏做。

我遇到的問題是：

我傳遞ID送到模式彈出，所以我有不同的ID &類名稱的兩個模式彈出。第一個模式彈出窗口工作，它確實將ID傳遞給模式彈出窗口，但第二個模式彈出窗口不傳遞該ID。

第一模：

//視圖鏈接

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

查看：

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

第二模式：

//視圖鏈接

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

查看：

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

來源

2015-07-11 Nick Kahn

問題在於你的選擇。兩個模態都包含相同的$（「。modal-body .hiddenid」）.val（passedID）;這將始終在第一個.modal-body .hiddenid jquery上找到，這確實總是第一個模態中隱藏的輸入。

您可以通過更改第二個模態的類名執行快速修復。

這裏是一個正在運行的example on Codepen

HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

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

<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"> 
        <input type="text" class="hiddenid"/> 
       </div> 
       <div class="modal-footer"> 
       </div> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 




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

<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"> 
     <input type="text" class="hiddenid2"/> 
     </div> 
     <div class="modal-footer"> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

JS：

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

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

來源

2015-07-13 15:21:00

你的代碼究竟發生了什麼變化？並且我確實將類名改爲'.modal-body2'，但是我沒有看到任何差異，仍然沒有填充代碼......你在CodePen中的那個是靜態的，我正在處理動態ID –

@AbuHamzah，關鍵在於你正在使用的jquery選擇器和類名。我所做的改變是爲隱藏的輸入提供一個hiddenid2的類名（你給兩個隱藏的輸入一個hidden類）。另外你可以再次點擊codepen鏈接。玩它。我已經添加了標籤以清楚地說明 –

您可能認爲我很瘋狂，但它並不工作，當我查看我的頁面源並將其輸入呈現爲'我不知道發生了什麼，即使我的第一個模式沒有任何問題，我確實有.hidden2第二個模態arggg –

@Ji_in_coding：幫我縮小爲什麼ID是不及格的原因，我是能夠提供class and id

我能夠f ix通過添加id和class

@Html.Hidden("id", "", new { @class = "hiddenid2", id = "hiddenid2" })

來源

2015-07-13 18:25:33

兩個模態彈出;通過ID

回答

相關問題