Recommendation for simple jquery dialog example?

Asked 23/7, 2014 at 17:38 Answered 11/6, 2015 at 17:8

Searching all over for the keywords "simple jquery dialog example" - with all the answers out there, I have not seen any simple and meaningful example in a succinct standalone .html document . Even downloading several full books on jQuery, I didn't see any such an example.

The examples I did find are for a dialog that shows an alert message "Hello World" .. not very useful for interaction. I think the real world example would be something that captures input and sends it back to the page without requiring to post back to the server. The server post can be a subsequent step.

Can anyone recommend a code reference along these lines? Thanks

EDIT #3

I have pasted in a solution with a fresh post below. It is a completely self-contained file, with ready-to-go includes. It's working for me.

EDIT #2

I updated the head block to contain the missing css. The dialog content is now not being shown, but still the dialog box is not opening .. and no errors in console.

                <style>
                #dialog {
                        display:none;
                    }
                </style>

EDIT ~ ATTEMPT #1

Based on the answer from @rob-schmuecker , I tried the following code below. I see it work on jsFiddle, but my implementation is not working. In my browser the console doesn't show any errors. But there are two problems I'm seeing:

dialog-box div content loads directly into the page
clicking the load dialog button doesn't work

Any idea what is wrong with this code? .. is it perhaps my jquery include calls?

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>

      <script type="text/javascript">

      //Initialize dialog

      $("#dialog").dialog({
          autoOpen: false,
          show: {
              effect: "blind",
              duration: 1000
          },
          hide: {
              effect: "explode",
              duration: 1000
          }
      });

      //Open it when #opener is clicked
      $("#opener").click(function () {
          $("#dialog").dialog("open");
      });

      //When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
      $('.formSaver').on('click', function () {
          $('.myTarget').text($('.myInput').val());
          $("#dialog").dialog('close');
      });

      </script>

                <style>
                #dialog {
                        display:none;
                    }
                </style>

    </head>
    <body>

    <div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>

    <div id="dialog" title="Basic dialog">
        <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
        <input class="myInput" type="text" />
        <button class="formSaver">Save me!</button>
    </div>

    <button id="opener">Open Dialog</button>

    </body>
    </html>

Tempo answered 23/7, 2014 at 17:38 Comment(6)

jqueryui.com/dialog/#modal-form is exactly what you are asking for. – Tosha 23/7, 2014 at 17:40

Do you mean prompt()? – Gag 23/7, 2014 at 17:40

jsfiddle.net/robertrozas/VzJe8/112 – Pickar 23/7, 2014 at 17:45

#hanlet-escaño, #robert-rozas, #rob-schmuecker - all of those are good examples and I like seeing the various ways it can be approached .. thanks very much! And knowing code examples for these type of questions can be found directly on the jqueryui.com site is very helpful. – Tempo 23/7, 2014 at 17:59

Given that I see 3 correct answers, I’m not sure which to mark correct .. because I wouldn’t want to dissuade others from any of those solutions, each looks 100% to me. I know I can only mark #rob-schmuecker correct, but still .. I think you see what I mean in this case. Any suggestions on best-practice here? – Tempo 23/7, 2014 at 17:59

Found one more good example out there: java2s.com/Code/JavaScript/jQuery/… – Tempo 23/7, 2014 at 17:59

I appreciate everyones' answers - and I saw them all work online in JsFiddle and jqueryui.com. For what I was going after, so far as I can tell, here's the most concise solution I was able to get going, using all remote includes and based on the solution at java2s.com:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">

    <script type="text/javascript">
    $(function() {

        // Allows user to click Enter key in text field and it will submit the dialog
        $('#myDialog').keypress(function(e) {
            if (e.keyCode == $.ui.keyCode.ENTER) {
                getResponse();
            }
        });

        var cancel = function() {
            $("#myDialog").dialog("close");
        }

        var getResponse = function() {
            var answer;
            /*// for radio-button selection
            $("input").each(function(){
              (this.checked == true) ? answer = $(this).val() : null;
            });
             */

            answer = $("#first_name").val();

            // This adds it dynamically
            // $("<p>").text(answer).insertAfter($("#poll"));
            $("#result").text(answer);
            $("#myDialog").dialog("close");
        }

        var dialogOpts = {
            modal : true,
            closeOnEscape : true,
            buttons : {
                "Done" : getResponse,
                "Cancel" : cancel
            },
            autoOpen : false
        };
        $("#myDialog").dialog(dialogOpts);
        $("#poll").click(function() {
            $("#myDialog").dialog("open");
        });
    });
    </script>

</head>
<body>
    <button id="poll">Poll</button>
    <div id="myDialog" class="flora" title="This is the title">
      <p>Question?</p>
      <label for="yes">Yes!</label><input type="radio" id="yes" value="yes25" name="question"><br>
      <label for="no">No!</label><input type="radio" id="no" value="no" name="question">
      <br/>
      First Name: <input type="text" id="first_name" />

    </div>

    <div style='color: green;' id='result'>
    </div>

</body>
</html>

Tempo answered 23/7, 2014 at 19:4 Comment(0)

OK Here goes

Demo:http://jsfiddle.net/robschmuecker/9z2ag/1/

HTML:

<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>

<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <input class="myInput" type="text" />
    <button class="formSaver">Save me!</button>
</div>

<button id="opener">Open Dialog</button>

Dialog starts off hidden with CSS:

#dialog {
    display:none;
}

Then we do some Javascript:

//Initialize dialog
$("#dialog").dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    }
});

//Open it when #opener is clicked
$("#opener").click(function () {
    $("#dialog").dialog("open");
});

//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$('.formSaver').on('click', function () {
    $('.myTarget').text($('.myInput').val());
    $("#dialog").dialog('close');
});

Toner answered 23/7, 2014 at 17:48 Comment(4)

Hi @rob-schmuecker , actually this is the most concise example so far I think. As mentioned above .. to recap here: I tried the code you suggested, but it is not working. In my browser the console doesn't show any errors. But there are two problems I'm seeing - dialog content loads directly into the page, and clicking the load dialog button doesn't work. I see it work on jsFiddle - Any idea what is wrong with my implementation? Thanks – Tempo 23/7, 2014 at 18:30

You need to set the CSS for the correct dialog ID so it doesn't show when the page first loads. You also need to make sure that you are including jQuery in the head tag of your page. – Toner 23/7, 2014 at 18:45

@RobSchmuecker, autoOpen:false automatically hides the dialog. You don't need the display:hidden;. – Verily 14/6, 2015 at 22:51

@TricksfortheWeb try other browser and not just chrome, its correct Rob.. Thanks! – Earmark 27/12, 2016 at 13:1

The reason it isn't working is because your calls to jQuery and jQuery UI are like this:

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

But the URL to load it from is:

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

Put in the correct URL and it will work.

ADDITION:

The problem is in your second call to jQuery:

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js

Besides for the fact that the jQuery is loaded from https, there is no jquery.js, it is jquery.min.js.

Verily answered 11/6, 2015 at 17:8 Comment(2)

I tried your suggestion to use https in the header script urls for the code under "EDIT ~ ATTEMPT #1" .. and although I agree I should use the https, that didn't fix the issue.. still no pop-up. Were you able to make that code work by just adding https? – Tempo 12/6, 2015 at 15:52

in my fiddle, it works, although for some reason, the jquery ui stylesheet is not loaded. But the dialog is working as it should otherwise. – Verily 12/6, 2015 at 19:50

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">

    <script type="text/javascript">
    $(function() {

        // Allows user to click Enter key in text field and it will submit the dialog
        $('#myDialog').keypress(function(e) {
            if (e.keyCode == $.ui.keyCode.ENTER) {
                getResponse();
            }
        });

        var cancel = function() {
            $("#myDialog").dialog("close");
        }

        var getResponse = function() {
            var answer;
            /*// for radio-button selection
            $("input").each(function(){
              (this.checked == true) ? answer = $(this).val() : null;
            });
             */

            answer = $("#first_name").val();

            // This adds it dynamically
            // $("<p>").text(answer).insertAfter($("#poll"));
            $("#result").text(answer);
            $("#myDialog").dialog("close");
        }

        var dialogOpts = {
            modal : true,
            closeOnEscape : true,
            buttons : {
                "Done" : getResponse,
                "Cancel" : cancel
            },
            autoOpen : false
        };
        $("#myDialog").dialog(dialogOpts);
        $("#poll").click(function() {
            $("#myDialog").dialog("open");
        });
    });
    </script>

</head>
<body>
    <button id="poll">Poll</button>
    <div id="myDialog" class="flora" title="This is the title">
      <p>Question?</p>
      <label for="yes">Yes!</label><input type="radio" id="yes" value="yes25" name="question"><br>
      <label for="no">No!</label><input type="radio" id="no" value="no" name="question">
      <br/>
      First Name: <input type="text" id="first_name" />

    </div>

    <div style='color: green;' id='result'>
    </div>

</body>
</html>

Tempo answered 23/7, 2014 at 19:4 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags