bug in update content ajax

Question

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

enter image description here

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?

@designersvsoft, check it out. – The Alpha Feb 15 '12 at 06:13 — The Alpha, Feb 15 '12 at 06:13

score 1 · Accepted Answer · answered Feb 15 '12 at 06:10

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.

answered Feb 15 '12 at 06:10

The Alpha

143,660
29
287
307

Thanks a lot for your effort heera. I have updated the ajax script in my question with your code. But it doesn't works correctly. Please see my question. – designersvsoft Feb 15 '12 at 06:23
Amazing. you got it. Lots of thanks to you. I am sorry for didn't notice that spelling. Thanks again for your effort. – designersvsoft Feb 15 '12 at 06:31
Welcome dear ! Pleasure is mine too. – The Alpha Feb 15 '12 at 06:32
Do you see this in your console "event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future". – The Alpha Feb 15 '12 at 06:39
If it happens then go to http://stackoverflow.com/questions/7825448/webkit-issues-with-event-layerx-and-event-layery – The Alpha Feb 15 '12 at 06:45
I'm using jquery-1.6.4.min.js. I didn't see any warning yet in all browsers. I couldn't understand what you have meant by console. – designersvsoft Feb 15 '12 at 07:55

bug in update content ajax

1 Answers1