Passing Data to a Bootstrap Modal

Passing data to a bootstrap modal

I think you can make this work using jQuery's .on event handler.

Here's a fiddle you can test; just make sure to expand the HTML frame in the fiddle as much as possible so you can view the modal.

http://jsfiddle.net/8c05pn1f/

HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p> </p>

<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
    
<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JAVASCRIPT

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});

Passing Data-id of an Object to Bootstrap Modal form

You were nearly there though you were not targeting the right element in your modal open.

Since you have an a element and button is inside the a which contains the data-id

You need to watch for the eventTarget and then use .find() method to find the button and get the data id from it which will be passed via ajax

var id = button.find('button').data('id') //need to find the button and get id

In addition, you also need an event handler which will click function inside your modal open which will trigger when you click on Delete task button in your modal.

Lastly I have added a modal close option as well which will happen ajax success - I have fixed up your code and is working as intended.

Live Working Demo: (Showing the data-id in console.log and click button working)

$("#deleteTaskModal").on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) //Button that triggered the modal
  var id = button.find('button').data('id') //need to find the button and get id
  var url = '/delete/' + id; //url

  console.log('data-id= ' + id) //15

  //Click delete task in modal
  $(document).on('click', '.delete_task', function() {
    if (confirm('Delete task')) {
      $.ajax({
        url: url,
        type: "DELETE",
        success: function(result) {
          $('#deleteTaskModal').modal('hide') //hide modal on success
          console.log("Deleting task...");
          window.location.href = '/';
        },
        error: function(err) {
          console.log(err);
        }
      })
    }
  })
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<span data-toggle="tooltip" data-placement="bottom" title="Delete task">
    <a data-toggle="modal" data-target="#deleteTaskModal">
        <button class="deleteTask fas fa-trash-alt" data-id='15'></button>
    </a>
</span>

<div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form class="" action="" method="">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <h3>Do you want to delete this task?</h3>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary delete_task">Delete Task</button>
        </div>
      </form>
    </div>
  </div>
</div>
</div>

Pass data attribute to modal bootstrap

You can listen for show.bs.modal event on modal and get the clicked element available as relatedTarget property of the event. Check Bootstrap modal documentation for further reference.

Here is a working example using Bootstrap v4.

$('#my-modal').on('show.bs.modal', function (event) {

  var myVal = $(event.relatedTarget).data('val');

  $(this).find(".modal-body").text(myVal);

});
<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<a href="#" class="my_link" data-val="user1" data-toggle="modal" data-target="#my-modal">Open Modal</a>

<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="my-modal" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">My Modal</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">×</span>

        </button>

      </div>

      <div class="modal-body">

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

      </div>

    </div>

  </div>

</div>

<!-- jQuery, Popper and Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Passing data-id from button to bootstrap modal

I usually use .attr for data-* attributes and it works.

$(this).attr('data-id');

Passing data into a bootstrap modal

You can give custom attribute to your button which will have value which you need pass to backend i.e : data-value="${p.cdPeso}" .Then , you can use show.bs.modal event this will get called whenever your modal shows up then pass the value from button using $(event.target).attr('data-value') to your input-box.

Demo Code :

//will get call when modal will be open
$(document).on('show.bs.modal', '#excluirModal', function(e) {
  //put the value of attr inside input box
  $("input[name=cdPeso]").val($(event.target).attr('data-value'))
  console.log($(event.target).attr('data-value'))
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Data</th>
      <th scope="col">Peso (Kg)</th>
      <th scope="col">Ação</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>
        <fmt:formatDate value="${p.dtDataHoraPeso}" pattern="dd/MM/yyyy" />
      </td>
      <td>something</td>
      <td>
        <c:url value="peso" var="link">
          <c:param name="acao" value="abrir-form-edicao" />
          <c:param name="cdPeso" value="${p.cdPeso}" />
        </c:url>
        <a href="${link}" type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        <!--put `data-value="${p.cdPeso}"` -->
        <button type="button" class="btn btn-danger" aria-label="Left Align" data-toggle="modal" data-target="#excluirModal" data-value="1">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    </button></td>
      <td>1</td>
    </tr>

    <tr>
      <td>
        <fmt:formatDate value="${p.dtDataHoraPeso}" pattern="dd/MM/yyyy" />
      </td>
      <td>something1</td>
      <td>
        <c:url value="peso" var="link">
          <c:param name="acao" value="abrir-form-edicao" />
          <c:param name="cdPeso" value="${p.cdPeso}" />
        </c:url>
        <a href="${link}" type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>

        <button type="button" class="btn btn-danger" aria-label="Left Align" data-toggle="modal" data-target="#excluirModal" data-value="2">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    </button></td>
      <td>2</td>
    </tr>
  </tbody>
</table>
<div class="modal fade" id="excluirModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Confirmação</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
      </div>
      <div class="modal-body">Deseja realmente excluir o registro?</div>
      <div class="modal-footer">
        <form action="peso" method="post">
          <input type="hidden" name="acao" value="excluir"> <input type="text" name="cdPeso" id="cdPesoExcluir">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-danger">Excluir</button>
        </form>
      </div>
    </div>
  </div>
</div>

passing values to bootstrap modal

I think there are some issues with what you can use for attribute names:

http://html5doctor.com/html5-custom-data-attributes/

    $(function() {
        $('#clientStatus').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var client_current_status = button.data('client_current_status');
            var modal = $(this);
            modal.find('#clientCurrentStatus').val(client_current_status);
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Current Status:</p>
              <input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
              <a href="/logout" class="btn btn-primary">Logout</a>
            </div>
          </div>
        </div>
      </div>
<button type = "button" class="btn btn-primary"  data-toggle="modal" data-target="#clientStatus" data-client_current_status="inactive">Change Client Status</button>

Related Topics

Convert String to Title Case With JavaScript

Difference Between Call and Apply

How to Get the Caret Column (Not Pixels) Position in a Textarea, in Characters, from the Start

How to Get the Current Date in JavaScript

Disable/Enable an Input With Jquery

What Is Spreadelement in Ecmascript Documentation? Is It the Same as Spread Syntax At Mdn

How to Do Case Insensitive String Comparison

Elements Order in a "For (… in …)" Loop

Why Would a JavaScript Variable Start With a Dollar Sign

Resizing an Iframe Based on Content

Is There a "Null Coalescing" Operator in JavaScript

JavaScript Raises Syntaxerror With Data Rendered in Jinja Template

How to Get All Properties Values of a JavaScript Object (Without Knowing the Keys)

Call Child Method from Parent

How May I Reference the Script Tag That Loaded the Currently-Executing Script

Is It Safe to Expose Firebase APIkey to the Public

How to Filter Object Array Based on Attributes

Access Java/Servlet/Jsp/Jstl/El Variables in JavaScript


Leave a reply



Submit