0

I am displaying a wizard form and at some stage have to check whether the entered property_code input value matches any record in the database. This is done via jQuery and AJAX call, which responds with either Valid or Invalid, based on which I may want to stop the user from being able to move to the next page of the wizard.

Now, this feature is supported by the smartwizard() plugin and should work, but there seems to be a jQuery issue when validating the AJAX response. I see the response is Invalid, yet the user can still move on to the next slide, suggesting there is a problem when returning true or false.

// Initialize the leaveStep event
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepIndex, nextStepIndex, stepDirection) {
    // console
    console.log('LeaveStep - CurrentStepIndex: ' + stepIndex);

    // Property Info - checks if property exists before leaving step 1
    if (stepIndex == 1) {

        //check if property code already exists in system
        var property_code = $("#property_code").val();
        console.log('Checking if property code "' + property_code + '" already exists in DB');

        $.ajax({
            type: 'POST',
            url: '../../controllers/hom_check_property_code.php',
            data: 'action=check_property_code&property_code=' + property_code,
            success: function(response) {
                console.log('Property check response: ' + response);

                if (response == 'Invalid') {
                    console.log('Property code check failed');
                    return false;
                } else {
                    console.log('Property code check passed');
                    return true;
                }
            },
            error: function(xhr, status, error) {
                console.log('Ajax POST request failed.');
                console.error(xhr);
            }
        });
    }

    // navigate to next step
    console.log('Navigating from stepIndex ' + stepIndex + ' to ' + nextStepIndex + ', moving in stepDirection ' + stepDirection);
    return true;
});

I am not good with jquery / JS, hence would appreciate if someone could explain me where the problem is? I understand that returning false should stop the remainder of the script from that point onward, so not sure what I am doing wrong here.

Thanks

Armitage2k
  • 1,164
  • 2
  • 27
  • 59
  • 1
    returning a value from the `success` callback is meaningless, those returns do nothing - also the code after `// navigate to next step` is executed before the `$.ajax` even starts, let alone completes - the first `a` in `ajax` means **asynchronous** if that helps – Bravo Feb 09 '22 at 11:11
  • 1
    Your `if (response == 'Invalid') { return false` only returns to the $.ajax success call - it doesn't "return" to your leaveStep event, which will have already returned sometime earlier. – freedomn-m Feb 09 '22 at 11:11
  • 1
    Put another way, the `return` returns to the nearest `function` (or `()=>`) not to the/an outer function. – freedomn-m Feb 09 '22 at 11:16
  • so looking at the suggested answer, the "right" way of doing things would be to call a function when the ajax call is `.done` that in turn triggers what I want the next step to be? – Armitage2k Feb 09 '22 at 11:56
  • @Armitage2k Since the ajax call is asynchronous, you need to cancel the `leaveStep` event by returning false and call `$("#smartwizard")smartWizard("next")` on ajax success call back. Please check the thread here for example https://github.com/techlab/jquery-smartwizard/issues/20#issuecomment-286723131 – Dipu Raj Feb 22 '22 at 15:26

0 Answers0