Simple JQuery UI dialog from link-CodePudding

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">
  <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" class="modal">Click!</a></p>

</body>

</html>

CodePudding user response：

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');
 });
})

CodePudding user response：

<!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.

CodePudding user response：

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>

CodePudding user response：

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