3

Here's my situation: I have a form with a bunch of input boxes that are meant to take input from user and upon a click of 'save' button save the inputs to a database. I also have 'action' buttons that do something based on the saved inputs.

What I'm trying to do is this: let's say the user updates an input, but instead of clicking the 'save' buttons, the user clicks the 'action' button. I want the 'action' button to trigger a check of what's saved vs what's input and alert the user of the unsaved inputs and highlight those inputs. I wouldn't want an automatic 'save' as it's possible that the user got too excited, leaned on the keyboard and changed something that should have been changed; hence the preference for the alert.

When I set my ajax that fetches info from the database to synchronous, everything works perfectly. Here's how I implemented that:

function checkForSavedInputs() {
    var savedInput=true;
    $.ajax({
        url: URL,
        type: 'get',
        dataType: 'json',
        async: false,
        beforeSend: function () {
        },
        complete: function () {
        },
        success: function (json) {
            $.each(json, function (key, value) {
                    // check and highlight the inputs that are not saved
                    savedInput = false;
                }
            });
        },
        error: function (xhr, ajaxOptions, thrownError) {
        }
    });
    return savedInput;
}

So the 'action' button function, calls the boolean function checkForSavedInputs() and only when true is returned, the 'action' takes place.

Since the synchronous calls have been deprecated, I'm trying to rewrite this function to basically work the same, but this time with an asynchronous call... and this is where I'm stuck. I can get it as far as highlighting the unsaved inputs, but the problem is the timing of the true/false return.

what would be a good approach to solve for it?

jmargolisvt
  • 5,722
  • 4
  • 29
  • 46
ScorpionFiko
  • 43
  • 2
  • I'm not sure I follow. By removing `async: false`, what gets broken? – Brennan Sep 04 '15 at 17:51
  • 2
    The problem is checkForSavedInputs cannot return anything based on the ajax, so whereever it is used will be affected by the asynchronous nature of its processing. You need to show more context of the code, where that function is used. – Oli Beatson Sep 04 '15 at 17:52
  • @OliverB: Here's the context. I have a function that's attached to a 'action' button. The action button gets the true/false to determine the subsequent course of action - something like this: `$('input[id=\'action\'].on('click', function(){ if (!checkForSavedInputs()) { //alert user } else { // do something }); } });` So if I make the checkForSavedInputs asynchronous, I don't get the true/false returned in time – ScorpionFiko Sep 04 '15 at 19:41
  • 1
    SOLVED: my function was doing two things at once, which was the root cause of the problem. Based on the link provided, I was able to split the work and make it work. – ScorpionFiko Sep 04 '15 at 20:29

0 Answers0