Question

just a quick question about the mvc JqueryUI framework,

i have a _layout.cshtml page which initializes a set of tabs

i have a view which has a jqueryUI datepicker on it.

the View is loaded Dynamically into the tabs and displayed, but if i load a subsequent instance of the View on the Tabs then the datepicker will only populate the first instance of the datepicker.

my question is this
1. MVC uses independent Objects to create independent Views with the same ids as on the views
2. JQueryUI uses the XML Dom with Unique Ids to create its base objects

so how are these supposed to work together.
my View is as follows

    <div class="PoCreate">
            <div id="pnlProject">
                <fieldset>
                    <legend>Project</legend>
                    <label for="ProjectNo">
                        Project #:
                    </label>
                    <input type="text" name="ProjectNo" id="ProjectNo" />
                    <input type="button" name="btnProjectNo" id="btnProjectNo" data-linked-search="@Url.Action("Project", "SearchObj")"
                        value=".." />
                </fieldset>
            </div>
        </div>
        @Url.Script("~/scripts/PageScripts/_PoIndex.js")

The Script file contains

$('.PoCreate').PoCreate({});

and the PO function contains

$.fn.extend({
    PoCreate: function (opt)
    {
        $(this).each(function ()
        {
            var _self = $(this.parentNode),
            _opts = {}, tabIdContext = $(this.parentNode).attr('id');
            $.extend(_opts, (opt || {}));

            $('.date', _self).each(function ()
            {
                $(this).attr('id', tabIdContext + '-' + $(this).attr('id'));
                $(this).datepicker(Globals.Dates).keypress(function (e) { return false; });
            })

            $(':button').button().filter('[data-linked-search]').click(function (e)
            {
                $.extendedAjax({ url: $(this).attr('data-linked-search'),
                    success: function (response)
                    {
                        $('#dialog-form').find('#dialog-search').html(response).dialog(Globals.Dialogs);
                    }
                });
            });
        });
    }
});

Answer 1

I found a way to solve this,

On the Create of the JQuery Widget i have to rename the ID of the DatePicker field so that it is unique for the Tab created.

so my TabId = ui-tab-01
and DatePickerId = DatePicker1

renaming the DatePickerId so that it is now ui-tab-01-DatePicker1