Reputation: 4802

JSON Post invoking error function

I have this jquery post call which somehow is invoking the error function even though it enters the data into database perfectly fine.

<script type="text/javascript">
    $(document).ready(function () {
        $("#ExtMailCreate").click(function () {
            var url = '@Url.Action("Create")';
            var data = JSON.stringify(SaveExternalMail());
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $("#result").append("pass");
                },
                error: function (data) {
                    $("#result").append("error");
                }
            });
        });
    });

    function SaveExternalMail() {
        var costcentrecode = $("#CostCentreCode").val();
        var day = $("#ExtMailDatePicker").val();
        var externalMailItemID = $("#ExternalMailItemID").val();
        var externalMailLocationID = $("#ExternalMailLocationID").val();
        var quantity = $("#Quantity").val();
        return {
            CostCentreCode: costcentrecode,
            Day: day,
            ExternalMailItemID: externalMailItemID,
            ExternalMailLocationID: externalMailLocationID,
            Quantity: quantity
        };
    }
</script>

-- controller

   <HttpPost()> _
    Function Create(ByVal collection As ExternalMail) As JsonResult
        Try
            If ModelState.IsValid Then
                _repositoryForExternalMail.Save(collection, "")
            End If

            Return Json(New ExternalMail With {.CostCentreCode = collection.CostCentreCode, .Day = collection.Day, .Quantity = collection.Quantity}, JsonRequestBehavior.AllowGet)

        Catch ex As Exception
            Return Json("An Error Occurred")
        End Try
    End Function

----UPDATE---

Google chrome is reporting the following error:

POST localhost/Mail/ExternalMail/Create 403 (Forbidden)
jquery.min.js:4 send jquery.min.js:4 f.extend.ajax
jquery.min.js:4 (anonymous function) Create:59 f.event.dispatch
jquery.min.js:3 h.handle.i

-- Page Source

 <!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8" />
<title>Create</title>
<link href="/Mail/Content/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/Mail/Scripts/jqModal.css" />
<link href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">  </script>
 <script src="/Mail/Scripts/json2min.js" type="text/javascript"></script>
 <script src="/Mail/Scripts/jquery.JSONP.min.js" type="text/javascript"></script>
 <script src="/Mail/Scripts/jquery.validate.min.js" type="text/javascript"></script>
 <script src="/Mail/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript">         </script>

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js" type="text/javascript"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.aspnetmvc.min.js" type="text/javascript"></script>
<script src="/Mail/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/Mail/Scripts/jqModal.js"></script>

 </head>
 <body>
<div class="page">
    <header>
  <div id="pageheader">
        <div id="pageheader_left">
            <img id="TitleBanner" src=/Mail/Content/Images/titlebanner.jpg alt="TitleBanner"/>
        </div>
        <div id="pageheader_center">

        </div>
        <div id="pageheader_right">
         <a href="/Mail/" title="Click to go to Home Page"><img id="HomeImage" src=/Mail/Content/Images/home.gif alt="Home"/></a>
         <a href="/Mail/Account/About"><img id="AboutImage" src=/Mail/Content/Images/about.gif alt="About"/></a>
          <a href="/Mail/Account/Logoff"><img id="ExitImage" src=/Mail/Content/Images/logoff.gif alt="Exit"/></a>
         </div>    
        <div id="pageheader_lower">
        </div>    
    </div>


     <ul class="k-widget k-reset k-header k-menu" id="Menu"><li class="k-item k-state-default">
 <a class="k-link" href="/Mail/">Home</a></li><li class="k-item k-state-default"><span class="k-link">Manage<span class="k-icon k-i-arrow-s"></span></span><ul class="k-group"><li class="k-item k-state-default"><span class="k-link">External Mail<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group"><li class="k-item k-state-default"><a class="k-link" href="/Mail/ExternalMail">External Mail</a></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/ExternalMailCategory">External Mail Category</a></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/ExternalMailItem">External Mail Item</a></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/ExternalMailCost">External Mail Cost</a></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/ExternalMailLocation">External Mail Location</a></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/ExternalMailInvoice">External Mail Invoice</a></li></ul></li><li class="k-item k-state-default"><span class="k-link">Internal Mail<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group"><li class="k-item k-state-default"><a class="k-link" href="/Mail/InternalMail">Internal Mail</a></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/InternalMailCategory">Internal Mail Category</a></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/InternalMailItem">Internal Mail Item</a></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/InternalMailCost">Internal Mail Cost</a></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/InternalMailLocation">Internal Mail Location</a></li></ul></li><li class="k-item k-state-default"><a class="k-link" href="/Mail/CostCentre">Cost Centre</a></li></ul></li><li class="k-item k-state-default"><span class="k-link">Reports</span></li></ul><script>
jQuery(function(){jQuery("#Menu").kendoMenu({});});
 </script>              
    </header>
    <section id="main">

 <div class="jqmWindow" id="dialog">
     <a href="#" class="jqmClose">Close</a>
 </div>


 <script type="text/javascript">

$(document).ready(function () {

    var exturl = '/Mail/ExternalMail/Create';
    $("#ExtMailCreate").click(function () {


        var dataJSON = JSON.stringify(SaveExternalMail());

        $.ajax({
                    cache: false,
                        type: "POST",
                        url: exturl,
                        data: dataJSON,
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            showMessage("test", "information");
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            showMessage("An error occurred while adding this record.           Please try again later.", "error");
                        }


                    });

    });

});

function showMessage(message, messageType) {
    $().ready(function () {
        $('#dialog').jqm();

        switch (messageType) {
            case 'information':
                $('#dialog').removeClass("errorMessage");
                $('#dialog').addClass("informationMessage");
                break;
            case 'error':
                $('#dialog').removeClass("informationMessage");
                $('#dialog').addClass("errorMessage");
                break;
            default:
                break;
        }

        $('#dialog').html("<a href=\"#\" class=\"jqmClose\">Close</a><br />" + message);
        $('#dialog').jqmShow();
    });
}


    function SaveExternalMail() {
        var costcentrecode = $("#CostCentreCode").val();
        var day = $("#ExtMailDatePicker").val();
        var externalMailItemID = $("#ExternalMailItemID").val();
        var externalMailLocationID = $("#ExternalMailLocationID").val();
        var quantity = $("#Quantity").val();

        return { CostCentreCode: costcentrecode, Day: day, ExternalMailItemID:      externalMailItemID, ExternalMailLocationID: externalMailLocationID, Quantity: quantity };
    }

 </script>
 <form action="/Mail/ExternalMail/Create" method="post">    <fieldset>
    <legend>ExternalMail</legend>
    <div class="editor-label">
        <label for="ExternalMailLocationID">Please select a Location</label>
    </div>
    <div class="editor-field">
        <select data-val="true" data-val-number="The field ExternalMailLocationID must be a number." data-val-required="The ExternalMailLocationID field is required." id="ExternalMailLocationID" name="ExternalMailLocationID">
 <option value="2">Sydney</option>
 </select>
        <span class="field-validation-valid" data-valmsg-for="ExternalMailLocationID" data-valmsg-replace="true"></span>
    </div>
    <div class="editor-label">
        <label for="CostCentreCode">Please select a CostCentre</label>
    </div>
    <div class="editor-field">
        <select id="CostCentreCode" name="CostCentreCode" size="15"><option value="Test000">Test</option>
      </select>
        <span class="field-validation-valid" data-valmsg-for="CostCentreCode" data-valmsg-replace="true"></span>
    </div>
         <div class="editor-label">
             <label for="ExternalMailItemID">Please select a Mail Item Type</label>
         </div>
         <div class="editor-field">
             <select data-val="true" data-val-number="The field ExternalMailItemID must be a number." data-val-required="The ExternalMailItemID field is required." id="ExternalMailItemID" name="ExternalMailItemID"><option value="4">Test10</option>
      </select>
        <span class="field-validation-valid" data-valmsg-for="ExternalMailItemID" data-valmsg-replace="true"></span>
    </div>
    <div class="editor-label">
        <label for="Day">Please select a Date</label>
    </div>
    <div class="editor-field">
        <input class="k-input" id="ExtMailDatePicker" name="ExtMailDatePicker" type="date" value="19/03/2013" /><script>
     jQuery(function(){jQuery("#ExtMailDatePicker").kendoDatePicker({"format":"d/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
      </script>
        <span class="field-validation-valid" data-valmsg-for="Day" data-valmsg-replace="true"></span>
    </div>
    <div class="editor-label">
        <label for="Quantity">Please enter the no of Mails</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-number="The field Quantity must be a number." data-val-required="The Quantity field is required." id="Quantity" name="Quantity" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Quantity" data-valmsg-replace="true"></span>
    </div>
    <p>
        <input type="button" value="Create" id="ExtMailCreate" />
    </p>
</fieldset>
 </form><div>
<a href="/Mail/ExternalMail">Back to List</a>
 </div>
      <div id="result">
 </div>

    </section>
    <footer>

    </footer>
</div>
 </body>
 </html>

-- Ajax Request Respone

Request URL:http://localhost/Mail/ExternalMail/Create
Request Method:POST
Status Code:403 Forbidden
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Authorization:Negotiate    TlRMTVNTUAADAAAAAAAAAEgAAAAAAAAASAAAAAAAAABIAAAAAAAAAEgAAAAAAAAASAAAAAAAAABIAAAABcKIogUBKAoAAAAP
Connection:keep-alive
Content-Length:113
Content-Type:application/json; charset=UTF-8
Cookie:ASP.NET_SessionId=tg1xrabaigumj3fxooa1satc
DNT:1
Host:localhost
Origin:http://localhost
Referer:http://localhost/Mail/externalmail/Create
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.22 (KHTML, like Gecko)     Chrome/25.0.1364.172 Safari/537.22
X-Requested-With:XMLHttpRequest
Request Payload
{"CostCentreCode":"B125","Day":"20/03/2013","ExternalMailItemID":"4","ExternalMailLocationID":"1","Quantity":"2"}
Response Headersview source
Cache-Control:private, s-maxage=0
Content-Length:127
Content-Type:application/json; charset=utf-8
Date:Wed, 20 Mar 2013 01:31:21 GMT
Server:Microsoft-IIS/5.1
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0
X-Powered-By:ASP.NET

Upvotes: 8

Answers (4)

Carlos Castillo

Reputation: 907

As denas said, you NEED to inspect what's in the returned textStatus and errorThrown generated variables because you can have something other than a 200 HTTP code returned and your code still being executed just fine (which is the case since you report your records being added to the database). A 200 HTTP code will trigger the "success" function, and I can't recall right now, but something in the 4xx or 5xx should trigger the "error" function.

The main thing to take into account here is that it's the webserver's HTTP return code what controls what function is triggered in the jquery ajax call

Change your code to:

error: function( jqXHR, textStatus, errorThrown ) {
    console.log(textStatus);
    console.log(errorThrown);
}

and tell us what you have in those textStatus and errorThrown variables.

Upvotes: 0

DRobertE

Reputation: 3508

the ajax request will enter the error block if you specify that the datatype is json but the response cannot be parsed as json.

open chrome and place a break point in the error block and look at the value of data. place the contents in a json validator and check to make sure your response is valid json.

also change the method sigs of your success and error functions to

success: function(data, txtStatus, jqxhr){ // code here }
error: function( jqxhr, txtStatus, errorThrown) { // code here }

then placing breakpoints in those funcitons you can inspect the params and see what is going on more clearly.

-- Update Since you are getting a 403 error code, see this answer on stackoverflow and check the permissions on the folder you are pointing to

403 forbidden after publishing asp.net MVC

also take a look at this since you are running IIS 5.1 it looks like... it may be similiar

Running MVC2 Application on IIS 5.2

Upvotes: 0

MorningDew

Reputation: 503

Try changing your method in your controller from a JsonResult to an ActionResult

 <HttpPost()> _
    Function Create(ByVal collection As ExternalMail) As ActionResult

Upvotes: 0

Jason

Reputation: 15931

I think the problem is specifying JsonRequestBehavior.AllowGet

and then posting to the method:

$.ajax({
  type: "POST",
  url: url,

If the database is getting populated, we know the repository code is firing. The browser is reporting an HTTP403 which smells like the framework is throwing a security exception, which it may do if it's expecting to respond to GET and receives a POST.

Upvotes: 2

JSON Post invoking error function

Answers (4)

Related Questions