CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmodal-dialogparameter-passing
Sandro
Sandro

Reputation: 37

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

I have a table. In a cell of the table there is a link like this: <a data-toggle="modal" data-id="xyz" href="#remoteModal" data-target="#remoteModal">SOME_TEXT</a>.

When I click on this link should open a modal. Here's an example:

<div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="remoteModal" aria-hidden="true">
  Some HTML/PHP Code
</div>

The modal must perform some operations that depend on the value of "data-id" attribute. To be precise, in the javascript code I need to read this value:

<script type="text/javascript">
$(document).ready(function ( ) {
    $('#remoteModal').on('show.bs.modal', function( event ) {
        console.log( /* How do I read the value of data-id? */ );
    });
});

I do not know how to read the value of this attribute in the javascript code of the modal.

Many thanks for your interest.

Upvotes: 3

Views: 7775

Answers (3)

cvrebert
cvrebert

Reputation: 9289

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'));
    });
});

Upvotes: 7

prakashstar42
prakashstar42

Reputation: 687

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

So here in data-id you wll get your "XYZ"

Upvotes: 0

user3154370
user3154370

Reputation: 

//Global Variable
value = '';

$('[href = #remoteModal]').click(function(event){
        event.preventDefault();
        value = $(this).data("id");
        $('#remoteModal').show();
});

And I think you can access to value variable everywhere in this page

Upvotes: 0

Related Questions