Code Couch » Events http://www.codecouch.com The ramblings of two code monkeys Thu, 19 Nov 2009 15:47:59 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Replacement for “bind” or “bindAsEventListener” in jQuery http://www.codecouch.com/2008/12/replacement-for-bind-or-bindaseventlistener-in-jquery/ http://www.codecouch.com/2008/12/replacement-for-bind-or-bindaseventlistener-in-jquery/#comments Mon, 15 Dec 2008 20:21:47 +0000 Dan http://www.codecouch.com/?p=238 After working for many years with the Prototype JS framework, I decided it was time to bite the bullet and learn jQuery.

There were 3 reasons, really… 1: I’ve just started a new project and don’t need most of the bloat Prototype comes with; 2: I can now make a judgement call when it comes to choosing a framework; and 3: It’s another skill on my CV :o )

I’ve just spent the weekend reading jQuery in Action cover-to-cover, and I can highly recommend it for intermediate or advanced developers looking to see what it offers.

The one thing I miss from Prototype however are the “bind” and “bindAsEventListener” commands which can set the context (”this”) of the callback – in my case, the instance of a class.

After a bit of searching, I found this post by Andreas Gohr. It was coderjoe’s comment that set the wheels in motion. He showed that you could rewrite this Prototype code:

initialize: function() {
	Event.observe(someEl, 'click',
		this.doSomething.bindAsEventListener(this)
	);
}

as this jQuery code:

init: function() {
	var self = this;
	$(someEl).bind('click', function(eventData) {
		self.doSomething(eventData, self);
	});
}

The bind (and related) method allows you to pass three parameters, however: the event type, some data, and a callback function. If the data parameter is omitted, the callback can be put as the second parameter.

So, we can re-write that last example using the second data parameter, removing the need to set a scoped variable:

init: function() {
	jQuery(someEl).bind('click', {thisContext:this}, function(eventData) {
		eventData.data.thisContext.doSomething(eventData);
	});
}
]]> http://www.codecouch.com/2008/12/replacement-for-bind-or-bindaseventlistener-in-jquery/feed/ 0 How to prevent page reloading with a non-submitted form http://www.codecouch.com/2007/08/how-to-prevent-page-reloading-with-a-non-submitted-form/ http://www.codecouch.com/2007/08/how-to-prevent-page-reloading-with-a-non-submitted-form/#comments Tue, 07 Aug 2007 11:12:03 +0000 Jeff http://www.codecouch.com/?p=126 The following example page shows how you can test whether a form has been changed, and inform the user if they navigate away from the page without submitting the form (whilst letting them change their mind and remain on the page).

This technique is suitable for IE6, IE7 and Firefox and relies on the onbeforeunload event to allow the user to change their minds and remain on the page (therefore allowing them to submit the form and not lose data).

Note the onsubmit event being added to the form during the initialisation process – this is to disable the onbeforeunload event from running the preUnload() method when the form is actually submitted.

<html>
<head>
<title>Prevent accidental page reload</title>
<script type="text/javascript">
/* check to see if form field values have changed */
function checkForFormChanges()
{
  var l_oForm = document.getElementById('mainForm');
  var l_pInputs = l_oForm.getElementsByTagName('INPUT');
  for (var loop=0, max=l_pInputs.length; loop<max; loop++)
  {
    if (l_pInputs[loop].defaultValue != l_pInputs[loop].value)
    {
      g_bPreventUnload = true;
      break;
    }
  }
}
 
/* method to run as the page is about to unload */
function preUnload()
{
  checkForFormChanges();
  if (g_bPreventUnload)
  {
    var l_sMessage = "You made changes to the form. ";
    l_sMessage += "If you continue, they will be lost.";
    try
    {
      window.event.returnValue = l_sMessage;
    }
    catch(e)
    {
      // swallow firefox error
    }
    return l_sMessage;
  }
}
 
/* clear onbeforeunload event when the form is sent */
function clearUnload()
{
  if (window.detachEvent)
  {
    window.detachEvent("onbeforeunload", preUnload);
  }
  else
  {
    window.onbeforeunload = null;    
  }
}
 
/* initialise the page, attaching the DOM events */
function init()
{
  window['g_bPreventUnload'] = false;
  if (window.attachEvent)
  {
    window.attachEvent("onbeforeunload", preUnload);
  }
  else
  {
    window.onbeforeunload = preUnload;
  }
  document.getElementById('mainForm').onsubmit = clearUnload;
}
 
window.onload = init;
</script>
</head>
<body>
<form action="" method="get" id="mainForm">
  <fieldset>
    <input type="text" name="reason" value="initial"/>
    <input type="submit" name="submit" value="Send Form"/>
  </fieldset>
</form>
</body>
</html>

If the contents of the form field in the example above is changed and the page is reloaded (or the user tries to visit another URL), a message will show that allows the user to cancel the page being reloaded etc. This will not happen if the form field contents are not changed (nor when the form is submitted).

]]> http://www.codecouch.com/2007/08/how-to-prevent-page-reloading-with-a-non-submitted-form/feed/ 0