Is Simulating User-Input Events With jQuery Ever A Good Idea?

I find myself doing it a lot, but it's because I am working in an old system which needs some refactoring to its core. I completely agree that designing an API to avoid simulating user input or triggering the inout events is absolutely ideal.

I agree; simulating user input to change the 'core' is not optimal. In MVC parlance, this would be a dependency of the model on the view. You should be able to invoke model behavior without use of the view. The view should observe the model's state-change and adjust itself accordingly.

I am very thankful that you are explaining everything in a video in your recent jQuery posts since im not good in jQuery so far but this helps me a lot. Definately better than just reading something.

I agree that you probably don't want to simulate a click event.

I think the intent idea you describe might be an overstatement, though. If the link text changes from "close" to "toggle" do you have to rethink your API because the user is now thinking about toggling and not closing?

This seems like it's a good use of delegates. You don't have to simulate a click event because you can just call the same event handler from both places.

Here's a small refactor.

// Create a toggle delegate.
var toggleMoreInfo = function(event){
event.preventDefault();
if (moreInfo.is( ":visible" )){
// Close it.
moreInfo.close();
} else {
// Open it.
moreInfo.open();
}
};

// Pass the delegate to any links you want to have that functionality.
toggleLink.click(toggleMoreInfo);
closeLink.click(toggleMoreInfo);

Now, I'm not sure I would want the 'event.preventDefault()' in a generic toggle event, but that's the general idea.

@Ben, Is there a way to subscribe to one of your posts (comments) without commenting on it?

I agree that I don't especially like referencing the preventDefault() method of the event object in the delegate. That's because it changes expected behavior of a link and it's not obvious from the toggle command that it's doing that.

It's clearer if you write "preventDefault()" everywhere that you're preventing the default. It's still code repetition, though. If you had enough links which did this then it might be obvious that you meant to preventDefault every time so you'd expect to put it in the delegate.

In principle there's nothing wrong with using the event object in a delegate. Delegates by definition have the same signature so there's the expectation to use them.

The part I really don't like about this code is that you've hard coded the moreInfo target into the function. It would be better if it was in the event object.

In the example below I've created an ICloseable Interface for any object. It will let you open, close, or toggle any item on a click.

You add the ICloseable interface to the object you want to open and close and then you bind any links you want to work to that object.

The key lines are:

$.extend(moreInfo,ICloseable);

// Bind any links
moreInfo.bind('open',toggleLink);
moreInfo.bind('toggle',closeLink);

Here's how I'd probably code this:
// Get references to our links.
var toggleLink = $( "#toggle" );
var closeLink = $( "#close" );

var moreInfo = $( "#more-info" );

// I open the more info container.
var openInfo = function(event){
obj = event.data.toggleItem;
obj.slideDown( 500 );

};

// I close the more info container.
var closeInfo = function(event){
obj = event.data.toggleItem;
obj.slideUp( 150 );
};

// I close the more info container.
var toggleInfo = function(event){
obj = event.data.toggleItem;
if (obj.is( ":visible" )){
// Close it.
obj.close(event);
} else {
// Open it.
obj.open(event);
}
};

var ICloseable = {
"open" : openInfo,
"close" : closeInfo,
"toggle" : toggleInfo,
"bind" : function(action,obj) {
obj.bind('click',{"toggleItem" : this},this[action]);
}
}

// Attach the ICloseable Interface
$.extend(moreInfo,ICloseable);

// bind any links to the object.
moreInfo.bind('toggle',toggleLink);
moreInfo.bind('toggle',closeLink);

As you can see, I use the event object in the delegates.

I took out the preventDefault() behavior, but if you wanted to add it, you could create a bool variable in the bind event which toggled that behavior pretty easily.

those "Head First" cloned schemes are not so useful, they have somewhat of "deja-vu" appeal...

"For example, let's stay that I have multiple elements that I want to open / close, but they don't necessarily have the same open / close durations."

I wouldn't overload the event object here. I would probably add the durations to the ICloseable interface. The general idea would be that objects know how to close themselves and you want your links to just call a close method on the object.

The only think I would attach to the event object is the target.

As for readability, the bind event for the interface system is easier to read than the click event in your example, but the rest of it is more complicated.

So, if you have lots of bind/click events then the Interface code would get more and more readable than the other way, I imagine.

It's also easier to pass off to other developers since all they need to know is the bind signature.

Finally, and here's where I use this sort of thing, I run loops where I bind a whole mess of objects. Since they all share an interface I can do something like

foreach (var obj in objList)
{
obj.bind();
}

It doesn't matter what the bind event does for these objects as long as they share the interface.
I admit, it does get pretty complicated in Javascript, though.

@rhett,

Point taken. At the very least I've properly de-railed this thread from Ben's very valid point.

"Ben - A Good Teacher"

Really I am seeing good teacher by watching at least one video per day.
(Hey! don't make this as commercial online tutorial)

Demos are awesome with crystal clear explanation.
Observing your efforts in making the demos interesting with the beautiful images and even in variable names :)

And all your works are forcing/keeping target me to do lot of work on coldfusion n JQuery.

Thanks alot Ben!

With Best Regards,
Raghuram Reddy
http://raghuramcoldfusion.blogspot.com/

A couple of things. One you embed the initial state of of more-info in the CSS. IMHO, that behavior should be in jQuery:

moreInfo.hide();

It shows that the behavior your toggling and closing is more-info visibility.

The second is minor that after you click on toggle the text doesn't change to reflect you want to display or not display more-info.

The only reason I brought it up was that when reading ur code, I had to stop and jump to the CSS to find out what the initial state is.

Context-switching problem for me. The context-switch that I'm referring to, is of going from a imperative to declarative to imperative paradigm. That is the only reason why I would include the initial state being set in script versus CSS.

This is an awesome blog. I love it.

Hi Ben, I have an instance where simulating a users click event is quite in order. It's an ajax page where a user can select a language by clicking on an image. But, when the application loads the default language is already set. And, the options available there under is only available if the user clicks on the default language image. The php/html looks like this:

<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td>
		<?php
 
		$languages = tep_get_languages();
 
		if(count($languages) > 1) {
 
	echo tep_image(DIR_WS_IMAGES . 'icon_exclamation.png', IMAGE_ICON_EXCLAMATION).'&nbsp;'.AM_AJAX_SELECT_PREFERED_LANGUAGE.'<br>';
 
			foreach ($languages as $amLanguage) {
//Begin New code set the default language
if ($amLanguage['id'] == AM_DEFAULT_LANGUAGE_ID){
			?>
<!--Bug fixed Original & modified to//-->
			&nbsp;<input id="admin_language" type="image" src="<?php echo DIR_WS_CATALOG_LANGUAGES . $amLanguage['directory'] . '/images/' . $amLanguage['image'];?>" title="<?php echo AM_AJAX_CHANGES;?>"
	<?php echo ($attributeManager->getSelectedLanguage() == $amLanguage['id']) ?
	'style="padding:1px;border:1px solid #006600;" onclick="return false;"' : 'onclick="return amSetInterfaceLanguage(\''.$amLanguage['id'].'\');"';?> >
			<?php
}else{....
//End new code
			?>

So I want jquery to simulate a users click event on the default language with the id="admin_language"

I have tried to get it done, without luck so far.

Could you please help me out?
Sara

O' Ben, that's well above my head. I am no coder, but I do have visions out of users perspective. I guess I have to look deep into the code and try to learn something...
Sara