What would unhook my View and Controller from each other in Chrome and IE but not in Firefox?

Question

I have previously successfully tested this MVC functionality in my app in Chrome but have recenlty also tested in IE (10) and Firefox.

When I mash the submit button on a page which sends model values to its controller for running a query and generating a report, it now works only in Firefox (each of the three browser indeed have their own peculiar characteristics -- where they shine or "dull" in relation to their cohorts (gleaming in purple and gold) -- but Chrome and Firefox seem to have lost the connection between the submit button's click handler and the corresponding Controller's method.

The app seems to simply hang after mashing the submit button in Chrome and IE; the breakpoints I have -- the first of which is at the very beginning of the corresponding [HttpPost] ActionResult in the Controller class -- are not reached. In fact, the app seems to freeze after mashing the button -- right-clicking the submit button after that does not give me an "inspect that element" in the context menu.

    [HttpPost]
    public ActionResult ReceiptCriteria(SalesReceiptCriteriaModel model) 
    {
        if (ModelState.IsValid) // <-- there is a breakpoint here; only Firefox reaches it
        {
            . . .

In Firefox, it runs, and the breakpoints are hit.

What could possibly cause Chrome and IE to fail in this way, wheras Firefox soldiers on?

UPDATE

In response to Moby's request, here is the jQuery for the View in question:

The HTML in the View is pretty generic; the jQuery is:

        $("#submit_button").click(function() {
            // http://stackoverflow.com/questions/18192288/how-can-i-compare-date-time-values-using-the-jqueryui-datepicker-and-html5-time
            var begD = $.datepicker.parseDate('mm/dd/yy', $('#BeginDate').val());
            var endD = $.datepicker.parseDate('mm/dd/yy', $('#EndDate').val());
            if (begD > endD) {
                alert('Begin date must be before End date');
                $('#BeginDate').focus();
                return false;
            }
            else if (begD.toString() == endD.toString()) {
                var dteString = begD.getFullYear() + "/" + (begD.getMonth() + 1) + "/" + begD.getDate();
                var begT = new Date(dteString + " " + $('#BeginTime').val());
                var endT = new Date(dteString + " " + $('#EndTime').val());

                if (begT > endT) {
                    alert('Begin date must be before End date');
                    $('#BeginTime').focus();
                    return false;
                }
            }

            $("#NumberOfResults").css("visibility", "visible");
            $("#NumberOfResults").html("Please wait...");

            EnableButton("submit_button", false);

            // If all are selected, don't enumerate them; just set it at "All" (change of case, from 'all' to 'All', shows that the logic did execute)
            var deptsList = $('#depts').checkedBoxes();
            if (deptsList.length < deptsArray.length) {
                $('#deptHeader span').html(deptsList.join(", "));
            }
            else if (deptsList.length == deptsArray.length) {
                $('#deptHeader span').html("All");
            }
            // " "
            var sitesList = $('#sites').checkedBoxes();
            $('#sitesHeader span').html(sitesList.join(", "));
            if (sitesList.length < sitesArray.length) {
                $('#sitesHeader span').html(sitesList.join(", "));
            }
            else if (sitesList.length == sitesArray.length) {
                $('#sitesHeader span').html("All");
            }

            $('#hiddenDepts').val(deptsList);
            $('#hiddenSites').val(sitesList);
            var UPCs = $('#UPC').val();
            if (UPCs == "All") {
                $('#UPC').val("1"); // take everything (1 and greater)
            }

            var resultsText = jQuery.trim($("#spanNumberOfResults").text());
            if (resultsText != "") {
                $("#NumberOfResults").css("visibility", "visible");

                if (resultsText == "0") {
                    $("#NumberOfResults").css("color", "red");
                } else {
                    var href = '/@ConfigurationManager.AppSettings["ThisApp"]/TLDCriteria/LoadReport';
                    var report_parms = {
                        GUID: "@Model.GUID",
                        SerialNumber: "@Model.SerialNumber",
                        ReportName: "@Model.ReportName"
                    };
                    window.open(href, "report_window", "resizable=1, width=850, left=" + (screen.width / 2 - 425));
                }
            }
        }); // end of submit button click

function EnableButton(id, enable) {
    if (enable) {
        $("#" + id).removeAttr("disabled")
            .removeClass("bottomButtonDisabled")
            .removeClass("bottomButtonEnabled")
            .addClass("bottomButtonEnabled");
    } else {
        $("#" + id).attr("disabled", "true")
            .removeClass("bottomButtonDisabled")
            .removeClass("bottomButtonEnabled")
            .addClass("bottomButtonDisabled");
    }
}

UPDATE 2

Something else which may or may not shed some light on this problem is my .js and .css references:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer > </script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript" defer> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript" defer> </script>
<script src="@Url.Content("~/Scripts/jquery-migrate-1.2.0.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/anytime.compressed.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/dynamicCheckboxes.js")" type="text/javascript" > </script>

. . .

<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/dynamicCheckboxes.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/anytime.compressed.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
    <script src="/Scripts/html5shiv.js"> </script>
<![endif]-->

UPDATE 3

The Network tab in the Chrome Developer Tools looks like the middle of Wyoming (a whole lot of nothing), with a msg about the bottom informing me "No requests captured. Reload the page to see detailed information on the network activity."

When I dutifully mashed F5, it showed all the .js and .css files accessed, and finally (at the top), the page I'm gawking at. Mashing the "View Report" causes no more activity in the tab, though. I do see the console.log() msg I placed at the end of the submit button click handler, though, to wit: "made it to the end of submit button click"

There is one err msg in the console, too, but this:

Failed to load resource: the server responded with a status of 400 (Bad Request) http://localhost/%3C%=%20System.Configuration.ConfigurationManager.AppSettings[%22ThisApp%22]%20%%3E/Content/Images/SSCSsprite.png

Would simply fail to load the resource, not wreak other mayhem, right?

UPDATE 4

Based on Simon Halsey's hint, I found that, on stepping though the jQuery in Chrome, it fails this test:

if (resultsText != "") {

...obviously it's not in Firefox, and I assume that it also fails in IE (I'll czech to be sure in both cases, and update this).

Later: It's "" in Firefox, too...and the first time through, it also failed-wouldn't continue on. Second time through, it got through, though...???

Answer 1

There is two options:

• There is no request due to javascript error
• Your request signature doesnt math controller method

A. Browsers have different behaivior with some javascript functions. Thats one of the reasons why jQuery is so popular.

The most efficient way to find it is to debug javascript line by line in each browser.

Likely it is the reason.

B. Also your javascript is quite exotic for me. I guess you are catching sumbit button click and modifying inputs values on a fly.

I would recommend to use $.post or $.ajax and preventDefault instead. It would make your javascript more clear and simple.

C. To analyze what requests are sent from your browser I would recommend to use fiddler. http://fiddler2.com/