Hope this is not a stupid question but I am running out of ideas... So i have this modal :

1.scala.html

<div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div>


<div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body-conf-role-menu">
          <script type="text/javascript">
            $(function(){
               $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)");
            });
          </script>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

And with the script from my modal body, I try to load this page :

2.scala.html

    @(id:String, idenv:String)
    @Main("Add area") {
    <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST">

                        First Name: 
                        <input type="text" name="first_name" id="first" class="form-control">
                        Last Name : 
                        <input name="last_name" class="form-control">


<script type="text/javascript">

$( document ).ready(function() {
// Handler for .ready() called.
     $( "#first" ).focus(function() {
         alert( "Handler for .focus() called." );
     });

  });
    </script>
    </form>
 }

The page it is loaded ok. I see it in my modal ... The problem is that the scripts from my page 2.scala.html won't work. I do not understand why... they work if I try them outside from the page I try to load inside my modal ....

Hope this is not a stupid question but I am running out of ideas... So i have this modal :

1.scala.html

<div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div>


<div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body-conf-role-menu">
          <script type="text/javascript">
            $(function(){
               $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)");
            });
          </script>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

And with the script from my modal body, I try to load this page :

2.scala.html

    @(id:String, idenv:String)
    @Main("Add area") {
    <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST">

                        First Name: 
                        <input type="text" name="first_name" id="first" class="form-control">
                        Last Name : 
                        <input name="last_name" class="form-control">


<script type="text/javascript">

$( document ).ready(function() {
// Handler for .ready() called.
     $( "#first" ).focus(function() {
         alert( "Handler for .focus() called." );
     });

  });
    </script>
    </form>
 }

The page it is loaded ok. I see it in my modal ... The problem is that the scripts from my page 2.scala.html won't work. I do not understand why... they work if I try them outside from the page I try to load inside my modal ....

• javascript
• twitter-bootstrap
• playframework
• modal-dialog
• load

• 1 For a better practice, actually modal content you load with a http request should not contain any javascript. It should only return the hmtl code. Your main page should manage that javascript logic. But in this current approach you're using, i guess changing "$( document ).ready" to "$(function() {}) should resolve the issue.. – Noldor Commented Mar 23, 2015 at 11:19
• $(function() {}) - I tryed that too ... not good. You are probably right in the first place. Thank you. – flori Commented Mar 23, 2015 at 19:17

3 Answers 3

$( document ).ready(function(){}); will never be reached inside a modal because this event was already triggered when you loaded the page (the modal is loaded after that...)

Try insert your scripts directly, like this:

<script type="text/javascript">
    $( "#first" ).focus(function() {
        alert( "Handler for .focus() called." );
    });
</script>

shown.bs.modal event will fire when bootstrap modal pops up. Here's example.

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Full documentation.
https://getbootstrap./docs/4.0/ponents/modal/

Try This I have All Ready this function

$('#myModal').on('shown.bs.modal', function () {
    // Your script here
});

$(document).on('shown.bs.modal', '#myModal', function () {
    // Your script here
});