Show a dialog with jQuery?

Asked

Viewed 207 times

0

I have the following html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
    <body>
        <dialog id="my-dialog"></dialog>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#my-dialog').showModal();
            });
        </script>
    </body>
</html>

I can open the dialog with the following javascript:

document.getElementById("my-dialog").showModal();

But I couldn’t find a way to open the modal using jQuery, I’ve tried this:

$('#my-dialog').showModal();

But the following error returns to me: 

Uncaught TypeError: $(...).showModal is not a function

There is a way to open a dialog using jQuery?

jquery html5 dialog

  • Looks like you didn’t put Jquey’s library before the code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  • I have already imported the jQuery library before my javascript code. I even use some functions without any problem of the library before I try to open the dialog

2 answers

1


Hello,

Every jQuery call returns a collection of objects, even if the search is for ID that must always return 1 element, it will return a collection of 1 jQuery element.

Your first example (document.getElementById("my-dialog").showModal();), you do a DOM search with Javascript, which returns 1 Javascript element and calls the method showModal.

Your second example ($('#my-dialog').showModal();), you do a DOM search with jQuery, which returns a collection of jQuery elements and tries to call the method showModal in this collection of jQuery elements, however, in this case this method does not exist in jQuery objects, thus returning the error.

Two possible solutions at first:

First possible solution

Access the first Javascript element that is "inside" the jQuery collection, since its search is for ID and should always return 1 element. You can do this like an Array even:

$('#my-dialog')[0].showModal();

In this case, if your selector does not return elements (the ID does not exist in the DOM for example) this code will return error, because the position "0" will not exist, since the collection will be empty. This case can be handled by something like this:

if($('#my-dialog').length > 0) {
    $('#my-dialog')[0].showModal();
}

Second possible solution

Create this "method" in jQuery.

In accordance with the documentation:

(function( $ ){
   $.fn.showModal = function() {
      this[0].showModal();
      return this;
   }; 
})( jQuery );

And you can do:

$('#my-dialog').showModal();

  • Thank you so much it solved my problem.

0

Via javascript you can try $('#my-dialog').modal('show');.

Look that answer if you need.

Browser other questions tagged jquery html5 dialog

You are not signed in. Login or sign up in order to post.