Simple JQuery UI dialog from link

I have been experimenting with this for a couple of hours and I remain confused.

I am attempting to open a JQuery UI dialog (modal) when a link ([a] tag) is clicked, getting the content of the dialog window from the href of the link.

So far I have (gleaned from various places) where testb.html is a simple html fragment:

<div><p>Some text</p><p>more text</p</div>

The idea is that when anchor (link) is click the content of testb.html appears in the dialog.

Why doesn’t this work???

David (70-year-old pre-Alzheimers ex-programmer with little HTML experience)s

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" rel="nofollow noreferrer noopener">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script>
    $("a.modal").click(function(e) {
      e.preventDefault();
      $(".container").load(this.href).dialog("open");
    });
  </script>
</head>

<body>

  <div class="container"></div>
  <p><a href="testb.html" rel="nofollow noreferrer noopener" class="modal">Click!</a></p>

</body>

</html>

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

you can use this code:

    <!doctype html>
    <html lang="en">
    
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    </head>
    
    <body>
    
        <div class="container">
        <p><a href="javascript:void(0)" data-get="testb.html" class="modal">Click!</a></p>
</div>
        <div id="dialog" title="Basic dialog"></div>
        
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    
        <script>
            $('.modal').on('click', function () {
                var data = $(this).attr('data-get')
                $('#dialog').html(data)
                $("#dialog").dialog()
            });
        </script>
    </body>
    
    </html>

Method 2

You run the assignment before the element exists on the page. Wrap it in a load handler

$(function() { // on page load
  $("a.modal").click(function(e) {
    e.preventDefault();
    $(".container").load(this.href) 
  });
})

You cannot open the container as a dialog the way you try it. You need something like

$(function() { // on page load
  $(".container").dialog({
   autoOpen: false,
   width: 750,
   modal: true
 });

 $("a.modal").click(function(e) {
   e.preventDefault();
   $(".container").load(this.href) 
   $(".container").dialog('open');
 });
})

Method 3

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#modal" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#modal" ).dialog( "open" );
            });
         });
      </script>
</head>

<body>

  <div id="modal">This my first jQuery UI Dialog!</div>
  <p><a href="#" id="opener">Click!</a></p>

</body>

</html>

This opens a jquery dialog modal when the anchor tag is clicked.

Method 4

Combining bits from the previous answers, I got this, which works!

<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>

<body>

    <p><a href="testb.html" class="modal">Click!</a></p>
    <div id="dialog" title="Basic dialog"></div>
    
    <script>
        $('.modal').on('click', function (e) {
            e.preventDefault();
            $('#dialog').load(this.href)
            $("#dialog").dialog()
        });
    </script>
</body>

</html>

With codeangler’s answer, the dialog appeared,but didn’t have the content of testb.html, instead had the content of the div.
With mplungjan’s answer… Well, I couldn’t get it to work.
With Sepehr Pourjozi’s answer, the dialog appeared but contained the literal text “testb.html”, not the content of testb.html.

Taking hints from all three answers, I got it to work. And now I understand JQuery dialogs a little bit better.

Thanks, all.

David

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating