CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstrap
num
num

Reputation: 21

pass data-id to bootstrap modal

I have a problem to show data-id with bootstrap modal. here is my scripts

 <a class="btn btn-warning btn-minier" href="#modal-form-edit" role="button" data-toggle="modal" data-id="<?php echo $row['product_names']; ?>"><i class="icon-edit bigger-120"></i> Edit</a> &nbsp;

Modal

<div id="modal-form-edit" class="modal hide" tabindex="-1">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="blue bigger">Products</h4>
</div>

<div class="modal-body overflow-visible">
    <div class="row-fluid">

        <div class="vspace"></div>

        <div class="span7">
            <div class="control-group">
                <label class="control-label" for="form-field-username">Product Name</label>

                <div class="controls">
                    <input type="text" name="product_name" placeholder="Product Name" value="" id="product_name" /> 
                </div>
            </div>

JS

$('#modal-form-edit').on('show', function () {
    var product = $(this).data('id');
    $("#product_name").val($(this).data('product'));
})

The problem is, data-id doesn't show the value ($row['product_names']).

When I change

var product = $(this).data(id)

to

var product = "test";

the modal show "test". Any help I'll appreciate

Upvotes: 1

Views: 15834

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

You need to get the anchor tag data-id not using this like,

var product = $('a[href="#modal-form-edit"]').data('id');

UPDATED And if you have multiple edit links then to get the clicked anchor tag data-id you should use e.relatedTarget

// using latest bootstrap so, show.bs.modal
$('#modal-form-edit').on('show.bs.modal', function(e) {
  var product = $(e.relatedTarget).data('id');
  $("#product_name").val(product);
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<a class="btn btn-warning btn-minier" href="#modal-form-edit" role="button" data-toggle="modal" data-id="Product 1"><i class="icon-edit bigger-120"></i> Edit</a> &nbsp;
<a class="btn btn-warning btn-minier" href="#modal-form-edit" role="button" data-toggle="modal" data-id="Product 2"><i class="icon-edit bigger-120"></i> Edit</a> &nbsp;
<div id="modal-form-edit" class="modal" tabindex="-1">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="blue bigger">Products</h4>
  </div>

  <div class="modal-body overflow-visible">
    <div class="row-fluid">

      <div class="vspace"></div>

      <div class="span7">
        <div class="control-group">
          <label class="control-label" for="form-field-username">Product Name</label>

          <div class="controls">
            <input type="text" name="product_name" placeholder="Product Name" value="" id="product_name" />
          </div>
        </div>
      </div>
      <!--span7-->
    </div>
  </div>
  <!-- modal-body-->
</div>

Upvotes: 4

Related Questions