jQuery DatePicker and JQuery Modal Popups Issue in MVC

Question

I have a situation where I have a form with:

• a view
• popup1 (with popup1.js)

• popup2 (with popup2.js)

• I have set the input boxes to have a class of either popup1Date or popup2Date in case the
  issue was coming from having them all set to the same date class.

The isuse occurs if I go into popup1 - close - then into popup2 - select a date, it won't set the date in the input box.

If I only ever go into one popup, it works fine.

Also, I tried putting an alert in popup1's onSelect and it seems to fire on popup2's onselect, even though they are in different .js files.

There is a lot of code to post so I'm hoping someone has came accross a similar issue or has any advice or pointers.

Here is the date code at least:

//EDIT
$('#BaseReconEdit').live('click', function(e) {
    var url = '/PaymentVariable/EditBaseRecon/' + $(this).attr('rowsid');
    $.get(url, function(data) {
        $('#VarBaseRecon_InputDiv').html(data);


        //date code
        $('.popUp1Date).datepicker({
            showOn: 'button',
            onSelect: function(date) { alert(date) },
            buttonImage: '/Content/images/Control_MonthCalendar.bmp',
            buttonText: 'Enter Date',
            buttonImageOnly: true,
            dateFormat: 'dd/mm/yy',
            yearRange: '-20:+20',
            changeMonth: true,
            changeYear: true
        });
    });

    $('#VarBaseRecon_InputDiv').dialog('option', 'title', 'Edit Base Recon');
    $("#VarBaseRecon_InputDiv").dialog('open');

    e.preventDefault();
});

As tyou can see, I click a button, load the partial and set up it's own datePicker. This code is similar but with unique class ids in the other .js file.

Any help at all appreciated

Thanks

Answer 1

The only way I get it working is to assign id as the selector instead of class. That way, there is no confusion.