JQuery AJAX with dialog call

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).

Since `feedbackWrapper` and `feedbackInner` are already jQuery objects, you don't need to wrap them in `$(...)`. — Barmar, Jul 12 '14 at 10:37
See http://stackoverflow.com/questions/22213495/jquery-post-done-and-success for your question about the different callbacks. — Barmar, Jul 12 '14 at 10:44

score 0 · Answer 1 · answered Jul 12 '14 at 10:46

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.

Doesn't work I'm afraid - or not in this case I should say. There are no conflicting flags - this is the only dialog call. In fact, it's pretty much all the JS there is. — Eamonn, Jul 12 '14 at 11:15

JQuery AJAX with dialog call

1 Answers1