DropDown issue in firefox

Question

I am using a dropdown for marking messages are read, I have implemented it with ajax call, it is working fine on IE and Chrome but i am having issue in firefox, after reutrning data from my Controller, success function of below code has an argument name result, in IE and Chrome it is working fine( i am sending its value true) but in case of firefox it is showing error msg(ReferenceError: result is not defined) i have checked this error on console. I am using Jquery's version 1.6

 $("#mark").change(function () {
            var message = $('#move_folder').val();
            $.ajax({
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                url: '/Message/TakeActions'
                            + '?message=' + message,
                dataType: 'json',
                data: $.toJSON(msgsData),
                success: function (result) {
                    if (result == true) {
                        // window.location.href = "/inviteFriends/Index";
                        window.location.reload();
                        DivMsgText("Message moved successfully to" + message);                            
                        $("#selectall").removeAttr("checked");
                        for (var i = 0; i < $('.case').length; i++) {
                            if ($('.case')[i].checked)
                                $('.case')[i].checked = false;
                        }
                    }
                    else {
                        if (message == "mark_read") {
                            alert("Select a message to mark as read");
                        }
                        else {
                            // DivMsgText("Select a message to move");
                            alert("Select a message to move");
                        }
                        $("#divmsg").empty();
                        $("#divmsg").removeClass("success grid_9");
                        $("#divmsg").html().remove();
                    }
                },               
                async: false,
                cache: false
            });
        });

Answer 1

Try replacing the following loop:

for (var i = 0; i < $('.case').length; i++) {
    if ($('.case')[i].checked)
        $('.case')[i].checked = false;
}

with this:

$('.case').removeAttr('checked');

Also make sure you properly URL encode your query string parameters:

'?message=' + encodeURIComponent(message)

Also you shouldn't be using any javascript after window.location.reload();. This function does what it name suggests: it reloads the page by navigating away from it which as a consequence might stop the execution of any subsequent js.

Also try to return a valid JSON object from your TakeActions controller action:

public ActionResult TakeActions()
{
    ...
    return Json(new { status = true });
}

and then on the client side use the following test:

success: function(result) {
    if (result.status) {
        ...
    } else {
        ...
    }
}

The problem with your code is that I suspect you only returned true:

public ActionResult TakeActions()
{
    ...
    return Json(true);
}

which sends the string true into the response which is an invalid JSON string and yet you are telling jQuery that your server returns JSON by setting dataType: 'json'.

And yet another remark: you seem to be using some message variable which is not declared anywhere in the scope you have shown in your question. Is this variable actually declarzed somewhere? Is it declared in a scope which is accessible within your function?

Answer 2

the code after window.location.reload(); will not be executed. The reasons that's working in some browsers is that your window.location.reload(); is not working there, you should use window.location.reload(true); but at the end of succes-function and maybe with a little timeout before...