<p>I cannot successfully use most jQuery with Ajax. I'm trying to get the error message from the response to appear in my notification (toast) div, but in addition to <code>.show()</code> and <code>.hide()</code> Nothing I try will work. </p> <p>I've used <code>console.log()</code> to make sure it does decode the response from the url and everything works as expected, but I can't call the function inside the Ajax success function< ;/ p> <p>This is my current JS that fires on button click. </p> <pre class="brush:php;toolbar:false;">function errMsg(code, msg) { const eCode = '<b>E-NS: ' code ' </b> </br>' msg; const eMsg = '<span class="err" style="color: red;">' eCode '</span>'; $('.notify').empty().html(eMsg); } $(document).ready(function() { $('#next-1').click(function(e) { e.preventDefault(); $.ajax({ url:'../data.php', method: 'POST', data: $('#form-1').serializeArray(), dataType: 'JSON', success:function(response){ if(response.status === true){ $('#form-1').hide(); $('#form-2').show(); } else { console.log(response.status); console.log('Response = ' response.code response.error); errMsg(response.code, response.error); var eCode = '<b>E-NS: ' response.code ' </b> </br>' response.error; var eMsg = '<span class="err>' eCode '</span>'; $('.notify').empty().html(eMsg); } } }) }) )}</pre> <p>It is important to note that there are no errors or warnings in php or jQuery. I'm new to AJAX so I'm not entirely sure if this is something I'd be able to do, although it seems logical enough, no? </p>

function errMsg(code, msg) {
    const eCode = 'E-NS: ' + code + '  
' + msg;
    const eMsg = '' + eCode + '';
    
    $('.notify').html(eMsg);
}

$(document).ready(function() {
    $("#form-2").hide();
    $('#next-1').click(function(e) {
        e.preventDefault();
        // console.log("this will be sent to the server:",$('#form-1').serializeArray());
            $.ajax({
                url: 'https://jsonplaceholder.typicode.com/posts', // '../data.php',
                method: 'POST',
                data:  $('#form-1').serializeArray(),
                dataType: 'JSON',
                success:function(response){
                    // console.log("this came back from the server:",response);
                    if(response){
                        $('#form-1').hide();
                        $('#form-2').show();
                        errMsg(response.id, JSON.stringify(response))
                    } else {
                        console.log(response.status);
                        console.log('Response = ' + response.code + response.error);
                        errMsg(response.code, response.error);
                    }
                }
            })
    })
})

.notify {border: 1px solid grey}

First form ... 







OK



Second form ... 







OK


This is the place for messages ...

function errorCheck() {
    if ($('.notify').text().trim().length == 0) {
        $('.notify').hide();
    } else {
        var time =  setTimeout(function() {
                        $('.notify').fadeOut('200');
                    }, 5000);
        $('.notify')
            .show()
            .mouseout(function () {
                time;
            })
            .mouseover(function () {
                clearTimeout(time);
            })
            .click(function() {
                $('.notify').fadeOut('100');
            });
    }
}