Question

I am trying to write code for a task form which shows the task and it’s status. This is my form.

If i click the status content a select menu will appear with the three options Completed,In Progressand Waiting for client confirmation. If i select an option and press enter it will be updated in the database. If the status is updated as completed then the select box should not display on the click event. My problem is if i updated the status to complete and then click the same status the select menu appears. But if i modified and refresh the page it works fine. I need it to be correct with out refresh the page.

This is my php code

<?php
            if($fetchstatus == 'Completed'){
            echo 'Completed';
            }
            else{?>
            <span id="status"><?php echo $fetchstatus; ?></span>
            <select id="<?php echo $fetchtaskid; ?>" style="width:110px;">
            <option value="In progress">In progress</option>
            <option value="Completed">Completed</option>
            <option value="Waiting for client confirmation">Waiting for client confirmation</option>
            </select>
            <?php
            }
            ?>

This is my ajax script

$(document).ready(function(){
        var eventFlag=false;
        var originalText='';
        $('.updatetask tr td span#status').click(function(e){
            e.stopImmediatePropagation();
            $(this).siblings().show().focus();
            $(this).hide();
            eventFlag=false;
            originalText=$(this).siblings().val();
        });

        $('.updatetask tr td select').blur(function(e){
            if(!eventFlag && validate($(this))) doAjax($(this));
            else
            {
                $(this).siblings().show();
                $(this).hide();
            }
        });

        $('.updatetask tr td select').keypress(function(e){
            e.stopImmediatePropagation();
            var code = (e.keyCode ? e.keyCode : e.which);
            if(code==13)
            {
                if(validate($(this)))
                {
                    doAjax($(this));
                    eventFlag=true;
                }
                else
                {
                    $(this).siblings().show();
                    $(this).hide();
                }
            }
        });

        function validate(input)
        {
            console.log(input.val()+" "+originalText);
            if(input.val()!='' && input.val()!=originalText)
            return true
            else return false;
        }

        function doAjax(input)
        {
            var formData="proId="+input.attr('id')+"&text="+input.val();
                $.ajax({
                    type: "POST",
                    url: "update_taskstatus.php",
                    data: formData,
                    success: function(data){
                        if(data==1) 
                        {
                            input.siblings().text(input.val()).show();
                            input.hide();
                            if(input.val()=='completed')
                            {
                                input.siblings().unbind('click');
                            }   
                        } 
                        else
                        {
                            input.siblings().show();
                            input.hide();
                            alert("something Wrong !");
                        }   
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert("Error:"+xhr.status+" "+thrownError);
                    }
                });
        }

    });

How can i correct that?

Answer 1

As you’ve changed my code that I gave you yesterday so I’m a little bit confused and not sure whether my current code will work or not but from my guess try this and let me know the result

if(data==1) 
{
    input.siblings().text(input.val()).show();
    input.hide();
    if(input.val()=='Completed')
    {
        input.siblings().unbind('click');
    }   
}

Change the do ajax function, only the first if block, hope it’s clear enough.