Question

When some action is invoked in my page, I make two ajax calls (A, B) to two different methods on my server.
Most of the times each request gets its matching response, but here and there both requests gets the same response! (of one of the requests – A,A or B,B)

The Ajax calls are made using JQuery and the server methods are implemented using Play! framework (in java).

Does anyone have any idea why does it happen and how to resolve it?

Thanks!

Ajax Call A:

var renderTypePreviewPageRoute = jsRoutes.com.eyeview.connectad.controllers.solutions.FeedLibrary.getFeedTypePreviewPage(feedHashId, feedType);

    // Makes an ajax call that gets the rendered solution page
    $.ajax({

        // Sets the route (URL) of the server call
        url:renderTypePreviewPageRoute.url,

        // Sets the method (GET / POST) of the server call
        type:renderTypePreviewPageRoute.method,

        //data:{ hashId: feedHashId, feedType: feedType, withPreview: withPreview }-->

        // In case of success
        success:function(result) {

            var typePreviewElement = $('#typePreviewSection');

            // Set the feed preview section html content to the rendered content got from the server
            typePreviewElement.html(result);

            typePreviewElement.removeClass('hidden');

            $('#feedPreviewGrid tr:eq(1)').removeClass('hidden');

            if ($('#feedPreviewSection').is(':visible')){

                typePreviewElement.show('blind');
            }

            var feedURL = urlEle.val();
            if (waitForFileTypePreview && feedURL != "") {
                feedEditNS.renderFilePreviewSection(true);
            }
        },

        // In case of failure
        error:function(xhr, ajaxOptions, thrownError) {

            // Shows the error message
            showError(xhr.responseText);

            // Clears the preview section
            feedEditNS.clearTypePreviewSection();

            var feedURL = urlEle.val();
            if (waitForFileTypePreview && feedURL != "") {
                feedEditNS.renderFilePreviewSection(true);
            }
        }

Ajax Call B:

var renderFilePreviewPageRoute = jsRoutes.com.eyeview.connectad.controllers.solutions.FeedLibrary.getFeedFilePreviewPage(feedHashId);

    // Makes an ajax call that gets the rendered solution page
    $.ajax({

        // Sets the route (URL) of the server call
        url:renderFilePreviewPageRoute.url,

        // Sets the method (GET / POST) of the server call
        type:renderFilePreviewPageRoute.method,

        // In case of success
        success:function(result) {

            // Set the feed preview section html content to the rendered content got from the server
            $('#filePreviewSection').html(result);

            // Shows the feed preview section
            $('#verticalLine').show('blind');
            $('#leftShadow').show('blind');
            $('#rightShadow').show('blind');
            $('#feedPreviewSection').show('blind');

            feedEditNS.createDataTable(withHeaders);

            waitForFileTypePreview = false;
        },

        // In case of failure
        error:function(xhr, ajaxOptions, thrownError) {

            // Shows the error message
            showError(xhr.responseText);

            // Clears the preview section
            feedEditNS.clearFilePreviewSection();

            waitForFileTypePreview = false;
        }

Answer 1

I could not resolve the problem.
So, I ended up combining both calls to one call to a single server side method.
This method returned a JSON object containing both calls answers.