jQuery AJAX与对话框调用

Question

There are a couple of points I was hoping for assistance on. I have the following code, by which I make a ajax call on page load, and either retrieve data successfully or handle any resulting error.

I am running JQuery 2.0.0, with JQuery UI 1.10.2 (PHPStorm seems to have trouble recognising later versions).

Relevant HTML:

<script type="text/javascript" src="inc/JQuery-2.0.0.js"></script>
<script type="text/javascript" src="inc/JQuery-UI-1.10.2.js"></script>
<script type="text/javascript" src="inc/core.js"></script>

...

    <div id="feedback-dialog">
        <div id="dialog-inner"><!-- dynamic content --></div>
    </div>
</body>

Javascript:

var engine = 'engine.php',
    feedbackWrapper = $('#feedback-dialog'),
    feedbackInner = $('#dialog-inner');

function ftShowErrorMessage(e)
{
    var error = e.toString(),
        errorWrapper = $('<p id="error-message"/>');

    $(errorWrapper).text(error);

    $(feedbackInner).empty();
    $(feedbackInner).append(errorWrapper);

    $(feedbackWrapper).dialog({
        title: 'An Error Occurred',
        dialogClass: 'feedback-error',
        buttons: [
            {
                'OK' : function() {
                    //do stuff
                    $(this).dialog('close');
                }
            }
        ]
    });
}

$(document).ready(function()
{
    (function(){

        var args = {};
        args.Request = 'get country ids with county options';

        $.ajax({
            type:   'POST',
            url:    engine,
            data:   args
        })
            .done(function(data)
            {
                try
                {
                    var obj = JSON.parse(data);
                    if(!obj.hasOwnProperty('error'))
                    {
                        //continue
                    }
                    else
                    {
                        ftShowErrorMessage(obj.error);
                    }
                }
                catch(e)
                {
                    ftShowErrorMessage(e)
                }
            })
            .error(function( xhr, ajaxOptions, thrownError )
            {
                ftShowErrorMessage(thrownError)
            });

    })();
});

My aim here is to catch when the AJAX call cannot make a successful call, or returns a non-parse-able string, or returns an error flag within a successful call (signalling an error from the PHP script).

My first problem is that the dialog call just won't fire - no error or warning given. This is the case even when I tie it to a simple click event. If anyone can point out where this is failing, I'd be grateful (the wrapping function is being called, and I can pass and echo content to and from it - it just fails at the dialog call).

Secondly, can someone clarify for me the difference between the ajax success , done , and complete functions, and between error and fail ( fail does not seem to be recognised by the IDE, although it appears in the docs, but that's probably a separate problem).

Answer 1

I'm not sure why your dialog isn't displaying, maybe this will work:

$(feedbackWrapper).dialog({
    title: 'An Error Occurred',
    dialogClass: 'feedback-error',
    buttons: [
        {
            'OK' : function() {
                //do stuff
                $(this).dialog('close');
            }
        }
    ]
}).dialog("open");

I'm not sure why this would be needed, since autoOpen: true is the default. But if you've already closed the dialog from a previous error, I think you need to open it explicitly the next time.