Very Nice Simplicity in Javascript
One of the things I really like coding is when a simple solution presents itself. There are a lot of times when a language and toolkit really give you only the preferred method to do something. But every now and then, a language will really lend itself to be able to solve the same problem in several different ways, and a toolkit will embrace that philosophy.
This morning I ran into the situation with a simple Bootstrap modal dialog.
This is what I had originally:
<a id="changeOwner" data-toggle="modal" data-target="#contact_modal">Owner:</a> ... <script> $('#contact_modal').on('show.bs.modal', function(e) { console.log('loading contacts from service...'); loadContacts(); }); </script>
and for the most part, this was working just fine. But occasionally, I would notice that clicking on the link didn't show the modal window, and no amount of clicking would solve the issue. It's as if something on the page load that time left the modal in a state where it just wasn't able to be raised. No errors. Just nothing happened.
So I thought: Why not be more overt about it?, and so I changed the structure to be:
<a id="changeOwner" onClick="pullUpOwners();">Owner:</a> ... <script> function pullUpOwners() { console.log('loading contacts from service...'); $('#contact_modal').modal('show'); loadContacts(); } </script>
where we are now just had the link directly call the function, and the function directly tell the modal to show itself. The state of the modal was then unimportant, and the acts are now being far more overt. This is a lot more overt, and in the end - simpler.
The great news is that this new method works every time. There are no mis-loadings and possible bad modal states. This makes the click reliable and that's really the point of this... to gain the reliability the previous method didn't have.
It's really nice to see that such a simple change yields the exact results I was looking for. 🙂