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:
Ok got it - I had
autoOpen: false
whereas it should have been set to true.
* slaps forehead *