Exception message to UI

Question

I open a jQuery dialog, in this box I do a save/cancel. To Save, I call my controller, make some validation, save or throw Exception (MyPersonalException). If there is exception, I return an another View (the "MessageError" view) to display in the popup. I just want to see in the modal box the message available in "MyPersonalException"

My questions : 1. That's work but only with Firefox not IE not Chrome 2. Is there an other way because that's look a lof of code to just diplay a message.

The controller look like this :

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SaveOrUpdate(Guid id, string firstName, string LastName)
{
    try
    {
        Employee employee = new Employee() { Id = id, FirstName = firstName, LastName = LastName };
        _employeeService.SaveOrUpdate(employee);
        return Index();
    }
    catch (MyPersonalException ex)
    {
        _model.ErrorMessage = ex.Message;
        return View("MessageError", _model);

    }
    catch (Exception ex)
    {
        _model.ErrorMessage = ex.Message;
        return View("MessageError", _model);
    }
}

To call the dialog box, I use this code

jQuery(document).ready(function() { $(function() { /* var name = $("#firstName"), email = $("#lastName"), password = $("#isActive"), allFields = $([]).add(name).add(email).add(password), tips = $("#validateTips");*/

    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        modal: true,
        buttons: {
            Save: function() {
                $.ajax({
                    type: "POST",
                    url: "/Employee/SaveOrUpdate",
                    data: {
                        id: getId(),
                        firstName: getFirstName(),
                        lastName: getLastName()
                    },
                    success: function(data) {
                        if (jqueryShowResult(data))
                            $("#DisplayError").html(data);
                        else {
                            employeeId = 0;
                            $(this).dialog('close');                               
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                    }
                })

            },
            Cancel: function() {
                employeeId = 0;
                $(this).dialog('close');
            }
        },
        close: function() {
            $("#gridEmpoyee").trigger("reloadGrid");
        },
        open: function() {
            $.ajax({
                type: "POST",
                url: "/Employee/GetEmployee",
                data: {
                    id: employeeId
                },
                success: function(data) {
                    $("#employeeDetail").html(data);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                }
            })
        }
    });
});

});

The jQueryShowResult

<script type="text/javascript">
    jqueryShowResult = function(msg) {
        var browser;
        try //Internet Explorer
                    {
            xmlDocTest = new ActiveXObject("Microsoft.XMLDOM");
            browser = "IE";
        }
        catch (e) {
            browser = "FF";
        }

        if (browser == "IE") {
            try {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.loadXML(msg);
                var message = xmlDoc.getElementsByTagName("message")[0].childNodes[0].nodeValue;
                var code = xmlDoc.getElementsByTagName("code")[0].childNodes[0].nodeValue;

                return false;
            }
            catch (e) {
                return true;
            }
        }
        else {

            var code = $(msg).find('code').text();
            var message = $(msg).find('message').text();
            if (code == "500") {
                return false;
            }
            else {
                return true;
            }
        }
    }; 
 </script>

I updated the answer below, this should allow you to do what you want without customizing the jQuery ajax object at all. — Nick Craver
– Nick Craver, Commented Jan 16, 2010 at 20:47

Nick Craver · Accepted Answer · 2010-01-18 15:22:03Z

2

Update: Sorry, we use a custom wrapper. jQuery by default does not include the xmlHttpRequest in success. Below is another approach, this works without changing your view at all. You're basically just checking for the element with id='code' in the response, if it exists, display the error.

success: function(data, textStatus) {
  if ($("#code",data).length) { //See if the element <whatever id='code'> exists
    $("#DisplayError").html(data);
  } else {
    employeeId = 0;
    $(this).dialog('close');                               
  }
},

Here's the jQuery 1.4 Version (See changes here, note the Success callback receives XHR object as third argument):

First, set the StatusCode to 210 in your view context.HttpContext.Response.StatusCode = 210;, then use this callback format:

success: function(data, textStatus, xhr) {
  if (xhr.status == 210) {
    $("#DisplayError").html(data);
  } else {
    employeeId = 0;
    $(this).dialog('close');                               
  }
},

edited Jan 18, 2010 at 15:22

answered Jan 16, 2010 at 13:30

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

TheBoubou Over a year ago

Then I still have to use the "jqueryShowResult" ? IS it working on FF, IE, Chrome ?

Nick Craver Over a year ago

No need for jQueryShowResult with this solution, it should work in all browsers, you're simply looking for an element with id='code' strictly within the ajax result, that's what the ,data does on the selector.

TheBoubou Over a year ago

May be you can give us your customer wrapper :)

Nick Craver Over a year ago

Actually you won't need it...this isn't an uncommon need and was added for jQuery 1.4: api.jquery.com/jQuery.ajax When you change from 1.3.2 to 1.4 you can use the previous method I posted, click on the link beside edited to see the previous answer and go that route.

Nick Craver Over a year ago

@Kris-I Answer is updated to include both, check out the jQuery changes link I included to see other 1.4 stuff, including a short description of the success callback change.

Collectives™ on Stack Overflow

Exception message to UI

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related