將數據傳遞到引導模式中的輸入標記

我在J2EE項目中工作，並且遇到了一個使我的生活受損的問題：v我已經使用bootstrap，並且已經使用bootstrap模式並將數據傳遞給模態，但是這次，當我使用相同的代碼時，它不起作用。 PS：在其代碼片段中，它代表代碼是正確的，但在我的項目中並不是這樣。這是什麼意思。將數據傳遞到引導模式中的輸入標記

$(".modal-link").click(function() { 
 
    $("#descr").attr('value', $(this).attr('descr')); 
 
    $($(this).attr('href')).modal('show'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div class='modal small 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'>×</button> 
 
     <h3 id='myModalLabel'>Detail</h3> 
 
     </div> 
 
     <div class='modal-body' id="Details"> 
 
     <input id="descr" name="descr" value="" /> 
 
     </div> 
 
     <div class='modal-footer'> 
 
     <button class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Fermer</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <c:forEach items='${liste}' var='p'> 
 
    <div class="col-sm-6 col-md-4"> 
 
     <div class="media services-wrap wow fadeInDown"> 
 
     <div class="pull-left"> 
 

 
     </div> 
 
     <div class="media-body"> 
 
      <h3 class="media-heading">${p.getMarque()}</h3> 
 
      <p id="des">${p.getDescr()}</p> 
 
     </div> 
 
     <a href="#myModal" class="modal-link" var descr="${p.getDescr()}" role='button' data-toggle='modal'> 
 
      <i class="glyphicon glyphicon-eye-open">View</i> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </c:forEach> 
 
</div>

來源

2017-04-01 Bashir

$ {p.getDescr（）}替換爲$ {p.descr}並請嘗試。描述你的私人屬性。和$ {p.marque} –

@Gurkan Yesilyurt不存在的問題。 $ {p.getDescr（）}和$ {p.marque}顯示沒有任何問題。我的問題在於模態。我將$ {p.getDescr（）}的值傳遞給名爲descr的變量，並嘗試將它的值放入我的輸入標記中，該標記的ID爲「descr」，不能分配！我已經使用相同的代碼，並沒有問題，我不知道現在有什麼問題！ – Bashir

它只能在片段中使用一次。您的服務器也一樣。它設置一次值，然後它不再工作。當你打開模式時，它的值設置正確，嘗試改變它的輸入值並重新打開它。即使再次調用attr（）方法，該值也不會改變。 – Linek

編輯：沒關係我的職務。你已經發現問題不在於你的javascript或標記。

你的代碼似乎工作正常，所以問題顯然是其他地方。我只拿出foreach循環和變量，並硬編碼的描述。根據鏈接的不同，模態內的輸入會填入不同的描述。順便說一下，您不需要使用.show（）明確打開模式。

$(".modal-link").click(function() { 
 

 
    $("#descr").attr("value", $(this).attr('descr')); 
 
    //$($(this).attr('href')).modal('show'); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 

 
<div class='modal small 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'>×</button> 
 
     <h3 id='myModalLabel'>Detail</h3> 
 
     </div> 
 
     <div class='modal-body' id="Details"> 
 
     <input id="descr" name="descr" value="" /> 
 
     </div> 
 
     <div class='modal-footer'> 
 
     <button class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Fermer</button> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-sm-6 col-md-4"> 
 
    <div class="media services-wrap wow fadeInDown"> 
 
     <div class="pull-left"> 
 

 
     </div> 
 
     <div class="media-body"> 
 

 
     </div> 
 
     <a href="#myModal" class="modal-link" var descr="Description 1" role='button' data-toggle='modal'> 
 
     <i class="glyphicon glyphicon-eye-open">View</i> 
 
     </a> 
 
    </div> 
 
    </div> 
 
<div class="col-sm-6 col-md-4"> 
 
    <div class="media services-wrap wow fadeInDown"> 
 
     <div class="pull-left"> 
 

 
     </div> 
 
     <div class="media-body"> 
 

 
     </div> 
 
     <a href="#myModal" class="modal-link" var descr="Description 2" role='button' data-toggle='modal'> 
 
     <i class="glyphicon glyphicon-eye-open">View</i> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
</div>

來源

2017-04-01 15:35:53 noriMonsta

我想我還有一個問題，我仍然不知道它是什麼，因爲我的代碼在其他項目中工作正常，當我在這裏運行代碼片段時它工作正常，我添加了答案（沒有foreach），它仍然當你的代碼正確時不工作..我迷路了！ – Bashir

您的代碼段無法使用。打開模式，更改輸入的內容並重新打開它。輸入內容將停止改變。 'attr（）'方法在這裏被錯誤地使用了。 – Linek

您使用不正確的方法attr()。使用prop()。

$(".modal-link").click(function() { 
    $("#descr").prop('value', $(this).attr('descr')); 
    $($(this).attr('href')).modal('show'); 
});

瞭解更多關於attr()。最重要的部分是：

不過，關於選中的屬性要記住的最重要的概念是，它不對應於checked屬性。屬性實際上對應於defaultChecked屬性，應僅用於設置複選框的初始值。已檢查的屬性值不會隨着複選框的狀態而變化，而檢查的屬性值會變化。因此，跨瀏覽器兼容的方式來確定是否選中複選框是以使用屬性

對於其他動態屬性（如selected和value）也是如此。

換句話說attr()方法只改變屬性的默認值（在這種情況下的值）。如果更改輸入value並嘗試使用attr()方法更改它，則它將不起作用，因爲默認值！=當前值。要更改當前值，您必須使用prop()或val()方法。

來源

2017-04-01 15:37:01 Linek

也無法正常工作 – Bashir

將數據傳遞到引導模式中的輸入標記

回答

相關問題