Question

I am working on a MVC project that is supposed to have one page only, with two zones. On one zone I have a Google Map with markers, and the second zone is populated with the selected marker’s details.

The details view has a button that when clicked should change the entire view into edit mode without refreshing the page or redirecting it. I have used two views, for details and edit and with the help of ajaxForm function I am switching back and forth between these two views. I’m adding the ajaxForm on documentready for edit view.

<script type="text/javascript"> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#currentDiv').ajaxForm(function(data) { 
            $('#currentDiv').html(data);
        }); 
    }); 
</script> 

The problem appears when on server-side an error appears while trying to save data from edit view and I want to return to the same edit view with the errors displayed. The ajaxForm handler is not added any more and even if the new values that will try to be saved are ok, the detail view is loaded in another page.

Unfortunately, the use of ajaxForm creates some other problems because I don’t have control over the cases when the ajax call fails.

Any ideas on how could I fix this? Is it some other solution to switch between those two views without using ajaxForm and without refreshing the page?

Answer 1

I think there are a couple of different questions that you are asking.

First off, you add jquery handlers to deal with the case when you get a 500 type error from the server.

Something like the following. I suggest taking a look at the docs for more info.

$(document).ajaxError(function(event,jqXHR,ajaxSettings,thrownError){
   if (jqXHR.status != 0){
         window.location = <error page>
    }
}

The second problem seems to stem around error handling of known errors (say invalid input). In this case I suggest the following workflow.

1) User clicks on edit button, taken to edit screen
2) User enters in data, use client side validation to do initial check
3) User submits, user is then taken to the view screen and is shown a
success or error message.

The server response could look like:

public ActionResult Edit(EditModel model){
   if (!ModelState.IsValid)
   {
     return Json(new {successful = false, message = "Failed.."});
   }
   ...
}

On the client side, your form callback should now handle the message and the fact it was successful or not. In my implementation, I used knockoutjs to create a “message” area that I could update and clear. (I created templates, etc).

Remember to use client side validation for the easy field validation stuff…. This will save a trip back to the server.

Yours could be quite simple, by popping up the message returned from the server.

Lastly, document ready only fires when the original document is done loading, never again for an ajax call (at least that is my understanding). Just put that code that is the document.ready at the bottom of the edit page. It will fire after the html it is targeting has already been rendered.

Hope that helps!