Question

I am trying to open an overlay on a button click. The button has associated with it an ajax call, which if returns an error should open an overlay, but on success the overlay does not open.

What happens is that the overlay opens regardless of success/error in ajax response. It opens on button click, not on ajax response. What am I missing here???

Here is what I am trying…

//Overlay setup
$('#PostQuestion').overlay({
    target: "#template"
});

//Ajax call setup
$('#PostQuestion').click(function() {
    $.ajax({
        url: '/ask_away',
        dataType: "json",
        data: {question: 'something'},
        type: 'POST',
        cache: false,
        success: function(response) {
            alert("It was a success");
        },
        error: function(request, error) {
            $('#PostQuestion').data('overlay').load();
        }
    });
});

<!-- HTML Here -->
<div id="template">You got an error</div>
<div id="PostQuestion">Ask Question</div>

Answer 1

The reason the overlay is showing regardles of success/error of ajax call is because this:

$('#PostQuestion').overlay({
    target: "#template"
});

basically defines click handler for #PostQuestion div to open an overlay. So once you click PostQuestion div you not only sending the ajax but also showing the overlay (which is as I said result of the code snippet above).

To make it work as desired check the code below. Just one more quick side-note – even if the ajax call return 200 OK, but not a proper json data the error handler will be used, so keep that in mind while developing.

$(function() {
            //Overlay setup
            //select the overlay element in the jQuery selector and not the trigger element
            $("#template").overlay();

            //Ajax call setup
            $('#PostQuestion').click(function() {
                $.ajax({
                    url: '/ask_away',
                    dataType: "json",
                    data: {question: 'something'},
                    type: 'POST',
                    cache: false,
                    success: function(response) {
                        alert("It was a success");
                    },
                    error: function(request, error) {
                        $("#template").data('overlay').load();
                    }
                });
            });
        })