Custom jQuery script not working correctly after ASP.NET MVC 4 validation

Question

I am using jQuery to enable and disable two separate textbox inputs and their labels based on the selection in a dropbox (#Drop1). Here is my jQuery script:

$(function () {
    $("#Drop1").change(function () {
        if ($(this).val() == "IWR") {
            ShowOther()
        }
        else {
            ShowIWR()
        }
    });
});

$(function () {
    $("#Drop1").ready(function () {
        if ($(this).val() == "IWR") {
            ShowOther()
        }
        else {
            ShowIWR()
        }
    });
});

function ShowOther() {
    $("#Job").attr("disabled", "disabled").css({ "background-color": "#999", "display": "none" });
    $("#job_row").css({ "display": "none" });
    $("#Project").removeAttr("disabled").css({ "background-color": "#EFF8FB", "display": "block" });
    $("#proj_row").css({ "display": "block" });
}

function ShowIWR() {
    $("#Job").removeAttr("disabled").css({ "background-color": "#EFF8FB", "display": "block" });
    $("#job_row").css({ "display": "block" });
    $("#Project").attr("disabled", "disabled").css({ "background-color": "#999", "display": "none" });
    $("#proj_row").css({ "display": "none" });
}

On page load, everything works as intended. As I change the dropbox, the correct textbox and its input display and hide just like I expect. Looking at my code, you can see that the IDs #Job and #job_row should be visible, while #Project and #proj_row are hidden and vice versa. When the page loads with GET() the job related labels and textbox are the ones visible.

The problem I am having is after I choose the dropdown that displays #Project and #proj_row (Drop1.val = "IWR"), if there is an error on the page that the validator catches, the page does not load back up correctly. The #Job and #job_row are visible even though on reload the Drop1.val is still = to "IWR".

In case it helps, here is my controller code:

    [HttpPost]
    public ActionResult Create(QCLog qclog)
    {
        if (qclog.Job == null)
        {
            if (qclog.Type != "IWR")
            {
                ModelState.AddModelError("Job", "Job is required unless it is an IWR.");
            }
            else
            {
                if (qclog.Project == null)
                {
                    ModelState.AddModelError("Project", "Project is required for IWRs.");
                }
            }
        }

        if (ModelState.IsValid)
        {
            if (qclog.Job != "IWR")
            {
                string[] qcjob = qclog.Job.Split('-');
                int temp = Convert.ToInt32(qcjob[0]);
                try
                {
                    var job = jobdb.Server5_Job.Single(j => j.Job == temp);
                    qclog.Project = job.ProjectID;
                    qclog.Blend = job.BlendLot;
                }
                catch (Exception ex)
                {
                    qclog.Project = null;
                    qclog.Blend = null;
                }

            }
            else
            {
                qclog.Project = null;
                qclog.Blend = null;
            }
            qclog.Timestamp = DateTime.Now;
            qclog.Status = "Incomplete";
            db.QCLogs.AddObject(qclog);
            db.SaveChanges();
            //PrintLabel(qclog);
            return RedirectToAction("Index");
        }
        return View(qclog);
    }

And here is the view source of the page, after the error validation:

<tr class="transparent">
                    <td class="transparent"><select id="Drop1" name="Type"><option value="FPI">FPI</option>
<option selected="selected" value="IWR">IWR</option>
<option value="Final">Final</option>
<option value="SMS">SMS</option>
<option value="Incoming">Incoming</option>
<option value="GageRR">Gage R+R</option>
<option value="Other">Other</option>
</select>
                    </td>
                    <td class="transparent"><span class="field-validation-valid" data-valmsg-for="Type" data-valmsg-replace="true"></span>
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent">
                        Operation
                    </td>
                    <td class="transparent">
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent"><input class="text-box single-line" data-val="true" data-val-length="Operation field cannot contain more than 3 characters." data-val-length-max="3" data-val-required="Operation required." id="Operation" name="Operation" type="text" value="020" />
                    </td>
                    <td class="transparent"><span class="field-validation-valid" data-valmsg-for="Operation" data-valmsg-replace="true"></span>
                    </td>
                </tr>
                <tr id="proj_row" class="transparent">
                    <td  class="transparent">
                        Project (ex. 0730A)
                    </td>
                    <td class="transparent">
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent"><input class="input-validation-error text-box single-line" id="Project" name="Project" type="text" value="" />
                    </td>
                    <td class="transparent"><span class="field-validation-error" data-valmsg-for="Project" data-valmsg-replace="true">Project is required for IWRs.</span>
                    </td>
                </tr>
                <tr id="job_row" class="transparent">
                    <td class="transparent">
                        Job Number (ex. 12345-1)
                    </td>
                    <td class="transparent">
                    </td>
                </tr>
                <tr class="transparent">
                    <td class="transparent"><input class="text-box single-line" data-val="true" data-val-length="Job field cannot contain more than 10 characters." data-val-length-max="10" id="Job" name="Job" type="text" value="" />
                    </td>
                    <td class="transparent"><span class="field-validation-valid" data-valmsg-for="Job" data-valmsg-replace="true"></span>
                    </td>
                </tr>

My apologies in advance if my code isn't as efficient as it could be. I am a backend guy still getting the ends and outs of frontend frameworks.

Thanks for the help.

Michael Smith · Accepted Answer · 2013-05-13 12:19:05Z

1

I figured this out. Instead of using:

$(function () {
    $("#Drop1").ready(function () {
        if ($(this).val() == "IWR") {
            ShowOther()
        }
        else {
            ShowIWR()
        }
    });
});

I had to use a document ready function, like this:

$(document).ready(function () {
    if ($("#Drop1").val() == "IWR") {
        ShowOther()
    }
    else {
        ShowIWR()
    }
});

This achieved the effect I was looking for. I can only assume that the value of "#Drop1" was not set when the control was ready, but it was set after the document was ready.

answered May 13, 2013 at 12:19

Michael Smith

631 silver badge7 bronze badges

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

1 Comment

Anshuman Jasrotia Over a year ago

Welcome to SO and congratulations for solving your own problem. +1 from my side.

Collectives™ on Stack Overflow

Custom jQuery script not working correctly after ASP.NET MVC 4 validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related