Skip to main content

jQuery - event bubbling


      <div id="selectionsPane">
          <label for="bootChooserControl">Boot style:</label>
          <select id="bootChooserControl" name="style"></select>
          <label for="colorChooserControl">Color:</label>
          <select id="colorChooserControl" name="color" disabled="disabled"></select>
          <label for="sizeChooserControl">Size:</label>
          <select id="sizeChooserControl" name="size" disabled="disabled"></select>
        </div>


One capability of the event model that often gets ignored by many a web developer
is event bubbling. Page authors frequently focus only on the targets of events, and forget
that events will bubble up the DOM tree, where handlers can deal with those events in
more general ways than at the target level.
If we recognize that removing the option with a blank value from any of the three
dropdowns can be handled in the exact same fashion regardless of which dropdown is
the target of the event, we can avoid repeating the same code in three places by establishing
a single handler, higher in the DOM, that will recognize and handle the change
events.
Recalling the structure of the document, the three dropdowns are contained
within a <div> element with an id of selectionsPane. We can handle the removal of
the temporary option for all three dropdowns with the following, single listener:
$('#selectionsPane').change(function(event){
$('[value=""]',event.target).remove();
});
This listener will be triggered whenever a change event happens on any of the
enclosed dropdowns, and will remove the option with the blank value within the context
of the target of the event (which will be the changed dropdown). How slick is that?
Using event bubbling to avoid repeating the same code in lower-level handlers can
really elevate your script to the big leagues!

Comments

Popular posts from this blog

Stretch a row if data overflows in jasper reports

It is very common that some columns of the report need to stretch to show all the content in that column. But  if you just specify the property " stretch with overflow' to that column(we called text field in jasper report world) , it will just stretch that column and won't change other columns, so the row could be ridiculous. Haven't find the solution from internet yet. So I just review the properties in iReport one by one and find two useful properties(the bold highlighted in example below) which resolve the problems.   example:
<band height="20" splitType="Stretch"> <textField isStretchWithOverflow="true" pattern="" isBlankWhenNull="true"> <reportElement stretchType="RelativeToTallestObject" mode="Opaque" x="192" y="0" width="183" height="20"/> <box leftPadding="2"> <pen lineWidth="0.25"/> …

JasperReports - Configuration Reference

Spring - Operations with jdbcTemplate

This class manages all the database communication and exception handling using a java.sql.Connection that is obtained from the provided DataSource. JdbcTemplate is a stateless and threadsafe class and you can safely instantiate a single instance to be used for each DAO.


Use of Callback Methods
JdbcTemplate is based on a template style of programming common to many other parts of Spring. Some method calls are handled entirely by the JdbcTemplate, while others require the calling class to provide callback methods that contain the implementation for parts of the JDBC workflow. This is another form of Inversion of Control. Your application code hands over the responsibility of managing the database access to the template class. The template class in turn calls back to your application code when it needs some detail processing filled in. These callback methods are allowed to throw a java.sql.SQLException, since the framework will be able to catch this exception and use its built-in excepti…