Question

178

jQuery dialog: How to use?

rated 0 times [ 181] [ 3] / answers: 1 / hits: 10343 / 11 Years ago, tue, january 14, 2014, 12:00:00

I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.

<!DOCTYPE html>

<html lang=en>

<head>

  <title>Test Dialog</title>

  <script src=//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>

</head>

<body>

  <p><a href=javascript:void(null); onclick=showDialog();>Open</a></p>



  <div id=dialog-modal title=Basic modal dialog style=display: none;></div>



  <script type=text/javascript>

    function showDialog()

    {

      $(#dialog-modal).dialog(

      {

        width: 600,

        height: 400,

        open: function(event, ui)

        {

          var textarea = $('<textarea style=height: 276px;>');

          $(textarea).redactor({

              focus: true,

              autoresize: false,

              initCallback: function()

              {

                  this.set('<p>Lorem...</p>');

              }

          });

        }

      });

    }

  </script>

</body>

</html>

The dialog appears after adding jquery-ui and css, but Lorem... does not show.

One more thing... Is it possible to pass a string to showDialog such that it can show different content based on different link? For example, adding Open 1 and Open 2 to show different string?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

clarkulisesa

Add To Favorites

Follow

Total Points: 422

Total Questions: 93

Total Answers: 112

Location: Austria

Member since Thu, Jan 7, 2021

3 Years ago

clarkulisesa questions

1 Google BigQuery Error: Syntax error: Illegal input character %

Fri, Sep 18, 20, 00:00, 4 Years ago

1 how to change state of a react component from another component

Mon, Jun 22, 20, 00:00, 4 Years ago

1 How to compare objects using lodash regardless on their order

Tue, Jun 16, 20, 00:00, 4 Years ago

1 How to listen sortChange(event) on Angular for ag-Grid?

Mon, Feb 24, 20, 00:00, 4 Years ago

1 Vue JS provide/inject and Props

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 11 Years ago demondp · Accepted Answer

I think, you forgot to add jquery UI.

<!DOCTYPE html>

<html lang=en>

<head>

  <title>Test Dialog</title>

  <script src=//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>

  <script src=path_to_jq_ui></script>



</head>

<body>

  <p><a href=javascript:void(null); onclick=showDialog('Lorem ipsum dolor');>Open</a></p>



  <div id=dialog-modal title=Basic modal dialog style=display: none;></div>



  <script type=text/javascript>

    function showDialog(text)

    {

      $(#dialog-modal).html(text)

      $(#dialog-modal).dialog(

      {

        width: 600,

        height: 400,

        open: function(event, ui)

        {

          var textarea = $('<textarea style=height: 276px;>');

          $(textarea).redactor({

              focus: true,

              autoresize: false,

              initCallback: function()

              {

                  this.set('<p>Lorem...</p>');

              }

          });

        }

      });

    }

  </script>

</body>

</html>

Here is working fiddle: http://jsfiddle.net/bY3F4/3/

Download JqueryUI from here

Edit: Dynamic dialog content added to code