CODEWITHSUNDEEP
jquery-ui
Michiel
Michiel

Reputation: 8103

Open dialog with JQuery UI

I would like to open a JQuery UI dialog when a user clicks on a link. So far I have this 

<script>
    //to hide the dialog box on loading
    $j(function() {
        $j( "#dialog" ).hide();
    });

    $('.button').click(function(){
        $('#dialog').dialog('open');
    });
</script>

<div id="dialog" title="Basic dialog">
    <p>Dialog box</p>
</div>

<a href="#" class="button">The button</a>

But the dialog won't open by clicking the link... Everything is included well.

EDIT

<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
    var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"></script>

Upvotes: 0

Views: 62763

Answers (5)

Prashanth
Prashanth

Reputation: 34

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind", 
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <form action="" method="post"> 
    Name  :- <input type="text" name="name" value="">
    Email :-<input type="email" name="email" value="">
<div id="test" class="loader"></div>

Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
    
  </form>
</div>

<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
$( "#test" ).hide();

function myfuncation()
  {
alert("hai");
      // Here is your ajax request to db related work.
$( "#test" ).show();
      //var ajaxresponce = "Sucessfully Insert Form";
      //$('#dialog-message').html(ajaxresponce);
     // $( "#dialog-message" ).dialog();

  }
</script>

Upvotes: 0

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

You can use this code for your purpose.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind", 
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <form action="" method="post"> 
    Name  :- <input type="text" name="name" value="">
    Email :-<input type="email" name="email" value="">
    Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
  </form>
</div>

<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>

</body>
</html>
<script type="text/javascript">
  function myfuncation()
  {

      // Here is your ajax request to db related work.

      var ajaxresponce = "Sucessfully Insert Form";
      $('#dialog-message').html(ajaxresponce);
      $( "#dialog-message" ).dialog();

  }
</script>

Hope it helps you. Please let me know if you have any query.

Upvotes: 2

Belabu
Belabu

Reputation: 31

Notification dialog function like alert().

function msgbox(text,buttontext) {
    buttontext = buttontext || "OK"
    $( "<div>" + text + "</div>" ).dialog({
      dialogClass: "no-close",
      buttons: [
        {
          text: buttontext,
          click: function() {
            $( this ).dialog( "close" );
            $(this).remove();
          }
        }
      ]
    });
}

call function

msgbox("test dialog");

or

msgbox("test dialog", "I agree");

Upvotes: 1

aknosis
aknosis

Reputation: 4348

Your problem is you are trying to access the dialogs open method even though you never created the dialog instance.

Just change your code to do:

$('#dialog').dialog()

If you read the docs: http://jqueryui.com/demos/dialog/, it spells that out for you, you will also see that it opens by default on the initial call.

Upvotes: 1

David Spence
David Spence

Reputation: 8079

Are you referencing jQuery and jQuery ui library? You can autohide when initializing:

$("#dialog").dialog({ autoOpen: false });


$('.button').click(function() {
    $('#dialog').dialog('open');
});

Demo: http://jsfiddle.net/pxQ8j/

Upvotes: 16

Related Questions