weareoutman/clockpicker

Can a ClockPicker work when it's dynamically loaded?

Closed this issue · 3 comments

Timmiej93 commented

I'm creating a simple webpage for myself (learning from scratch), which is basically an expandable table with a clockpicker in each row. The clockpicker on the initial row works fine, but on the dynamically loaded rows, it doesn't work.

I'm loading the dynamic rows with a jQuery script, something like this:

<script>
$(function(){
    jQuery('a.newRowButton').click(function(event){

        event.preventDefault();

        var newRow = jQuery(
            '<html stuff>' +
            '<more html stuff/>'
        );

        jQuery('table.table1').append(newRow);
    });
});
</script>

I wouldn't be surprised if there are way better ways to do this, but I'm stil learning as I go here. If you know of a better way to add html code to a page dynamically, I'd love to hear about it.

In the meantime, I'm wondering, is it possible to make the clockpicker work on the dynamically loaded rows as well?

djibe commented

Hi,
have you tried event delegation ?
jQuery doc : https://learn.jquery.com/events/event-delegation/
Modify this line : $('#parent-div').on('click', '.newRowButton', function(event){
};

Timmiej93 commented

While that looks like the right direction, I think I may have not been very clear about what I meant exactly.

The 'new row' button is outside of the table, there's just one button, that works fine. The issue I'm having is that the clockpicker on the dynamically loaded rows don't work.

I tried applying the delegation to the clockpicker section of the script ($('clockpicker').clockpicker({})), but I'm nowhere near familiar enough with javascript to understand how to do that properly.

To clarify:
image

The first row is coded in html, it's there when the page loads. The second row is loaded dynamically by clicking the newRowButton. The two clockpickers in the first row work fine, the two in the second row don't work.

<script type="text/javascript">

var inputSets = {};

$('.clockpicker').clockpicker(
    {
        placement: "bottom",
        align: "left",
        default: "now",
        donetext: "Done",
    })
    .find("input").change(function() {
        // Do stuff...
    })

</script>

This is the code I've got at the moment for the clockpickers, basically just the default stuff. Is there any way to add delegation to this?
Maybe as an alternative, is there a way to reload / add the clockpicker section to a row when I click the new row button?

Timmiej93 commented

Well, I found a solution. I fully expect it to be a crappy and buggy one, but for now, it works.

The clockpicker method:

function assignClockPicker() {
	$('.clockpicker').clockpicker({
	    placement: "bottom",
	    align: "left",
	    default: "now",
	    donetext: "Done",
	})
	.find("input").change(function() {
	    handleClockPicker(this);
	});
}
assignClockPicker();

This should be equivalent to having the contents of the assignClockPicker method outside of the method.

Then, at the very end of the function that adds the new row, I simply added assignClockPicker();.

The clockpickers now work on all rows just fine. I would love some feedback on the validity of this construction, because I can't imagine that this is the best, or even a good way to do this.