jQuery AJAX request demo

by txhi

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="output">waiting for action</div>

<button id="success">success</button>
<button id="error">error</button>
<button id="common">common container</button>

<div id="jqxNotificationSuccess">Success notification</div>
<div id="jqxNotificationError">Error notification</div>
<div id="jqxNotification">Common Container</div>

JavaScript

// handles the click event, sends the query
function getSuccessOutput() {
    $.ajax({
        url:'/echo/js/?js=hello%20world!',
        complete: function (response) {
            $('#output').html('Success!');
            //DO something On success
            $("#jqxNotificationSuccess").jqxNotification("open");
            $("#jqxNotification").jqxNotification({ template: "success" });
            $("#jqxNotification").jqxNotification("open");
        },
        error: function () {
            $('#output').html('error');
        },
    });
    return false;
}
// handles the click event, sends the query
function getFailOutput() {
    $.ajax({
        url:'myAjax.php',
        success: function (response) {
            $('#output').html('on some way it succes');
        },
        error: function () {
            $('#output').html('Error!');
            //DO something On error
            $("#jqxNotificationError").jqxNotification("open");
            $("#jqxNotification").jqxNotification({ template: "error" });
            $("#jqxNotification").jqxNotification("open");
        },
    });
    return false;
}

$("#jqxNotification").jqxNotification({
    width: "auto",
    position: "top-left",
    opacity: 0.9,
    autoOpen: false,
    autoClose: true,
    browserBoundsOffset: 70,
    template: "info"
});

$("#jqxNotificationSuccess").jqxNotification({
    width: "auto",
    position: "top-left",
    opacity: 0.9,
    autoOpen: false,
    autoClose: true,
    browserBoundsOffset: 70,
    template: "success"
});

$("#jqxNotificationError").jqxNotification({
    width: "auto",
    position: "top-left",
    opacity: 0.9,
    autoOpen: false,
    autoClose: true,
    browserBoundsOffset: 70,
    template: "error"
});

var theme = 'energyblue';
$("#error").jqxButton({ theme: theme });
$("#error").click(function () {
		console.log('error');
		getFailOutput();
});

$("#success").jqxButton({ theme: theme });
$("#success").click(function ()...