Problems with jQuery on MVC3 website, hiddenfield doesn't get updated by jQuery after postback (sometimes)

See more:

ASP.NET

MVC

jQuery

Hi,

I have a problem with a jQuery script on my MVC3 Website. The webpage has a hiddenfield that is bound to a property of the MVC model. When I click a h2 element of the page the onclick event will trigger a jQuery function that will update the hidden field.

Page:

@model XxxxxxMVC.Models.ProfielenZoekenModel
@using XxxxxxDLL
@{
    ViewBag.Title = "Zoeken";
}

@using (Html.BeginForm("", "profielen", FormMethod.Post, new { id = "profielen_form" }))
{
    @Html.HiddenFor(m => m.GeselecteerdeOpties)
    
    <!-- ...... some code ...... -->

    <h2  önclick="SwitchSelected('1');">Voorkeur Leeftijd</h2>

    <!-- ...... some code ...... -->

    <button type="submit">TOEPASSEN</button>
}

jQuery Script:

function SwitchSelected(id) {
    var key = "'" + id + "';";
    var ids = jQuery("#GeselecteerdeOpties").val();
    var loc = ids.indexOf(key);

    if (loc >= 0) {
        ids = ids.replace(key, '');
    }
    else {
        ids = ids + key;
    }

    jQuery("#GeselecteerdeOpties").val(ids);

    //alert(jQuery("#GeselecteerdeOpties").val());
}

This code above will work quite well, even after postbacks. But then out no where the system collapses and the hiddenfield doesn't get updated anymore.

If I then look at the jQuery with a debugger I can see that the jQuery function does get executed properly but the last code "jQuery("#GeselecteerdeOpties").val(ids);" doesn't change the hiddenfield at all. If I then debug it again I see that the jQuery code does see the changed hiddenfield with proper values in it, although the change can't be seen in the HTML of the page. So it's almost like the jQuery is updating a completely different page in memory or someting like that.


To make it even worse;

If I uncomment the last jQuery code "alert(jQuery("#GeselecteerdeOpties").val());", the problem doesn't occur anymore... :S



Any ideas?