CODEWITHSUNDEEP
jqueryjquery-uiinternet-explorer-8datetimepicker
php-dev
php-dev

Reputation: 7156

IE 8 Error on creating UI widgets on cloned elements

I am trying to clone a <tr> element on a button click. I then need to instantiate a UI Widget on an input within the new <tr>. It works fine on FireFox, Chrome and IE7 but not on IE8.

Here is my HTML : 

<table>
<tr>
    <td class="day-name">
        <span class="label label-info">Date</span>
    </td>
    <td class="log-time">
        <div class="control-group">
            <label id="time-label"></label>
            <div class="controls">
                <input type="text" name="time[]" class="xlarge" />
            </div>
        </div>
    </td>
    <td>
        <button title="Add" class="btn btn-primary add-time" type="button">
            <i class="icon-white icon-plus"></i>
        </button>
    </td>  
</tr>
</table>

and here is my javascript code : 

    $('td.log-time input').timepicker({
        onOpen: function(){
            $(this).val('00:00');
        },
        stepMinute: 15,
        timeFormat: 'HH:mm',
        hourMax: 8
    });

    $('.add-time').click(function() {

        var cloned = $(this).parents('tr').eq(0).clone().addClass('cloned');
        $('td.date span', cloned).remove()
        $('button.add-time', cloned).remove();

        cloned.insertAfter($('tr').last());

        $('td.log-time input', cloned)
            .removeClass('hasDatepicker')
            .timepicker({ //The error occur here
                onOpen: function(){
                    $(this).val('00:00');
                },
                stepMinute: 15,
                timeFormat: 'HH:mm',
                hourMax: 8
            });

    });

As I said, it works fine on FireFox, Chrome and IE7 but not on IE8. I get this error instead : This object does not support this property or method (on the line in which I create new instance of timepicker widget).

It is not a problem of the timepicker plugin. I tried with the jQuery UI spinner widget also and had the same behaviour / error.

[UPDATE] I'm using jQuery 1.8.1 and jQuery UI 1.9.1

[UPDATE 2] due to user asking about timePicker plugin used (even I think it is not matter of timepicker plugin)

The timepicker plugin used is this one : http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js

Upvotes: 3

Views: 340

Answers (1)

Joe
Joe

Reputation: 15528

I used your exact code with the same library versions and IE8 worked fine.

However, I did notice another issue which might be causing you problems.

The issue you have is that once the date picker input is clicked, there are two table elements on the page. One in your initial HTML and another, dynamically inserted one inside an element with the id ui-datepicker-div. This additional table is used to show the date picker's calendar layout but since you're not using it it's hidden.

Once you've clicked a date picker input any subsequent clicks on the .add-time button will append the cloned tr to last tr element in the second, hidden table. The reason is that your selector ($('tr').last()) isn't specific enough.

Adding a class to the original table like this <table class="my-table"> then changing the insertAfter line to: cloned.insertAfter($('table.my-table tr').last()); fixes this and definitely works in IE8 without any problems.

Upvotes: 3

Related Questions