Home/ Questions/Q 6366807
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:28:07+00:00

I am using AJAX extensively and my PHP based notification system was not sufficient.

  • 0

I am using AJAX extensively and my PHP based notification system was not sufficient.

I have this function:

<script>
function user_notify($string, $class){
if($class == null){
    $class = 'error';
}


$('<div class="' + $class + '"><div class="notification-text">' + $string + '</div></div>').hide().appendTo('#system-notifications').fadeIn('slow');
}

function DeleteTask(SpanName, TaskId){
if (confirm("Are you sure you want to delete this task?")) {
    var curDateTime = new Date(); //For IE
    var status = document.getElementById('status');
    var poststr = "uniqueID=" + curDateTime.getTime() ;
    var SpanName = SpanName; 
    if(SpanName == 'project_todos_complete'){
        var showCompleted = 1;
    } else {
        var showCompleted = 0;
    }
    //alert (SpanName);
    makePOSTRequest('http://*****webdesigns.com/project_manager/include/ajax/global.php?action=delete_task&showCompleted=' + showCompleted + '&id=' + TaskId, poststr, SpanName);
}

if(ajax_status == 4){
    user_notify('Task deleted.', 'success');
    ajax_status = null;
}
}
</script>

I have a global javascript variable that holds the readyState. If 4 is a response from the server, we can assume the AJAX was successful (I know, not neccessarily the cgi/php is execute if any). So I store that, and within the function that called the AJAX post, if the readyState is 4, I call the user_notify function.

It works beautifully with one exception: the first action that should trigger a notification does not. All consecutive actions successfully generate a message. It’s not a specific action that doesn’t work, just the first one.

The html:

<body> 

<div id="system-notifications"></div> 

<div class="wrapper">...</div>

What am I missing here?

UPDATE:

I am in the process of moving legacy javascript/Ajax calls to jQuery/Ajax. Everything works except one aspect: the targeted div does not ‘refresh’ with the return data from the .ajax jQuery call. The notification pops up (the first time and all consecutive times), the php executes (refreshing the page verfies this), but the div does not update with the html that the PHP script generates.

$('form#addToDoForm').submit(function(){

    var project_id = $('#addToDoForm input[name=project_id]');
    var assigned_id = $('#addToDoForm input[name=assigned_user_id]');
    var description = $('#addToDoForm textarea[name=description]');
    var responsible_id = $('#addToDoForm input[name=responsible_user_id :selected]');
    alert(responsible_id.val());
    return false;
    var due = $('#addToDoForm input[name=due]');

    var result_div = 'project_todos_' + project_id;
    var query_string = 'action=add_to_do&id=' + project_id;
    var ajax_url = 'http://avwebdesigns.com/basecamp/include/ajax/global.php?' + query_string;
    var successMessage = '<b>' + description.val() + '</b> added.';

    var data = 
        'project_id=' + project_id.val() + 
        '&assigned_user_id=' + assigned_id.val() + 
        '&responsible_user_id=' + responsible_id.val() + 
        '&description=' + encodeURIComponent(description.val()) + 
        '&due='  + encodeURIComponent(due.val()); // encodeURIComponent()


    $.ajax({
        type: 'POST',
        url: ajax_url,
        data: data,
        cache: false,
        success: function(data){
            $('#'+result_div).html(data); // $('#'+result_div).html(data.returnValue);

            user_notify(successMessage, 'success');
        },
        error:function(data){
            $('#'+result_div).html(data);

            user_notify(failureMessage, 'error');
        }
    });

    return false;
});

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are missing the non-blocking characteristics of an AJAX call probably. I can’t really tell what makePOSTRequest does, but judging from your design I assume you expect it to be synchronous where it probably is not. Due to the asynchronous nature of an AJAX call, you need to pass a callback function to the call that is called when the AJAX request completes.

    What probably happens in your case is that makePOSTRequest immediately returns and because the first request hasn’t finished yet, ajax_status will not be 4 yet. Then, by the time the second request is sent, your first will have completed and your global variable will have been set to 4, so this time it works and this is also the cause why it works in all subsequent attempts.

    This shows another flaw in your design: it’s actually a very bad idea to capture the status of an AJAX request in a global variable. These requests are potentially sent in a concurrent fashion so you would have several requests that share one and the same variable – this calls for a ‘race condition’. Have a look at the examples in the Ajax section of the jQuery documentation to see how to handle this correctly with the help of a callback function.

    • 0