Why is Ajax Success or Failure not being called

I am still writing my first application in MVC and using jquery and Ajax and everytime I figure out something or somebody helps me with an issue in here, I come across something else.

I have a Ajax function which sends the ID of a record to an action which deletes the record and then on success it should reload the table using another function.
but it seemed to be not working until I refreshed the page and noticed the record missing.
When I did it again watching on Firebug and Debug mode in VS I noticed the function got called, then it called the action which completed but when it went back to the function it went to success but jumped over it, then went to failure and jumped over it

Here is the function
  function DeleteDeviation () {
        $.ajax({
                    url: "/Deviations/Delete/" + Recordid, 
                   type: "POST",                   
                   success: function(result) {
                        getRemarks();
                    },
                    failed: function(c) {
                        alert(c.text);
                    }
                });
       
       }

Open in new window

I can't understand why it is not seeing a success. I know I'm probably making a schoolboy mistake but any help would be greatly appreciated again
Niall292Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Is your  getRemarks(); reloading the page or doing a refresh?
0
Niall292Author Commented:
It reloads the table again. This is it.
       function getRemarks() {
            $.ajax({
                type:"GET",
                url:"/Remarks/Index/" + TreeId,
                success: function(content) {
                    $("#content").empty();
                    $("#content").html(content);               
                } 
                              
            }); 
        }

Open in new window

I'm using the exact same idea when I enter new remarks and again call this function and it works perfectly
0
GaryCommented:
Normally for this situation you would just remove the HTML (table row) from the page, if you are reloading the page/code then you are negating the reason for using Ajax in the first place.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Niall292Author Commented:
I thought you might have found something because it should have been calling getDeviations which looks like this:
     function getDeviations() {          
            $.ajax({
                type:"GET",
                url:"/Deviations/Index/" + TreeId,
                success: function(content) {
                    $("#content").empty();
                    $("#content").html(content);
               
                }               
            }); 
        }

Open in new window


but it never actually calls the function at all because that is in the Success and it just jumps over it

I made the change to the other function as well but no change in it's reaction
   function DeleteDeviation () {
        $.ajax({
                    url: "/Deviations/Delete/" + Recordid, 
                   type: "POST",                   
                   success: function(result) {
                        getDeviations();
                    },
                    failed: function(c) {
                        alert(c.text);
                    }
                });
       
       }

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You should be able to update the content id like this
 function DeleteDeviation () {
        $.ajax({
                    url: "/Deviations/Delete/" + Recordid, 
                   type: "POST",                   
                   success: function(result) {
                       // getRemarks();
                        $("#content").html(result);
                    },
                    failed: function(c) {
                        alert(c.text);
                    }
                });
       
       }

Open in new window

0
Niall292Author Commented:
I am not reloading the page. I am using partial views but if you think that is why it is not working I am willing to try anything
0
Niall292Author Commented:
@Cathal,
Sorry it took me a few seconds to digest what you said.
How would I just remove the HTML row.

That sounds like it would a great idea
0
GaryCommented:
I would need to see your HTML and where you are getting the id from.
If you are clicking something in the row to remove it then you can just find the closest TR and remove it or if there is something like a data- attribute identifying the row by the ID then you can use that to remove it
0
Niall292Author Commented:
but then again would you not do that on success which is the problem I came with.

Although I do like your idea (saving me round trips)
0
GaryCommented:
Yes it would be in the success callback
0
Niall292Author Commented:
This is how I am calling the DeleteDeviations Function

<script type="text/javascript" >
    $(document).ready(function() {
        $('.delete-record').click(function() {
            $(this).closest("tr").css("background-color", "#00FFFF");
            Recordid = $(this).closest("tr").data("id");
            if (confirm("Are you sure you want to delete this record")) {
                DeleteDeviation();

            }
            $(this).closest("tr").css("background-color", "white")
        })

    });
</script>

Open in new window

0
Niall292Author Commented:
@Scott,
Scott I only seen your response now and will try it but again I think it will not get called because of the issue with success
0
GaryCommented:
<script type="text/javascript" >
    $(document).ready(function() {
        $('.delete-record').click(function() {
            $(this).closest("tr").css("background-color", "#00FFFF");
            Recordid = $(this).closest("tr").data("id");
            if (confirm("Are you sure you want to delete this record")) {
                DeleteDeviation(Recordid );

            }
            $(this).closest("tr").css("background-color", "white")
        })

    });
</script> 

Open in new window


  function DeleteDeviation (recID) {
        $.ajax({
                    url: "/Deviations/Delete/" + Recordid, 
                   type: "POST",                   
                   success: function(result,recID) {
$("tr").data(recID).remove()
//                      getRemarks();
                    },
                    failed: function(c) {
                        alert(c.text);
                    }
                });
       
       } 

Open in new window

0
Niall292Author Commented:
If it helps, I just looked at firebug and I am getting a 302 Found

and then 500 Internal Server Error
 The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Index(Int32)' in 'MvcRoster.Controllers.DeviationsController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.ArgumentException: The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Index(Int32)' in 'MvcRoster.Controllers.DeviationsController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters

Open in new window

but the ID is passed into the getDeviations
0
Niall292Author Commented:
Can you guys help with what might be causing the 302 error or is there any more info I info I  give to help solve this
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Make sure there is data being passed as the ID.  

Also, is this just sample code?   I would include some type of hash sha or md5.  Not so much for security as I expect you have somebody logged in, but to make sure you are supposed to be deleting.  It would not be so good if the url was hit by mistake with or without the ajax call.

You can do a quick sha hash in either js https://code.google.com/p/crypto-js/ (don't use client side for anything that is really secret).  Or generate a hash on the serverside.   The url might be  /Deviations/Delete/" + Recordid&"/"&key where the key is a hash of at least the recordid and date.  Then on the other end you you are checking that the incoming hash equals the record id and current date (just the date, not time).   You could also include the the user or whatever else.  This would prevent somebody from simply hitting /Deviations/Delete/1233 and deleting something at random.
0
Niall292Author Commented:
This is an intranet site where only certain users can open the website. So I am not really worried also the delete process doesn't really delete it, it marks it as deleted and then gets the windows logon of who deleted it and when.
Although it is all done on partial views the main URL never changes so they would never see Devialtions/Delete/****
0
Niall292Author Commented:
@Scott.
If you look at the getDeviations function it passes  Deviations/Index/ +TreeID
which is the selected ID of the node on the treeview and it is always selected
0
Niall292Author Commented:
I just discovered that the Success is called before the action is executed but the action is executed before the failure so both will be false, now I just need to know how to fix it
0
Niall292Author Commented:
I still am pretty new to MVC, jqery and ajax.
 Am I reading this wrong. I am post to a controller/Action with the line

POST http://localhost:51050/Deviations/Delete/18776

but I am getting an error below that I am missing the id
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Index(Int32)' in 'MvcRoster.Controllers.DeviationsController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.<br>Parameter name: parameters

Open in new window

Is the id not the last part of the link (18776)
0
Chris StanyonWebDevCommented:
Few things I can see. In your original post, you have this code:

function DeleteDeviation () {
   $.ajax({
      url: "/Deviations/Delete/" + Recordid, 
      type: "POST",                   
      success: function(result) {
         getRemarks();
      },
      failed: function(c) {
         alert(c.text);
      }
   });
}

Open in new window

2 things wrong. You're not setting the Recordid variable anywhere, so calling the Delete action would cause your 'null entry' problem. You also try and handle the errors with an argument called failed. This doesn't exist - it should be error
:

error: function(c) {
   alert(c.text);
}

Open in new window

Later on you do pass the RecordID variable into your function, but then refer to it with the wrong name. You pass in recID and then try using Recordid. You then try and assign the status of the AJAX call to the recID variable (!!). Finally you try and remove the row using the data() attribute - again (!!)

function DeleteDeviation (recID) {
   $.ajax({
      url: "/Deviations/Delete/" + Recordid, 
      type: "POST",
      success: function(result,recID) {
         ...

Open in new window

0
Niall292Author Commented:
This is the way my function is at the moment. Is this wrong

    function DeleteDeviation () {
        $.ajax({
                   url: "/Deviations/Delete/" + Recordid, 
                   type: "POST",  
                   datatype: "html",                                                
                   success: function(result) {
                    $("tr").data(Recordid).remove()
                    },
                    failed: function(c) {
                        alert(c.text);
                    }               
                });

Open in new window

0
Chris StanyonWebDevCommented:
Very!

Firstly: The variable called Recordid is never set to anything, so you are calling your Delete method with no arguments.

Secondly: There is no setting in $.ajax() called failed. For error handling you use a setting called error

Thirdly: On error you are trying to alert the text property of the jqXHR object (c.text) - it doesn't have a text property!

Fourthly: You can't call the remove() method on an element like you do. It will error out.

If you want to call the Delete method in a separate function like this, you will need to pass in some information so that the function knows what to delete. The fact that you want to remove the row after the record is deleted, it makes sense to pass the whole row in.

Without seeing your HTML, I can't be exact, but something like this is what you need. Have a good read through it and ask if you don't understand something:

$(document).ready(function() {
	$('.delete-record').click(function(e) {
		//prevent the default behaviour
		e.preventDefault();
		
		if ( confirm("Are you sure you want to delete this record?") ) {
			$thisRow = $(this).closest('tr');
			//call the delete function, with the current row being passed as an argument
			DeleteDeviation( $thisRow );
		};
	});
});
			
function DeleteDeviation( $rowToDelete ) {
	//get the ID from the data-id attribute of the row
	recordID = $rowToDelete.data('id');

	//make the AJAX call
	$.ajax({
		url: "/Deviations/Delete/" + recordID, 
		success: function(response) {
			//we have success from the AJAX call, so lets remove the row
			$rowToDelete.remove();
			//and log the output
			console.log(response);
		},
		error: function(jqXHR, textStatus, errorThrown) {
			//just in case things go pear shaped :)
			alert(textStatus + ' : ' + errorThrown);
		}
	});
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Niall292Author Commented:
@Chris
There is an argument passed by Recordid.
 I'm not at my computer at the moment but will post it tomorrow.
 The delete part does work but the "success or failure are never called in the Ajax function.


Although your code seems a lot cleaner and I will try it tomorrow and definitely let you know how it goes.

Thanks
0
Niall292Author Commented:
I found in one of my comments above where Recordid gets its value
<script type="text/javascript" >
    $(document).ready(function() {
        $('.delete-record').click(function() {
            $(this).closest("tr").css("background-color", "#00FFFF");
            Recordid = $(this).closest("tr").data("id");
            if (confirm("Are you sure you want to delete this record")) {
                DeleteDeviation();

            }
            $(this).closest("tr").css("background-color", "white")
        })

    });
</script>

Open in new window

0
Chris StanyonWebDevCommented:
True. Your Recordid variables does get it's value, but that variable is never passed into the DeleteDeviation() function, so that function is completely unaware of it.

Variables have a 'scope' meaning they only exist in the function they're declared in. Once the function is finished, the variable is destroyed. The exception to this is if you use Global variables, but under normal circumstances, that's considered bad practice. If you need another function to know about your variable, you need to pass it as an argument.

To pass your variable into the function, you call it like this:

DeleteDeviation(Recordid);

You must also make sure your DeleteDeviation() is defined in a way that accepts the variable:

function DeleteDeviation(RecordID) {
   alert (RecordID);
}

Open in new window

Try my code - it will make things a lot easier :)
0
Niall292Author Commented:
Chris,
I copied and pasted your code in and I still get nothing.
I press delete watch it in Firebug it goes through the step reaches Success and jumps over it then goes to error once on error it seems to run the function or something then when it goes back to error it jumps over it as well but if I refresh the page the record is gone just like before.
I know I'm making a schoolboy mistake somewhere but just don't know where
0
Niall292Author Commented:
This is a copy of the error shown in firebug console

"NetworkError: 500 Internal Server Error - http://localhost:51050/Deviations/Delete/9492"

Which doesn't tell you much
0
Chris StanyonWebDevCommented:
OK.  It sounds like the jQuery part of your script is working as it should (it's making the call and handling the response), but the server is generating an error. Unfortunately FireBug only shows what goes on in the browser (the client) and not what goes on with the the server, so you'll need to debug your server code some other way.  

The fact that the record is being deleted from the database tells me that the server script is receiving the Recordid properly and running the delete query, so your error lies somewhere after that part of your server-side script.

That is more likely to be an ASP problem than a jQuery problem though, so if you can't see what's wrong, you'll probably be better off asking a new question about your server-side script in the ASP zones.
0
Niall292Author Commented:
Actually it's throwing an error now:
Exception Details: System.NullReferenceException: Object reference not set to an instance of an object

Open in new window

Here:
Line 39: <% foreach (MvcRoster.Models.DeviationDetails deviation in Model.GetDeviationDetails)

Open in new window


Models is coming back null.
I am wondering would it be taking the id field from Delete and passing it on to the getDeviations function.
Although I thought there wouldn't be a refresh but it seems that is what it is trying to do
0
Niall292Author Commented:
Thanks for your help Chris,
but can you help why is getDeviation being called when it fills the table in the first place and I thought the whole idea of removing the record was to avoid a round trip.
0
Chris StanyonWebDevCommented:
As I said, this is now an ASP issue, not a jQuery one, and unfortunately I don't use ASP.

In theory, all your ASP script needs to do is read the value being passed in (the Record ID) and delete a row from the DB. It would probably make sense to then echo out the result, such as "Record Deleted OK", but it doesn't need to do anything else.

It seems that your script is already running the delete query because when you refresh, the record has gone, so anything after that part of your script seems redundant, and that's where you're getting your error.

If you need specific help on your ASP script, then you should post a new question about it in the ASP zones - you're much more likely to get an answer to the problem.
0
Chris StanyonWebDevCommented:
Niall.

I have no idea why getDeviation is being called - you must be asking for it somewhere in your script. As I said, the Delete script on your server should only delete the record and then echo (output / write) a response ("Done!") - nothing else.
0
Niall292Author Commented:
Ok, well thanks again
0
Niall292Author Commented:
With your help I was able to get a work around but I still have the issue of none of my success or failures (errors) are firing
0
Chris StanyonWebDevCommented:
I think it's time you hired a professional developer - we tried exhaustively to help you out here, but to no avail.

You seem to be trying to go way beyond your scope of understanding, so I would suggest you start your learning process with something straight simple and forward.

If you're going to do any kind of development, then you absolutely must get a handle on some fundamentals, regardless of the programming language you choose. Functions and variables and how they relate is one of the first things you should learn. Without this knowledge, you will fail at every turn - I guarantee it.

As for web development, you really need to understand how the server and client talk to one another, and the limitations of both.

The EE guidelines ask that if you give a grade of anything less than A, that you explain why. Please do that. The reason things aren't working for you is down to your own knowledge, not our answers!
0
Niall292Author Commented:
Chris,
I do half agree with you but if you had read the full question at the start you would have seen I said the record was getting deleted but success or failure was getting jumped over.

I do agree that you gave me a lot of good advice (and thank you) and that is why points were awarded, but I still have the original problem.
That is why it didn't get an A
0
Chris StanyonWebDevCommented:
We've covered this several times already - your server was causing an error so your jQuery should handle that error, but you had no error handler in place. You had a property called 'failed' in your jQuery. That property doesn't exist. It's called 'error', so when your server failed, it had no where to go, which is why it was jumping over everything. That's was your problem (one of them anyway!)
0
Niall292Author Commented:
Chris,
I had tried 'error' at the start then reading other sites I tried failed (which maybe should have been fail) which apparently came out after 1.8
but like I said I definitely learned a lot from this but the original problem did not get fixed.
0
Chris StanyonWebDevCommented:
You're confusing the 'error' property with the fail() method. You tried using a non-existing 'failed' property!

It's very difficult for us to explain how to fix your problem because of some fundamental gaps in your knowledge. We do try out best, but sometimes it's just beyond the scope of understanding of the author. The best we can do there is direct them to some learning resources and hope that the penny drops.

Good luck with it ;)
0
Niall292Author Commented:
Chris,
I appreciate all you guys do and have been helped out quite a few times on this site and it's like I said before I am new to jquery ajax and I admit there are gaps in my knowledge (some possibly very big gaps)
 but Thanks again and I apologise if it seemed your help was not appreciated because it was and if I could change it to an 'A' I would.

Good luck, and if you see any questions from me in the future hopefully you wont ignore them.
0
Chris StanyonWebDevCommented:
I won't ignore them :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.