Question

This might be easy but I’ve searched SO and tried some suggestions for this none of which work. I’m using an MVC Editor Template that has a div with a standard html button and other fields. When I pass a collection to the template it will render the fields of each item in the collection with unique ids. Then I want to open a dialog box when any of the buttons are clicked. The buttons are rendered as such within the Editor Template:

@model ProductViewModel
<span>
    <button id="btnSelectTags-@(ViewData.TemplateInfo.HtmlFieldPrefix)" class="sig-button ie-shadowed select-tag" type="button" title="Select tags..." style="margin-right: 10px">Select tags</button>
</span>
// other fields

So if I pass a collection with 2 objects to the Editor Template I get the html below:

<button title="Select tags..." class="sig-button ie-shadowed select-tag" id="btnSelectTags-Products[0]" style="margin-right: 10px;" type="button">
// other fields then next item:
<button title="Select tags..." class="sig-button ie-shadowed select-tag" id="btnSelectTags-Products[1]" style="margin-right: 10px;" type="button">

This seems fine and gives each button a unique id. They need to have a unique id (I think) as the item in every div can have its own set of tags. So I want to add a click event to each button that will open a dialog box, using this jQuery (I’ve tried including the other classes in the selector also and tried without “button”):

if ($("button.select-tag")) {
    $(".select-tag").click(function () {
        showTagDialogBox();
    });
}

Here’s the div where the tags get rendered:

<div style="display: none">
    <div id="tagDialogBox" title="Add Tags">
        @Html.EditorFor(x => x.ProductViewModels)
    </div>
</div>

Here’s the showTagDialogBox function:

function showTagDialogBox() {
    $('#tagDialogBox').dialog({
        autoOpen: false,
        title: "Select Tags",
        modal: true,
        height: 530,
        width: 700,
        buttons: {
            "Save": function () {
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    return false;
}

However when I click any of the buttons nothing happens – I don’t get any js errors in Firebug either. Can anyone spot what I might be doing wrong? Here’s a pic of what I’m trying to do:

Answer 1

Ok got it – I had

autoOpen: false

whereas it should have been set to true.

* slaps forehead *