A juggling technophile shares personal stories, challenges, humor and perhaps some political commentary.
I am loving working with jqGrid. My latest discovery is the ease at which elements on the grid can be changed. For instance, if you want to change the default "View 1 – 10 of 98" you can do it in either the language file or simply by adding a parameter to the grid:
recordtext: "View {0} – {1} of {2} addwhateveryourwant",
And now for something completely different…
Let’s say you have a table that could have infinite rows. The table has an id but none of the other elements (ie. we won’t be traversing by id). The column to the furthest right of the row has an anchor tag in the for of an <a href> There are no other anchors on that row. What I want to do is when the anchor tag is clicked, have the <a href> text in the row above the clicked on turn bold and only that <a href>. Sample table:
<table id="tbl">
<thead>
<tr>
<th>col 1 label</th>
<th>col 2 label</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>sometext <a class="tt" href="#">link</a></td>
</tr>
<tr>
<td>two</td>
<td>moretext <a class="tt" href="#">link</a></td>
</tr>
<tr>
<td>three</td>
<td>differenttext <a class="tt" href="#">link</a></td>
</tr>
<tr>
<td>four</td>
<td>othertext <a class="tt" href="#">link</a></td>
</tr>
</tbody>
</table>
So, if I click the link in row three, I want the text "link" in row two to become bold. This is using jquery and traversing this is kicking me hard.
jQuery problem:
<table>
<tr><td>one</td><td>two</td><td>three</td><td><a class=”foo” href=””>click me first</a></td></tr>
<tr><td>one</td><td>two</td><td>three</td><td><a class=”bar” href=””>click me second</a></td></tr>
</table>
What jQuery would allow me to click on "click me second" and change the color of the text "click me first"?
It’s a little more complicated than that. The real source has a plus image on the first row. Once you click that I use .hide() to make the plus go away. I create the 2nd row which has a minus image and a plus image. If you click the plus image, it disappears and creates a third row. The minus image, should 1st) cause the immediate plus image above it to appear 2) then disappear its own row. All plus images have a class of "addrow" and minus images have a class of "deleterow" I thought prev() would be doing it but I get nothing. Specifically .prev(‘.addrow’).show();
Let me reach out to the community for a moment. I’m trying to deliver a movie to be played in a web browser. The movie must play in Internet Explorer 6, 7 and 8, Firefox and Safari. The movie sits on a LAMP box. The movie is roughly 35MB windows media (WMV). jQuery is available. The challenge: Deliver the movie to the client without the client impatiently clicking the play button repeatedly (elevator syndrome), reloading the page, or giving up and leaving. This implies some sort of progress bar or loading spinner. I can’t seem to get a loader to work to save my life.
I’ve tried:
The goal is simple: Take a large wmv movie and present a loading indicator until the movie is cached in the user’s browser. This one is giving me a real hard way to go.
The stuff that I’ve been working with today:
I often get the feeling that most people have no idea what I do down in this dungeon. Here’s a sample:
In the next hour, I will write, test and prove some php and JavaScript+jQuery to present a table of data, allow a user to click a delete icon, use a modal to prompt for delete confirmation, then remove the data from the database and the row from the table without a page refresh. Will work in IE6, 7, Chrome, Safari and Firefox.
This is also a micro-milestone. I often write these down, although I rarely publish them, when the number of tasks I have is overwhelming, or I have coder’s block, or I need motivation. Giving yourself small, achievable milestones can lead to great productivity.
Update: Had a digression. To get the new code to work I had to upgrade jQuery’s UI from 1.5.3 to 1.7.1. This was well worth the effort. They’ve done a great job with 1.7.1!
I’m working on a project that has compatibility with Internet Explorer 6 as a major requirement. This means all appearances, all Ajaxy functionality, every aspect of the web application should look and perform in IE6 just as it would in Firefox, Chrome, IE7, IE8, and Safari. One of my favorite pieces of code is "document.getElementById()" but special cases have to be considered for IE 6. As an example, you can use getElementById to change the value of a hidden form element:
<input type="hidden" id="foo" name="foo" value="default value">
<input type="submit" id="goBtn" name="goBtn" value="Process..." onclick="document.getElementById('foo')
That code will not always work. jQuery comes to the rescue! Rather than write lines and lines of additional code for browser testing and coding for a special case, we can simply replace "document.getElementById(‘foo’).value=’anothervalue’;" with "$(‘#foo’).val(‘anothervalue’);" and the code will work.
<input type="hidden" id="foo" name="foo" value="default value">
<input type="submit" id="goBtn" name="goBtn" value="Process..." onclick="$('#foo').val('anothervalue');">
I cannot sing jQuery’s praises enough!
I am coming to the end of a project and have an opening in my schedule. My strengths are programming in PHP, ColdFusion, JavaScript and jQuery, CSS, and HTML. I most frequently work with MySQL or MS SQL but can work on most database platforms. Code I write validates and is W3C compliant. I can also write Section 508 compliant code. I carry a project from concept to production as project manager, independent developer, and/or project team member. In addition to custom original code, I work well with open source projects and APIs. I usually telecommute but am not adverse to working onsite or traveling. I am not an artist and typically hire a graphic artist to provide the design for each project. I enjoy WordPress customizations (but have not done custom work to either Reality Me or Domestic Psychology). Please send referrals or inquiries to jugger@gmail.com or call +1-865-898-7189. Thank you!
I’ve solved it! A week ago started a series of unfortunate events that program progress on my application to a screeching halt. My efforts and work did not quit but every fix seemed to reveal another bizarre issue. But surely a professional programmer could figure all this out in a day rather than a week? No. Problem solving isn’t always that simple. This was akin to hiring a contractor to add a room to the back of the house but in starting to dig his foundations he discovers an old septic tank buried behind the house and in trying to remove it he discovers a cave under that. My problem began with a test when I cleared all my cookies.
On problem set off another. The development server, long overdue for an upgrade, lost its mind but this wasn’t immediately evident to me so I did a line by line inspection of the code searching for the answer to some really whacked out behavior. Eventually I realized the server was shot and moved to another server. After fixing several issues either hidden and discovered in the line by line inspection or caused by experimentation in attempts to fixed the oddities caused by the flaked out server, I eventually discovered the source of the original issue. In short, jQuery’s .filter gets overridden by jQuery’s .listen plugin so it appears.
jQuery has a built-in traversing function called filter() but handlers for events get bound only on the initial rendering of the DOM. If the DOM is modified dynamically, for instance if content is added with AJAX, then the newly added event handlers will not be recognized by filter(). Fortunately, Ariel Flesler stepped up and created a plugin called listen() (use the 1.0.3 version!) which registers the handlers for the matching events and this works for new content added via AJAX or other DOM manipulation. It seems, unless I am misinterpreting something, that listen() overrides filter() so if you have both filter() and listen() on the same page, your filter() events will never fire.
Yesterday my web application quit working. I simply cleared the domain cookies and the session cookies. It should have been no big deal but an important piece of JavaScript quit working. I have a script that adds some HTML to the DOM and looks similar to:
snafu("<tr><td class=\"fooclass\"><a class=\"expander special\" href=\"index.php\">go somewhere</a></td></tr>");
So this worked fine until I cleared cookies and now the generated source in the browser (confirmed in Firefox and Chrome) looks like:
snafu("<tr><td class=\"fooclass\"><a class="\""expander special\" href=\"index.php\">go somewhere</a></td></tr>");
Note that the anchor has inexplicably changed from <a class=\"expander special\" href= to <a class="\""expander special\" href=. The obvious thought is that a session variable is being expected in building the javascript code which in turn changes the DOM but that session variable is now returning NULL. That is still likely to be the problem but yesterday’s line by line inspection of the code showed no flaws. Today I am going to eliminate the server as an issue. The most recent code changes have not been migrated to the production server and it does not reproduce the problem so I’m setting up a staging server today to see if it shows the same problem as the development server. What a pain!
No matter how long you do something, there is always more to learn. You’d think that since I’ve been doing HTML coding since around 1993, I’d pretty much know every in and out and every little tag and peculiarity regarding HTML. Not so. See, we form habits. We get into patterns. Specs change but we retain earlier hacks and assumptions. Today I learned an absurdly simple thing. Maybe I knew this and forgot. I rarely use tab orders on my forms. Most of the forms I create are very top down so the natural tab order is sufficient. In computing, counting starts at zero. But in HTML tab order, zero means exclude that form element from the tab order.
To exclude an element from the tab order, set the value of tabindex to 0. [Source, Webcheatsheet.com, How to Control Tab Order in HTML]
Because of my computer science studies, programming in PHP, JavaScript, C and so on, my inclination is to always begin with zero. Of course, my favorite web application language is ColdFusion and it always starts at one. I can only assume the Allaire brothers were originally targeting non-programmers.
HTML is about to become HTML 5. Funny enough I just traded my HTML 3.2 book at McCay’s a few weeks ago. Maybe I should have kept it and re-read it.
Update Jan 12, 2009: Ian Tempest noted in the comments that zero does not exclude an element but rather moves it to the end of the tab order. From the W3C HTML 4.01 specification:
Those elements that do not support the tabindex attribute or support it and assign it a value of “0? are navigated next. These elements are navigated in the order they appear in the character stream. [Source, W3C, 17.11.1 Tabbing navigation]
I love jQuery! And its UI library. But I’m having difficult implementing a simple date picker. The datepicker method is throwing an error for me: "inst is undefined datepicker" The solution of adding "{onSelect: function() {}}" did not work. I’m at the point of no return. Choosing a different calendar application.
Update: Solved! I had an artifact left over from trying to implement the Yahoo! User Interface (YUI) Library‘s calendar. jQuery’s UI datepicker conflict’s with YUI’s datepicker.
Runners get a runner’s high. I’ve got a coder’s high. My head is buzzing as I’ve been hitting the keys hard. My current PHP application has dynamic content loaded via AJAX but when the user navigates with the browser’s forward or back buttons the state is lost, that is, all the dynamic content disappears. Also if the natural navigation of the application takes the user away from the dynamically generated content, when they return the content is lost and the user frustratingly has to drill down, dynamically loading more content, to get back to where they were. Using jQuery, some custom JavaScript, and some fandangled PHP, I have overcome this obstacle and created a state engine that remembers which content was loaded and re-presents it on the screen whenever the user navigates with the browser’s forward or back buttons or the applications natural navigation. I’ve just finished the behind the scenes mechanics of this code and now have to fix the presentation level (after a 10 minute break). Whew! This was fun!
For those looking, jQuery JavaScript Library support on IRC is on the Freenode servers at #jquery.
Update: Also on Freenode, #jquery-ui regarding jQuery UI.
For those looking, Prototype JavaScript Framework support on IRC is on the Freenode servers at #prototype.
