Question

I have a sublayout in sitecore (which is an ascx control) which contains a hidden field and an image map. Depending on the area of the image map which is clicked, I want to set the value of the hidden field, then initiate a postback to the server.

My markup is as follows:

<script type="text/javascript">
function SetRegion(regionName) {
    $('#<%=hdnRegion.ClientID%>').val(regionName);
    __doPostBack('<%=lnkRedirectButton.UniqueID%>', '');
}
</script>

<img src="/Images/Interface/Map-Background.png" usemap="#regionMapView" class="map" />
<map id="regionMapView" name="regionMapView">
    <area id="x" href="javascript:SetRegion('x')" shape="poly" coords=",,,," />
    <area id="y" href="javascript:SetRegion('y')" shape="poly" coords=",,,," />
    <area id="z" href="javascript:SetRegion('z')" shape="poly" coords=",,,," />
</map>

<asp:HiddenField ID="hdnRegion" runat="server" />
<asp:LinkButton ID="lnkRedirectButton" onclick="lnkRedirectButton_Click" runat="server" />

and my code-behind is as follows:

    protected void lnkRedirectButton_Click(object sender, EventArgs e)
    {
        string region = hdnRegion.Value; //at this point, I expect hdnRegion.Value to be "x" "y" or "z" but it's always coming back empty :-(
        //do stuff...
    }

I added the dummy LinkButton to use as a hook for the postback (to create a code-behind method to handle the postback).

I’ve tried this code in a stand-alone webapplication and it seems to work fine, so I’m wondering if there is something going on with sitecore which is messing up the hidden field’s value during the postback process?

To clarify; the postback event is being fired and handled on the server ok and I’ve used alert() in javascript to confirm that the hidden field value was being set correctly.

Edit:
Retagged question to include jquery-ui tag.
This issue seems to be related to the fact that all of this is happening inside of a div which is displayed using $().dialog() method in the jQuery UI library…

Answer 1

As mentioned in my edit, this issue is related to the fact that the hidden field (and everything else) is inside a div which is manipulated using the jQuery UI dialog method to create a popup window.

I found this question (HiddenField value modified by javascript is not posted back)
which gave me the answer and involves adding a single line of code to the open: callback in the dialog methods constructor.

My JavaScript code for opening the dialog was modified as follows:

$('#MyDialog').dialog({
    closeOnEscape: true,
    open: function(event, ui) {
        $(this).parent().appendTo("form"); //this line sorted everything!
    }
}); 

To quote DanaBenson “I believe the root cause is that jQueryUI attaches dialogs to the BODY tag not the FORM tag, where .Net needs it to be.”