Question

I created a custom helper for managing my radio buttons. It allows me to click on the label to select the corresponding radio button. It works but I found a situation where it didn’t work anymore.

Here is the scenario: the first time the jQuery UI dialog is loaded, I’m able to click on a label to select the corresponding radio button. I must say that my radio buttons are loaded into a form in a jQuery dialog.

The problem occurred if I close then reopen the jQuery dialog, then my labels are no more associated with the radio buttons (but everything works pretty well except that point).

Here is the code of my helper:

    public static MvcHtmlString RadioButtonFor2<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object value, object labelText)
    {
        object currentValue = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData).Model;
        string nameX = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData).DisplayName;
        string uniqueId = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData).DisplayName + "_" + value;

        TagBuilder htmlRadio = new TagBuilder("input");
        htmlRadio.MergeAttribute("type", "radio");
        htmlRadio.MergeAttribute("id", uniqueId);
        htmlRadio.MergeAttribute("name", nameX);
        htmlRadio.MergeAttribute("value", (string)value);

        if (currentValue != null && value.ToString() == currentValue.ToString()) htmlRadio.MergeAttribute("checked", "checked");

        TagBuilder htmlLabel = new TagBuilder("label");
        htmlLabel.MergeAttribute("for", uniqueId);
        htmlLabel.SetInnerText((string)labelText);

        return MvcHtmlString.Create(htmlRadio.ToString(TagRenderMode.SelfClosing) + htmlLabel.ToString());
    }

This code produces html code like this:

<input name="ADR" id="ADR_Yes" type="radio" value="Yes"/>
<label for="ADR_Yes">Oui</label>

As you can see label is correctly associated with input.

Do someone have any idea why it works only the first time the jQuery UI dialod is loaded?

I’m a bit lost.

Thanks.

Answer 1

I finally found a solution:

Whenever I need to close the jquery dialog, I must destroy it completely from the DOM.

I replaced this line:

$(this).dialog('close');

With the following:

$(this).dialog('destroy').remove();

Maybe this can help someone else.