MVC 3 - jQuery functions don't work after return View(model); : The Official Microsoft ASP.NET Forums

Reply

davidtivy

Member

453 Points

164 Posts

MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 07:31 AM|LINK

Hi,

I have two working jQuery functions that control divs based on the radio button's change property. However if the validation (ModelState) is called, the jQuery is overridden and it no longer hides or shows the divs. I assume this is because the controller is returning the View.

I would like to call the jQuery functions after the page load. At the moment once you press the submit button on the page, if the validation is triggered the divs go back to default and all that is visible is the orginal radio button.

Please can somebody help?

<div class="editor-field">
            @Html.RadioButtonFor(model => model.SafetyManagement, true, new { id = "cbSafetyManagementYes" })Yes
            @Html.RadioButtonFor(model => model.SafetyManagement, false, new { id = "cbSafetyManagementNo" })No
            @Html.ValidationMessageFor(model => model.SafetyManagement)
        </div>

        <script type="text/javascript">

            $('#cbSafetyManagementYes').change(function (e) {
                var checked = $(this).attr('checked');
                if (checked) {
                    $('#divHideYes').show();
                    $('#divHideNo').hide();
                    document.cookie = "Yes";
                }
                else {
                    $('#divHideNo').hide();
                }
            }
            );

            $('#cbSafetyManagementNo').change(function (e) {
                var checked = $(this).attr('checked');
                if (checked) {
                    $('#divHideNo').show();
                    $('#divHideYes').hide();
                }
                else {
                    $('#divHideYes').hide();
                }
            }
            );

        </script>

<div id="divHideYes" style="display: none;">
// textboxes etc
</div>


<div id="divHideNo" style="display: none;">
// different textboxes etc
</div>

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question.

Edited by davidtivy on Apr 18, 2012 08:56 AM

Reply

grifin85

Member

22 Points

12 Posts

Re: MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 08:47 AM|LINK

Try use JQuery delegate

Reply

davidtivy

Member

453 Points

164 Posts

Re: MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 08:52 AM|LINK

I am not familiar with jQuery. Could you provide an example using my code?

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question.

Reply

ashok4v

Member

220 Points

58 Posts

Re: MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 08:57 AM|LINK

In order to handle multiple radio buttons you need to have same name for all the radio button's

for example

<input type="radio" value="yes" id="rdYes" name="rdAnswer" />Yes

<input type="radio" value="no" id="rdNo" name="rdAnswer" />No

and your jquery change handler should be as follows

$('#rdAnswer').change(

function()

{

if($(this).value == 'yes')

// do your stuff here

else//this for "no"

// do your stuff here

}

);

My MVC3 blog: http://mvc3only.blogspot.in/

(Don't forget to click "Mark as Answer" on the post(s) that helped you.)

Reply

davidtivy

Member

453 Points

164 Posts

Re: MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 09:11 AM|LINK

I am not sure this is correct. Effectively I need to call the function(s) after the page has been loaded.

Also I can't put razor within jQuery like your example suggests.

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question.

Reply

zuperboy90

Participant

977 Points

819 Posts

Re: MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 09:46 AM|LINK

You load the page with ajax or is a full page refresh? Do you make any ajax calls?

Reply

davidtivy

Member

453 Points

164 Posts

Re: MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 09:55 AM|LINK

It is a full page refresh.

Below is a simplied version of my ActionResult Controller.

[HttpPost]
        public ActionResult Create(Section3 section3)
        {
            if (ModelState.IsValid)
            {
           
            }

                db.Section3s.Add(section3);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            ViewBag.MasterDataID = new SelectList(db.sMasterDatas, "MasterDataID", "GUID", section3.MasterDataID);

            return View(section3);
        }

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question.

Edited by davidtivy on Apr 18, 2012 09:56 AM

Reply

zuperboy90

Participant

977 Points

819 Posts

Re: MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 10:15 AM|LINK

Ok, can you please provide some steps of what are doing, when is working and when is not working?

Do you have a form in the view? Do you bind that form with jquery unobtrusive validation plugin?

Also, it can be a javascript error after form submit which prevents the scripts of running properly. Can you run the website in firefox with firebug installed, so you can see if they are any errors?

Reply

davidtivy

Member

453 Points

164 Posts

Re: MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 10:22 AM|LINK

This is my View:

@model KeySupplierSystem.Models.Section3
          
@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{ @Html.ValidationSummary(true)
<p>Please tick the appropriate boxes.</p>
    <fieldset>
        <legend>Section3</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.SafetyManagement)
        </div>

        <div class="editor-field">
            @Html.RadioButtonFor(model => model.SafetyManagement, true, new { id = "cbSafetyManagementYes" })Yes
            @Html.RadioButtonFor(model => model.SafetyManagement, false, new { id = "cbSafetyManagementNo" })No
            @Html.ValidationMessageFor(model => model.SafetyManagement)
        </div>

        <script type="text/javascript">

            $('#cbSafetyManagementYes').change(function (e) {
                var checked = $(this).attr('checked');
                if (checked) {
                    $('#divHideYes').show();
                    $('#divHideNo').hide();
                    document.cookie = "Yes";
                }
                else {
                    $('#divHideNo').hide();
                }
            }
            );

            $('#cbSafetyManagementNo').change(function (e) {
                var checked = $(this).attr('checked');
                if (checked) {
                    $('#divHideNo').show();
                    $('#divHideYes').hide();
                }
                else {
                    $('#divHideYes').hide();
                }
            }
            );

        </script>

        <div id="divHideYes" style="display: none;">

        <div class="editor-label">
            @Html.LabelFor(model => model.OrgHoldCert)
        </div>
        <div class="editor-field">
            @Html.RadioButtonFor(model => model.OrgHoldCert, true)Yes
            @Html.RadioButtonFor(model => model.OrgHoldCert, false)No
            @Html.ValidationMessageFor(model => model.OrgHoldCert)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.OrgHoldCertUpload)
        </div>

        <div class="editor-field">
            @(Html.Telerik().Upload()    @* ------------- UPLOAD FILE -------------- *@
.Name("OrgHoldCertUpload")
            .Multiple(false)
            )
        </div>

        </div>


        <div id="divHideNo" style="display: none;">

        <div class="editor-label">
            @Html.LabelFor(model => model.HSPolicyCert)
        </div>
        <div class="editor-field">
            @Html.RadioButtonFor(model => model.HSPolicyCert, true)Yes
            @Html.RadioButtonFor(model => model.HSPolicyCert, false)No
            @Html.ValidationMessageFor(model => model.HSPolicyCert)
        </div>


        <div class="editor-label">
            @Html.LabelFor(model => model.HSPolicyUpload)
        </div>

        <div class="editor-field">
            @(Html.Telerik().Upload()    @* ------------- UPLOAD FILE -------------- *@
.Name("HSPolicyUpload")
            .Multiple(false)
            )
        </div>

        <p>Please provide the name of the person responsible for Health & Safety.</p>
        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.JobTitle)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.JobTitle)
            @Html.ValidationMessageFor(model => model.JobTitle)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.SafetyStatsUpload)
        </div>

        <div class="editor-field">
            @(Html.Telerik().Upload()    @* ------------- UPLOAD FILE -------------- *@
.Name("SafetyStatsUpload")
            .Multiple(false)
            )
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.PendingInvestigations)
        </div>
        <div class="editor-field">

            @Html.RadioButtonFor(model => model.PendingInvestigations, true)Yes
            @Html.RadioButtonFor(model => model.PendingInvestigations, false)No
            @Html.ValidationMessageFor(model => model.PendingInvestigations)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PendingInvestigationsUpload)
        </div>
        
        <div class="editor-field">
            @(Html.Telerik().Upload()    @* ------------- UPLOAD FILE -------------- *@
.Name("PendingInvestigationsUpload")
            .Multiple(false)
            )
        </div>

       </div>
        
        <br />
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Here is my controller:

 [HttpPost]
        public ActionResult Create(Section3 section3, IEnumerable<HttpPostedFileBase> OrgHoldCertUpload, IEnumerable<HttpPostedFileBase> HSPolicyUpload, IEnumerable<HttpPostedFileBase> SafetyStatsUpload, IEnumerable<HttpPostedFileBase> PendingInvestigationsUpload)
        {
            if (ModelState.IsValid)
            {
                UploadFile upload = new UploadFile();

                if (OrgHoldCertUpload != null & HSPolicyUpload != null & SafetyStatsUpload != null & PendingInvestigationsUpload != null)
                {
                    section3.OrgHoldCertUploadUI = upload.SubmitUpload(OrgHoldCertUpload)[0];
                    section3.HSPolicyUploadUI = upload.SubmitUpload(HSPolicyUpload)[0];
                    section3.SafetyStatsUploadUI = upload.SubmitUpload(SafetyStatsUpload)[0];
                    section3.PendingInvestigationsUploadUI = upload.SubmitUpload(PendingInvestigationsUpload)[0];

                    section3.OrgHoldCertUpload = upload.SubmitUpload(OrgHoldCertUpload)[1];
                    section3.HSPolicyUpload = upload.SubmitUpload(HSPolicyUpload)[1];
                    section3.SafetyStatsUpload = upload.SubmitUpload(SafetyStatsUpload)[1];
                    section3.PendingInvestigationsUpload = upload.SubmitUpload(PendingInvestigationsUpload)[1];
                }

                db.Section3s.Add(section3);
                db.SaveChanges();
                return RedirectToAction("Index");  
            }

            ViewBag.MasterDataID = new SelectList(db.sMasterDatas, "MasterDataID", "GUID", section3.MasterDataID);
            return View(section3);
        }

This should answer your questions.

Just to reiterate,

I have two working jQuery functions that control divs based on the radio button's change property. However if the validation (ModelState) is called, the jQuery is overridden and it no longer hides or shows the divs. I assume this is because the controller is returning the View.

I would like to call the jQuery functions after the page load. At the moment once you press the submit button on the page, if the validation is triggered the divs go back to default and all that is visible is the orginal radio button.

Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question.

Edited by davidtivy on Apr 18, 2012 10:24 AM

Reply

zuperboy90

Participant

977 Points

819 Posts

Re: MVC 3 - jQuery functions don't work after return View(model);

Apr 18, 2012 10:53 AM|LINK

Try to move the script blocks outside of the form

MVC 3 - jQuery functions don't work after return View(model); RSS

15 replies

davidtivy

MVC 3 - jQuery functions don't work after return View(model);

grifin85

Re: MVC 3 - jQuery functions don't work after return View(model);

davidtivy

Re: MVC 3 - jQuery functions don't work after return View(model);

ashok4v

Re: MVC 3 - jQuery functions don't work after return View(model);

davidtivy

Re: MVC 3 - jQuery functions don't work after return View(model);

zuperboy90

Re: MVC 3 - jQuery functions don't work after return View(model);

davidtivy

Re: MVC 3 - jQuery functions don't work after return View(model);

zuperboy90

Re: MVC 3 - jQuery functions don't work after return View(model);

davidtivy

Re: MVC 3 - jQuery functions don't work after return View(model);

zuperboy90

Re: MVC 3 - jQuery functions don't work after return View(model);

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft