CODEWITHSUNDEEP
html
SteveBoy
SteveBoy

Reputation: 11

Bootstrap Modal, dynamic content load

i am passing the value of 1 to the modal input box but it wont display it

 <span class="glyphicon glyphicon-user" class="Add-Dialog" data-id="1" type="button" data-toggle="modal" data-target="#myModal"> </span>

Modal` 

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
     <input type="text" name="help" id="help" value=""/>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

JS

<script>
$(document).on("click", ".Add-Dialog", function () {
     var myHelpId = $(this).data('id');
     $(".modal-body #help").val( myHelpId );
});

Upvotes: 1

Views: 2010

Answers (1)

ARIF MAHMUD RANA
ARIF MAHMUD RANA

Reputation: 5166

<div class="modal-content" id="myModal"> <!--Add modal id-->
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
     <input type="text" name="help" id="help" value=""/>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

Then in js

$('#myModal').on('show.bs.modal', function (event) {
  var span = $(event.relatedTarget) // Span that triggered the modal
  var myHelpId = span.data('id') // Extract info from data-* attributes

  $(this).find("#help").val( myHelpId );
})

See this example http://getbootstrap.com/javascript/#modals-related-target for more details

Upvotes: 1

Related Questions