0

I am trying to auto focus on bootstrap modal with php it is it do working fine with the code,

<div class="modal inmodal fade" id="upload_file" tabindex="-1" role="dialog"  aria-hidden="true">
<div class="modal-dialog modal-sm">
    <div class="modal-content animated rotateIn">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Add File</h4>
        </div>
        <form id="my-awesome-dropzone" class="dropzone" action="" enctype="multipart/form-data" method="post">
        <div class="modal-body">

                <input type="text" id="file_name" class="form-control" placeholder="Enter File Name" style="width:100%;" name="file_name"  required="">
                <br/>

            <div class="radio radio-success radio-inline">
            <input type="radio" id="inlineRadio1" value="1" name="can_down" checked="">
            <label for="inlineRadio1"> Open Access </label>
            </div>
            <div class="radio radio-success radio-inline">
            <input type="radio" id="inlineRadio2" value="2" name="can_down">
            <label for="inlineRadio2"> Restricted</label>
            </div>


                <br/>
                <br/>
                <input type="file" class="form-control" placeholder="Enter File Name" style="width:100%;" id="f_n" name="f_n" required=""  onchange="checkFile();">
                <p style="font-size:11px; padding-top:10px; color:red; margin-bottom:-25px; text-align:justified;">
                * Please note that if you restrict access you can able to upload only <strong>pdf, ods, odt</strong> documents and user's can't download the file.
                </p>


        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" id="add_man" name="add_file">Save changes</button>
    </div>
    </form>
    </div>
    </div>
</div>
<script>
 $(document).ready(function(){
    $('#upload_file').on('shown.bs.modal', function() {
      $(this).find('#file_name').focus();
    });
});
</script>

enter image description here

in first part of the image it was working properly but not with the second one i don't where i have made the mistake, both works on the same page with dynamic URL what would be the possible reason for this problem guys

Dave
  • 3,073
  • 7
  • 20
  • 33
Tigris
  • 86
  • 1
  • 10
  • 1
    I don't have a real solution, but I do have some ideas: Can you find where the focus ends up? Or maybe a simple jquery `.delay()` might help? Or: `.focus().delay(500).focus();` (double focus attempt) Something might grab focus after you have set it, for instance the mouse button might still be down. Getting this to work all the time might be tricky. Also see: http://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery – KIKO Software Aug 22 '16 at 09:42
  • thank you, but i tried using everything. – Tigris Aug 22 '16 at 09:45
  • Have you tried waiting for the mouse button to go up before showing the modal? (probably you have...) – KIKO Software Aug 22 '16 at 09:48
  • yes i did, im using animation does it be a problem? and also multiple modals on same page – Tigris Aug 22 '16 at 09:58
  • I don't know, anything might grab focus at any time... it's not something that's easy to control. In my first response I gave you a link to ways to see where the focus is, that can be very useful. – KIKO Software Aug 22 '16 at 10:08
  • Thanks a lot for response, i found the solution what the hell i did was placed some codes before document.ready function :) found that and replaced now its working cool – Tigris Aug 22 '16 at 10:12

0 Answers0