Question

I have the following script:

$(function() {
   $( 'input[id^="event_"' ).each(function() {
        this.datetimepicker({
            stepMinute: 15  
        });
    }); 
});

Typically applying the datetimepicker widget involves this code (which is working further up on the page):

$(function() {
    $( "#datepicker" ).datetimepicker({
        stepMinute: 15  
    });
});

What it should be doing is applying the datetimepicker widget to each of the input boxes in this generated code:

<table>
    <thead>
        <tr>
            <td>Event Name</td>
            <td>Event Date</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" id="1" value="Opening" /></td>
            <td><input type="text" id="event_1" value="2011-09-15 20:30:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="2" value="First Act" /></td>
            <td><input type="text" id="event_2" value="2011-09-15 20:45:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="3" value="Some Event" /></td>
            <td><input type="text" id="event_3" value="2011-09-16 20:00:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="4" value="Some Other Event" /></td>
            <td><input type="text" id="event_4" value="2011-09-17 20:00:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="30" value="1234" /></td>
            <td><input type="text" id="event_30" value="2011-09-30 11:00:00" /></td>
            <td>Save stuff here?</td>
        </tr>
        <tr>
            <td><input type="text" id="32" value="Statement Check" /></td>
            <td><input type="text" id="event_32" value="2011-09-29 10:30:00" /></td>
            <td>Save stuff here?</td>
        </tr>
    </tbody>
</table>

I am 95% sure that my syntax is wrong in the $(function() { ... }); block, but I am not sure where I went wrong.

EDIT: As a side note, this will eventually edit the listed events via an AJAX call. So each row is an event that needs individual saving once edited.

Thank you all in advanced for all input/suggestions/solutions!

Answer 1

Inside your each function, this refers to the native DOM node, which has no method by the name of datetimepicker. To use datetimepicker, you have to create a jQuery object out of it, by passing it to the jQuery constructor $(this):

$(function() {
   $( 'input[id^="event_"]' ).each(function() {
        $(this).datetimepicker({
            stepMinute: 15  
        });
    }); 
});

---

However, you shouldn’t need this at all. You can forgo each completely, and call the datetimepicker directly on the original collection:

$(function() {
   $( 'input[id^="event_"]' ).datetimepicker({
        stepMinute: 15  
   });
});