Question

117

Passing data to Bootstrap 3 Modal

rated 0 times [ 124] [ 7] / answers: 1 / hits: 46830 / 11 Years ago, sat, december 21, 2013, 12:00:00

I have a table with a bunch of data, and I've placed a button at the end of each row that I want to use to trigger a modal and pass the unique id of that row into the modal.

I found this answer: Passing data to a bootstrap modal

But it doesn't appear to work with Bootstrap 3, and I can't find any data about this anywhere any ideas?

I'm using the same code listed:

Header:

<head>

<meta name=viewport content=width=device-width, initial-scale=1.0>

<link href = bootstrap/css/bootstrap.min.css rel = stylesheet>

<link href = bootstrap/css/styles.css rel = stylesheet>

<script type=text/javascript>

$(document).on(click, .open-AddBookDialog, function () {

var myBookId = $(this).data('id');

$(.modal-body #bookId).val(myBookId);

});

</script>

</head>

Body:

<a data-toggle=modal data-id=ISBN title=Add this item class=open-AddBookDialog btn btn-primary href=#addBookDialog>test</a>

Modal:

<div class=modal 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>

The resulting page will open the modal, but the text field is blank.

I forgot to mention, I do have both jquery and bootstrap loaded:

<script src = http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>

<script src = bootstrap/js/bootstrap.js></script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

leslijessalyng

Add To Favorites

Follow

Total Points: 650

Total Questions: 85

Total Answers: 109

Location: Croatia

Member since Mon, Sep 6, 2021

3 Years ago

leslijessalyng questions

1 Vue dist path for CSS and JS not found

Fri, Feb 21, 20, 00:00, 4 Years ago

1 How do I loop through multiple pages in an API?

Tue, Jul 30, 19, 00:00, 5 Years ago

1 ReactJS and autofocus

Fri, Jul 5, 19, 00:00, 5 Years ago

1 How to fix The message port closed before a response was received. after window.location.reload() in javascript

Wed, Apr 3, 19, 00:00, 5 Years ago

1 TypeError: $ .find is not a function

Wed, Mar 13, 19, 00:00, 5 Years ago

View All

answered 11 Years ago irvingjamieb · Accepted Answer

Try manually triggering the modal, rather than using the data API.

Update the hyperlink like so:

<a data-id=ISBN title=Add this item class=open-AddBookDialog btn btn-primary href=#addBookDialog>test</a>

Then adjust your jQuery code:

$(document).on(click, .open-AddBookDialog, function (e) {



    e.preventDefault();



    var _self = $(this);



    var myBookId = _self.data('id');

    $(#bookId).val(myBookId);



    $(_self.attr('href')).modal('show');

});

Seems to work for me; jsFiddle @ http://jsfiddle.net/4XJ54/