User:Frank Ralf/JavaScript2 - Revision history

Nakohdo: /* Search field changes */

2009-07-27T17:10:55Z

Search field changes

← Older revision		Revision as of 17:10, 27 July 2009
Line 175:		Line 175:
	<code php>		<code php>
	$(this.searchfield).keyup(function(event) {		$(this.searchfield).keyup(function(event) {
	oself.handle_keyup(event);		oself.handle_keyup(event);
	event.preventDefault;		event.preventDefault;
	});		});
	</code>		</code>

Nakohdo: /* Search field changes */

2009-07-27T17:10:25Z

Search field changes

← Older revision		Revision as of 17:10, 27 July 2009
Line 190:		Line 190:
	</code>		</code>

	However, I haven't noticed any change in behavior either way which ~~might be~~ due to my cursorily browser testing.		However, I haven't noticed any change in behavior either way which surely is due to my cursorily browser testing.

	=== Selection changes ===		=== Selection changes ===

Nakohdo: /* Selection changes */

2009-07-27T17:09:29Z

Selection changes

← Older revision		Revision as of 17:09, 27 July 2009
Line 212:		Line 212:
	</code>		</code>

			=== Search anywhere option ===

			The YUI code:

			<code php>
			// And when the search any substring preference changes. Do an immediate re-search.
			YAHOO.util.Event.addListener('userselector_searchanywhereid', 'click', function(e) { oself.handle_searchanywhere_change() });
			</code>

			And this is the jQuery version:

			<code php>
			$('#userselector_searchanywhereid')
			.click(function(event){oself.handle_searchanywhere_change()});
			</code>

			Note that with YUI you just use the element's ID as a selector whereas with jQuery you have to add the pound sign "#" to the ID like with CSS.



	[TODO]		[TODO]

Nakohdo: /* Search field changes */

2009-07-27T17:05:16Z

Search field changes

← Older revision		Revision as of 17:05, 27 July 2009
Line 191:		Line 191:

	However, I haven't noticed any change in behavior either way which might be due to my cursorily browser testing.		However, I haven't noticed any change in behavior either way which might be due to my cursorily browser testing.

			=== Selection changes ===

			This is the YUI code:

			<code php>
			// Hook up the event handler for when the selection changes.
			YAHOO.util.Event.addListener(this.listbox, "keyup", function(e) { oself.handle_selection_change() });
			YAHOO.util.Event.addListener(this.listbox, "click", function(e) { oself.handle_selection_change() });
			YAHOO.util.Event.addListener(this.listbox, "change", function(e) { oself.handle_selection_change() });
			</code>

			And this the jQuery equivalent, which is a bit less verbose due to jQuery's chaining capability:

			<code php>
			$(this.listbox)
			.keyup (function(event){oself.handle_selection_change()})
			.click (function(event){oself.handle_selection_change()})
			.change(function(event){oself.handle_selection_change()});
			</code>

Nakohdo: /* Search field changes */

2009-07-27T17:02:34Z

Search field changes

← Older revision		Revision as of 17:02, 27 July 2009
Line 180:		Line 180:
	</code>		</code>

	We add preventDefault() as a replacement for the following code in the handle_keyup() function:		We add ''preventDefault()'' as a replacement for the following code in the '''handle_keyup()''' function:

	<code php>		<code php>

Nakohdo: /* C) Replacing other event handlers */

2009-07-27T17:00:58Z

C) Replacing other event handlers

← Older revision		Revision as of 17:00, 27 July 2009
Line 159:		Line 159:

	== C) Replacing other event handlers ==		== C) Replacing other event handlers ==

			We can replace other event handlers in a similar way.

			=== Search field changes ===

			The YUI version:

			<code php>
			// Hook up the event handler for when the search text changes.
			YAHOO.util.Event.addListener(this.searchfield, "keyup", function(e) { oself.handle_keyup(e) });
			</code>

			And this is the jQuery equivalent:

			<code php>
			$(this.searchfield).keyup(function(event) {
			oself.handle_keyup(event);
			event.preventDefault;
			});
			</code>

			We add preventDefault() as a replacement for the following code in the handle_keyup() function:

			<code php>
			// If enter was pressed, prevent a form submission from happening.
			var keyCode = e.keyCode ? e.keyCode : e.which;
			if (keyCode == 13) {
			YAHOO.util.Event.stopEvent(e);
			}
			</code>

			However, I haven't noticed any change in behavior either way which might be due to my cursorily browser testing.



	[TODO]		[TODO]

Nakohdo: /* See also */

2009-07-27T16:42:41Z

Nakohdo: /* See also */

2009-07-27T16:41:36Z

Nakohdo: /* See also */

2009-07-27T16:41:18Z

Nakohdo: /* The task */

2009-07-27T16:40:04Z

The task

← Older revision		Revision as of 16:40, 27 July 2009
Line 133:		Line 133:

	:''I am pretty sure this is the first thing I tried, and it did not work reliably cross-browser. The only option was to throw away the old button and make a new one. However, I don't remember the details now, an they don't seem to have been preserved in CVS.''--[[User:Tim Hunt\|Tim Hunt]] 09:41, 27 July 2009 (UTC)		:''I am pretty sure this is the first thing I tried, and it did not work reliably cross-browser. The only option was to throw away the old button and make a new one. However, I don't remember the details now, an they don't seem to have been preserved in CVS.''--[[User:Tim Hunt\|Tim Hunt]] 09:41, 27 July 2009 (UTC)

			:: I tried myself altering your original code using .preventDefault() but that indeed didn't work across browsers. The magic with jQuery happens under the covers, see below. --[[User:Frank Ralf\|Frank Ralf]] 16:40, 27 July 2009 (UTC)

	:'' Hmm. Perhaps the problem is with what happens if you press enter when in the text field. If the browser can find a submit button, then perhaps it submits the form, or something like that. However, I am a bit suprised I wrote the code to replace the button without adding a comment explaining why it was necessary.''--[[User:Tim Hunt\|Tim Hunt]] 15:26, 27 July 2009 (UTC)		:'' Hmm. Perhaps the problem is with what happens if you press enter when in the text field. If the browser can find a submit button, then perhaps it submits the form, or something like that. However, I am a bit suprised I wrote the code to replace the button without adding a comment explaining why it was necessary.''--[[User:Tim Hunt\|Tim Hunt]] 15:26, 27 July 2009 (UTC)

			:: We'll cover that in the next section ;-) My preliminary testing shows that this will do nothing in FF and clear the search field in IE6. --[[User:Frank Ralf\|Frank Ralf]] 16:40, 27 July 2009 (UTC)

	=== The jQuery solution ===		=== The jQuery solution ===

← Older revision		Revision as of 16:42, 27 July 2009
Line 157:		Line 157:
	''"jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). Most properties from the original event are copied over to our wrapper object."''		''"jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). Most properties from the original event are copied over to our wrapper object."''
	:[http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29. event.preventDefault()]		:[http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29. event.preventDefault()]

			== C) Replacing other event handlers ==

			[TODO]

	== See also ==		== See also ==

← Older revision		Revision as of 16:41, 27 July 2009
Line 167:		Line 167:
	* [http://simonwillison.net/2007/Aug/15/jquery/ "jQuery for JavaScript programmers"] by Simon Willison		* [http://simonwillison.net/2007/Aug/15/jquery/ "jQuery for JavaScript programmers"] by Simon Willison

	* * [http://www.sitepoint.com/books/jsant1/ The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks] by James Edwards & Cameron Adams promotes accessible JavaScript solutions by following the principles of [[Development:Progressive enhancement\| progressive enhancement]] and [[Development:Unobtrusive_Javascript\| unobtrusive scripting]].		* [http://www.sitepoint.com/books/jsant1/ The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks] by James Edwards & Cameron Adams promotes accessible JavaScript solutions by following the principles of [[Development:Progressive enhancement\| progressive enhancement]] and [[Development:Unobtrusive_Javascript\| unobtrusive scripting]].


	[[Category:Javascript]]		[[Category:Javascript]]
	[[Category:AJAX]]		[[Category:AJAX]]

← Older revision		Revision as of 16:41, 27 July 2009
Line 164:		Line 164:
	* [[AJAX]]		* [[AJAX]]
	* [[Development:YUI]]		* [[Development:YUI]]

	* [http://simonwillison.net/2007/Aug/15/jquery/ "jQuery for JavaScript programmers"] by Simon Willison		* [http://simonwillison.net/2007/Aug/15/jquery/ "jQuery for JavaScript programmers"] by Simon Willison

			* * [http://www.sitepoint.com/books/jsant1/ The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks] by James Edwards & Cameron Adams promotes accessible JavaScript solutions by following the principles of [[Development:Progressive enhancement\| progressive enhancement]] and [[Development:Unobtrusive_Javascript\| unobtrusive scripting]].


	[[Category:Javascript]]		[[Category:Javascript]]
	[[Category:AJAX]]		[[Category:AJAX]]