How to make a pop up appear after pressing a button using JQuery UI

Navigation
0

I made a form with the JQuery accordion and at the end a send button. After pressing the button should appear a pop up message, but it is giving error. My pop up appears when the page starts and this button is kind of useless because pop up should come later. Who can help me? 

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script> <!---  jQuery UI “Submit” button --->
        $( function() {
            $( ".widget input[type=submit], .widget a, .widget button" ).button();
            $( "button, input, a" ).click( function( event ) {
                event.preventDefault();
            });
        });
    </script>
    <!---  jQuery UI Dialog message --->
    <script>
        $( function() {
            $( "#dialog" ).dialog();
        });
    </script>


            <div class="widget">
                <input type="Submit" value="Submit"/>
            </div>
            <div id="dialog" title="Order Complete">
                    <p>Your order has been placed.</p>
            </div>
    
asked by anonymous 02.05.2017 / 20:03

2 answers

0

When using $( function() { , you are executing the statement at the ready time of the page and not when the button is clicked. 

$( function() {
    $( "#dialog" ).dialog();
});

Here's the function for your problem: 

$(document).ready(function(){
    $("#submit").on("click", function(){
        $("#dialog").dialog();
    });
});
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<div>
  <input id="submit" type="submit" value="submit"/>
</div>

<div id="dialog" title="Basic dialog" style="display:none;">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
    
02.05.2017 / 22:16
0

The problem is that you do not call the function to show your popup in the button action. Try something like: 

<script> <!---  jQuery UI “Submit” button --->
        $( function() {
            $( ".widget input[type=submit], .widget a, .widget button" ).button();
            $("#submit" ).click( function( event ) {
                event.preventDefault();
                $( "#dialog" ).dialog();
            });
        });
    </script>
    
02.05.2017 / 22:09
Convert NVARCHAR to NUMERICO Replace html components with javascript