Jquery delay() is not working as expected

Asked Jul 31 '15 at 14:05

Active Jul 31 '15 at 14:18

Viewed 70 times

I am submitting my form with jQuery using an AJAX request. After successfully submitting the form I want to show a success message for 3 seconds and then I want to hide this success message. To do that I am using following code using the jQuery delay() method.

But somehow this delay() method is not working as I expect it to. It's immediately showing the message and then hiding the message.

I want to show the message for 3 second then it should be hidden. Can you please tell me why it's not working?

function upload_project_doc(element, event) {
    e = $(element);
    event.preventDefault();
    $('#up_project_doc_img').show();
    var formData = new FormData(e.parents('form')[0]);

    $.ajax({
        url: 'up_project_doc.php',
        type: 'POST',
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function (data) {
            $("#project_up_result").html(data);
            $('#project_up_result').show();
            $('#project_up_result').delay(3000).fadeOut('slow');
            $('#up_project_doc_img').hide();
            getProjectForm(<? php echo $p_id; ?>);
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
}

My form is little bit big but it's look like that :

<td align="left" width="160">
  <button class="search_submit" onclick="upload_project_doc(this,event);">
    <b>Upload</b>
  </button>
</td>

edited Jul 31 '15 at 14:18

Dave Newton

158,873
26
254
302

asked Jul 31 '15 at 14:05

Shibbir

1,963
2
25
48

1

Try `$('#project_up_result').show().delay(3000).fadeOut('slow');` – artm Jul 31 '15 at 14:08
@artm I am trying it. – Shibbir Jul 31 '15 at 14:09
@atm it's not working as expected. – Shibbir Jul 31 '15 at 14:10
2

@artm this is exactly same behaviour as OP's code – A. Wolff Jul 31 '15 at 14:12
Provide relevant HTML markup in question itself. BTW, are you submiting the FORM? If the FORM is submited, the page is refreshed/redirected (depending action attribute) – A. Wolff Jul 31 '15 at 14:13
Does this work? http://stackoverflow.com/questions/4508644/how-can-i-use-delay-with-show-and-hide-in-jquery `.show(0)` – artm Jul 31 '15 at 14:13
@artm issue isn't in this part of code `$('#project_up_result').show(); $('#project_up_result').delay(3000).fadeOut('slow');` – A. Wolff Jul 31 '15 at 14:14
@Wolff I updated my question, Please check it. – Shibbir Jul 31 '15 at 14:16
@Wolff yes I am submitting the FORM with jquery /. ajax method. – Shibbir Jul 31 '15 at 14:17
1

You are delaying the fade out and immediately after that hiding it. Remove this line of code $('#up_project_doc_img').hide(); and it should work for you. – King Size Jul 31 '15 at 14:19
@KingSize I am trying it. – Shibbir Jul 31 '15 at 14:20
@KingSize not working because It's different id to hide my animated image. – Shibbir Jul 31 '15 at 14:21
@KingSize It could be it if element is ancestor of other one but OP just posted minimum as HTML markup, so **we** have now to ask again if he can post relevant HTML markup... Or better, a jsFiddle replicating issue. BTW, what is `getProjectForm()`??? – A. Wolff Jul 31 '15 at 14:22
Do these 2 ids have anykind of parent-child relationship? – King Size Jul 31 '15 at 14:22
Alternatively, you may also try using setTimeout – King Size Jul 31 '15 at 14:23
@KingSize no there is no parent-child relationship. – Shibbir Jul 31 '15 at 14:23
Some markup of how your form looks like on success would help. – King Size Jul 31 '15 at 14:25
post the html for the id's in question – Hugh Jul 31 '15 at 14:25
@KingSize if it's possible can you see my full code via TV or Skype ? – Shibbir Jul 31 '15 at 14:29

Jquery delay() is not working as expected

0 Answers0