I have a modal with id="<%= p.id %>" (the id of the post that is in the modal). I want to do something with the content of the modal when it is open (and I need to do this in the.js file). But how can I get id from the opened modal into javascript?

I have tried with the javascript code under, but it does not work. Any suggestions?

_singlePost.html.erb

<a class="fg" href="#<%= p.id %>" data-toggle="modal">
    <div id="withJosefin">
        <%= p.title %>
    </div>
</a>

<div id="<%= p.id %>" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <p><h3 id="myModalLabel"><%= p.title %></h3></p>
    </div>
    <div class="modal-body">
        <%= raw(p.link) %>
    </div>
</div>

pages.js.coffee

$ ->
  if ('div.modal.hide.in').is(":visible")
    currentId = $('.modal.fade.in').attr('id')
    //Do something with currentId here

I have a modal with id="<%= p.id %>" (the id of the post that is in the modal). I want to do something with the content of the modal when it is open (and I need to do this in the.js file). But how can I get id from the opened modal into javascript?

I have tried with the javascript code under, but it does not work. Any suggestions?

_singlePost.html.erb

<a class="fg" href="#<%= p.id %>" data-toggle="modal">
    <div id="withJosefin">
        <%= p.title %>
    </div>
</a>

<div id="<%= p.id %>" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <p><h3 id="myModalLabel"><%= p.title %></h3></p>
    </div>
    <div class="modal-body">
        <%= raw(p.link) %>
    </div>
</div>

pages.js.coffee

$ ->
  if ('div.modal.hide.in').is(":visible")
    currentId = $('.modal.fade.in').attr('id')
    //Do something with currentId here

• javascript
• jquery
• ruby-on-rails
• twitter-bootstrap
• coffeescript

• I cannot see any jquery code here – A. Wolff Commented May 28, 2013 at 10:23
• @roasted - it's coffeecrap sprinkled with jQuery ! – adeneo Commented May 28, 2013 at 10:25
• Isn't it enough: currentId = $('.modal.fade.in').attr('id') without 'if' testing for visible. As i understand it, bootstrap add class 'in' for opened modal, no? – A. Wolff Commented May 28, 2013 at 10:27
• @roasted: I think currentId = $('.modal.fade.in').attr('id') will work, but I need to trigger it when an modal is open. So I think I need an if statement...(but the one I have written over does not work.) – allegutta Commented May 28, 2013 at 10:33

1 Answer 1

Found this in the documentation:

You can create a callback when the modal is shown like this:

$('#myModal').on('shown', function () {
  // do something…
})

In your case you would have this:

//Somewhere in the beginning of your coffeescript/javascript before the modal is opened by the user.

//CoffeeScript
$("div.modal.hide").on "shown", ->
    id = $(this).attr('id')
    //Do whatever you want with the id

//javascript
$('div.modal.hide').on('shown', function(){
    var id = $(this).attr('id');
    //Do whatever you want with the id
});

Hope that helps