0

I am implementing Ajax using jQuery. In my code I have tried to change the content of a <p> element with id #newpara in the .fail{} function.

.fail(function (jqXHR, textStatus) {
    ('#newpara').text("Request Failed"); alert("fail");
}

Also I have tried to change the content of <p> with id #newpara in the complete section

complete: function () { 
    alert("Request complete"); 
    $('#newpara').text("Request complete.");

In HTML <body> I have 

<p id="newpara">Old Text</p>

But I find that the the content of paragraph tag is changed temporarily when the execution point hits these functions. (I get to know this because the text in the paragraph changes from 'Old Text' to 'Request Complete' when I see the alert.) Once the request is complete the content of paragraph is back to its original state which is 'Old Text'.

Complete ajax code for reference:

            $.ajax({
                url: "Home/Action1",
                type: "post",
                success:function(results){
                    alert(results+" :: status");
                },
                dataType: "json",
                contentType:"application/json; charset=utf-8",
                data: JSON.stringify({
                    Title: $('#Title').val(),
                    Content: $('#Content').val()
                }),
                complete: function () { alert("Article Saved"); $('#newpara').text("Hello this is new one"); alert('breakpoint'); },
                beforeSend: function (xhr) {
                    xhr.overrideMimeType("text/plain; charset=x-user-defined");
                }


            })
   .done(function (data) {
       if (console && console.log) {
           console.log("Sample of data::", data.slice(0, 100));

       }
             alert("Saved!");

   }
    )
            .fail(function (jqXHR, textStatus) {
                $('#newpara').text("Hello this is after failed");
                alert("Request failed:: " + textStatus);

            });

        }
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
rakesh
  • 1
  • 1
  • 2
  • Possible duplicate of [Difference between .success() and .complete()?](http://stackoverflow.com/questions/5240876/difference-between-success-and-complete) – Victor Levin Jan 06 '16 at 18:47

2 Answers2

0

If you want to contrast success vs fail and show different message use success() instead of complete. Complete will always fire upon request completion regardless of whether the request failed or succeeded: Difference between .success() and .complete()?

Community
  • 1
  • 1
Victor Levin
  • 1,167
  • 6
  • 11
  • Thanks for your response, but I want to know why the change in the

    elelment is momentary/temporary? The content of

    changes back to what it was once the request completes and I do not want that. I want a permanent change.

     – rakesh Jan 06 '16 at 19:05
  • Please describe what `p` element had before. Please post complete ajax code so I can see better. – Victor Levin Jan 06 '16 at 19:08
0

Step by step...

  • On .fail() You set the text of #newpara
  • On .complete() You set the text of #newpara

.complete() is always triggered succeded or failed xhr.

So...

// .fail()

You first set $('#newpara').text('Hello this is after failed');

And then...

// .complete()

You override with $('#newpara').text('Hello this is new one'); and causes the temporary change

Sebastian
  • 345
  • 2
  • 8
  • Yes but the text "Hello this is new one" should persist. But its not so. After the request is complete the text of the

    element becomes "Old Text" which was its previous value , at the time I had declared it in html. //

    Old Text

     – rakesh Jan 07 '16 at 03:36