Addend HTML With HTML Behaviors

426
November 22, 2016, at 5:02 PM

I am appending, using jQuery, a HTML button with a autofocus feature. However, the autofocus feature is not working. I have tired focusing this using jQuery and css. It seems their is a disconnect with the loaded html and appended html but I am not finding good resources on the topic.

var modal = " \
<div id='disable-modal' class='modalDialog'> \
    <div id='modal-container'> \
      <div id='modal-banner'> \
        <a href='#close' title='Close' class='close'>X</a> \
      </div> \
      <h1>Are you sure you want to restore<br>H's homepage?</h1> \
      <button is='x-disable-extension-button' class='yes-button'>Yes</button> \
      <button href='#close' class='no-button' autofocus >No</button> \
    </div> \
 </div>";
$('body').append(modal);
Answer 1

You have an extra line break in the code above that is causing it to not execute. The line between the last button and closing div needs to be removed. If you remove it, it runs fine.

var modal = " \ 
<div id='disable-modal' class='modalDialog'> \ 
    <div id='modal-container'> \ 
      <div id='modal-banner'> \ 
        <a href='#close' title='Close' class='close'>X</a> \ 
      </div> \ 
      <h1>Are you sure you want to restore<br>H's homepage?</h1> \ 
      <button is='x-disable-extension-button' class='yes-button'>Yes</button> \ 
      <button href='#close' class='no-button' autofocus >No</button> \ 
    </div> \ 
 </div>"; 
$('body').append(modal);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

If that is just a typo, than maybe you can manually do it.

$(modal).appendTo("body").find("[autofocus]").focus();
Answer 2

All browsers don't support "autofocus" e.g IE10 doesn't but Chrome or FireFox supports "autofocus". Your code works perfectly in Chrome or FireFox if the modal string is formatted properly. Please test in other browser!

Answer 3

@tymeJV is the correct answer...

var modal = "<div id='disable-modal' class='modalDialog'> "
    + "<div id='modal-container'> "
     + "<div id='modal-banner'> "
        + "<a href='#close' title='Close' class='close'>X</a>"
      + "</div> "
      + "<h1>Are you sure you want to restore<br>H's homepage?</h1> "
      + "<button is='x-disable-extension-button' class='yes-button'>Yes</button> "
      + "<button href='#close' class='no-button' autofocus >No</button> "
    + "</div>"
 + "</div>";
$('body').append(modal);
$('#close').focus();
Rent Charter Buses Company
READ ALSO
Pressing any keyboard buttons removes hash url

Pressing any keyboard buttons removes hash url

I have found a bug on a website I am maintaining. What happens is if you click any button on the keyboard, the hash url gets removed and the browser jumps to the top of the page.

324
Change an existing js method without changing the original js

Change an existing js method without changing the original js

I have a class that gets created (testClass for this purpose). The class has the following method inside of it:.

279
Play autoplay looping HTML5 video from start on click and then back to autoplay looping on pause

Play autoplay looping HTML5 video from start on click and then back to autoplay looping on pause

I have an autoplay looping HTML5 video that I need to play from the beginning of the video on first click and then when clicked again to pause have it go back to autoplay looping and then repeat those functions. Here is what I have so far.

307
All ng-clicks inside modal stop working after awhile

All ng-clicks inside modal stop working after awhile

I have a peculiar problem that I'm having a tough time making sense of. I have a modal that opens when a user wants to attach media to a post on my site.

348