Question

I am using Prototype JavaScript, I have a button and I want to use the Event.observe method to observe for a click action.

The issue is that I want to call one of two functions depending on an if statement in the PHP code. My understanding of Javascript and the Event.observe method is quite limited but it seems like the code doesn’t work when trying to observe for an element that isn’t present. I can get this to work in a very hacky way, as follows:

<?php if ($_type == "forward_second"):?>
    <input type="button" id="week_backward_second" value="&lt;&lt;" disabled/>
    <input type="hidden" id="week_backward" value="&lt;&lt;" />
<?php else: ?>
    <input type="button" id="week_backward" value="&lt;&lt;" disabled/>
    <input type="hidden" id="week_backward_second" value="&lt;&lt;" />
<?php endif; ?>

And in the JavaScript:

initialize: function {    
    Event.observe('week_backward', 'click', this.backward.bind(this));
    Event.observe('week_backward_second', 'click', this.backwardSecond.bind(this));
},

By having a hidden field the ‘unnecessary’ Event.observe has an element to observe and the code works.

Can anyone suggest a better way of doing this?

Answer 1

I hope that I understood your question 🙂

var element = $('week_backward'),
    method = this.backward;

// Get a second element if first doesn't exist.
if (!element) {
    element = $('week_backward_second');
    method = this.backwardSecond;
}

element.observe('click', method.bind(this));

I used shorter Prototype API – unless you don’t have conflicts with other libs I recommend it.

PS. I forgot to mention that now you’ll only have to print one button, without the hidden one.