How to Pass Value into Href Link of a Bootstrap Modal

How to pass value into href link of a Bootstrap Modal?

Use the following lines of code inside your script tag and this should work fine.

$('#scrapModal .btn-danger').on('click', function (e) {
  e.preventDefault()
  alert(e.target.pathname + e.target.search)
})

pass id to a tag href in modal(bootstrap)

So do something like

<a type="button" id="down" data-href="<?php echo base_url(); ?>/aprove/download/">Berkas</a>

and read the data attribute

var anchor = modal.find('#down')
anchor.attr('href', anchor.data('href') + div.data('id'));

Pass data to modal from other url

You are already using the *data attributes in your html page. All you have to do is to add few more data-* id's according to your need to pass the data from your parent html page to the popup page.

For eg,

Considering your case you can pass the name and description to your modal like this,

<a href="v?PageId=frmGroupGeneral" data-toggle="modal" data-name="YOUR_NAME_VALUE" data-description="YOUR_DESCRIPTION" data-target="#editGroup">EDIT</a>

And in your modal you can retrieve the passed in parameters as,

 var nameValue = $(this).data('name');
 var descriptionValue = $(this).data('description');

To set the retrieved value to any field in model you can simply do,

 $(".modal-body #textareaName").val(nameValue);
 $(".modal-body #textareaDescription").val(descriptionValue);

Hope this helps!

How to pass variables to a modal from a link

I think you should render all of your modals at the bottom of the page and use jQuery to to load the modal associated to the link.

e.g.

<button type="button" class="btn btn-info btn-lg" id="myBtn1">Open Modal 1</button>

Then bind bootstraps .modal() function to the button's click event with jQuery. This is where you can set which modal to load eg.

$("#myBtn1").click(function(){
    $("#myModal1").modal();
});

Please run my code snippet which I have modified from w3 schools documentation

<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body>
<div class="container">  <h2>Activate multiple Modal with JavaScript</h2>  <!-- Trigger the modal with a button -->  <button type="button" class="btn btn-info btn-lg" id="myBtn1">Open Modal 1</button>  <button type="button" class="btn btn-success btn-lg" id="myBtn2">Open Modal 2</button>
  <!-- Modal -->  <div class="modal fade" id="myModal1" role="dialog">    <div class="modal-dialog">          <!-- Modal content-->      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">×</button>          <h4 class="modal-title">Look its modal one</h4>        </div>        <div class="modal-body">          <p>Some text in the modal.</p>        </div>        <div class="modal-footer">          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        </div>      </div>          </div>  </div>    <div class="modal fade" id="myModal2" role="dialog">    <div class="modal-dialog">          <!-- Modal content-->      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">×</button>          <h4 class="modal-title">look its modal 2</h4>        </div>        <div class="modal-body">          <p>Some text in the modal.</p>        </div>        <div class="modal-footer">          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        </div>      </div>          </div>  </div>  </div>
<script>$(document).ready(function(){    $("#myBtn1").click(function(){        $("#myModal1").modal();    });    $("#myBtn2").click(function(){        $("#myModal2").modal();    });});</script>
</body></html>

How to pass a parameter from a link element to a modal window?

Use the .relatedTarget property mentioned in the Modal Event docs:

$(document).ready(function () {
    $('#remoteModal').on('show.bs.modal', function (event) {
        console.log($(event.relatedTarget).attr('data-id'));
    });
});

How to Pass Value into Href Link of a Bootstrap Modal