jQuery Dialog not working for me ..?

Question

Trying to use jQuery dialogs, but they don't seem to load :(

HTML:

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

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

Javascript:

function showDialog()
{
    alert('Alert not showing');
    $("#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>');
                }
            });
        }
     });
}

http://jsfiddle.net/GsFSc/

Another example:

http://jsfiddle.net/khSxK/

What's the problem here ?

Answer 1

<p><a href="javascript:showDialog();">Open</a></p>

Answer 2

First of all you have to include jQuery UI for dialog to work. In JSfiddle you have to include your functions in head. But better yet use jQuery's click().

Working fiddle

Answer 3

1. you need jQuery UI along with up to date legacy jQuery
2. better use the .click(...) from jQuery : http://jsfiddle.net/techunter/Kat7G/

Answer 4

Your version of jQuery is too low and you need to add jQuery UI for dialog to work, and i'd suggest not to use inline scripting. Use on() like this.

$('a').on('click',function(){
showDialog();
});

Demo here