jQuery checking if Ajax request response equals to specific value does nothing

I’m using jQuery and Ajax to send my form data over to a PHP script and that all works well. But when I’m trying to check the response value of the Ajax request to determine which SweetAlert text I need to show the user things start not functioning. When checking if the response is equal to “success” a SweetAlert modal should pop up but nothing happens but in the browser console I can clearly see that the only response from the server is “success”. However if any of the else if statements are true (meaning the server sent that response that it’s looking for) then SweetAlert works just fine. I have used this response checking system for months and it has worked perfectly but a day ago it just stopped working and I didn’t update or change anything related to SweetAlert and jQuery. My code:

$("#createIncidentBtn").click(function(e) { //Kui uue intsidendi loomis nuppu vajutatakse, siis
    e.preventDefault();
    $("#createIncidentBtn").val('Please wait...'); //Muudab uuendamis nupu teksti
    message = simplemde.value();
    $.ajax({
        url: '/status/main/php/dashboard-process.php',
        method: 'POST',
        data: $("#new_incident_form").serialize()+'&action=new_incident'+'&message='+simplemde.value(),
        success:function(response) {
            $("#createIncidentBtn").val('Create Incident'); //Muudab intsidendi loomis nupu teksti
            console.log(response); //The response from the server is "success" (without the quotes)
            if(response === 'success') { //This if statement does not work
                Swal.fire({
                    title: 'New Incident successfully created!', //Näitab modali, mis ütleb, et informatsiooni uuendati edukalt
                    icon: 'success',
                    type: 'success'
                });
            } else if(response === 'No title or message') { //This else if statement works
                Swal.fire({
                    title: 'You forgot to enter a title or message!', //Näitab modali, mis ütleb, et informatsiooni uuendati edukalt
                    icon: 'error',
                    type: 'error'
                });
            } else if(response === 'Invalid incident status') { //This else if statement also works
                Swal.fire({
                    title: 'The incident status you have selected is invalid', //Näitab modali, mis ütleb, et informatsiooni uuendati edukalt
                    icon: 'error',
                    type: 'error'
                });
            }
        }
    });
});

What’s weird is that when I change the first if statement to this: if(response.includes('success')) { then it works perfectly and a SweetAlert modal shows up. But the thing is that my PHP script is not outputting anything else besides “success” as I can see in the browser console. I also checked if any of my other pages are having this issue and they are all having the same issue all of a sudden and I have not changed anything on the other pages. But I have confirmed that SweetAlert works without the if statement.

Thanks for any help, Nimetu.

Answer

This issue has now been resolved. It was caused by a trailing whitespace. I did not find out why the script randomly started outputting a random trailing whitespace even without any echo statement. It even did this in parts of the code that had not been edited in months. But if you are using Visual Studio Code then this shortcut will delete all trailing whitespaces: Ctrl K + Ctrl X. Which resolved my issue.

Advertisement

Answer