Posted on 10 Comments

jquery challenge of the day

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.

Posted on Leave a comment

jQuery roadblock

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();

Posted on 1 Comment

Your thoughts on embedded WMVs with progress bars

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:

  • Various attributes on the object and embed tags
  • Using jQuery plugins like jQuery Media plugin and jMedia
  • Looked into other players and ruled out Flowplayer and SWFObject2
  • Tried getting Ajaxy but the document finishes before the movie completely downloads and the spinner quits too early.
  • I’m testing WVX streaming right now but it’s not looking good.
  • Some other stuff

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.

Posted on Leave a comment

What do I do?

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!

Posted on 3 Comments

I’m done with document.getElementById

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').value='anothervalue';">

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!

Posted on Leave a comment

Seeking Next Project

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!

Posted on Leave a comment

Week Long Programming Debacle

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.

Posted on Leave a comment

Another attempt at jQuery modals

Not long ago, I attempted to use jQuery to ease the pain of creating a modal popup for editing user data. One challenge is that the user data is edited from a tabular list of users. Since the page is not refreshed after the update, the changes must be dynamically reflected in the table. That’s an interesting challenge but not a huge problem. The problem I ran into was the jQuery modal plugins I tried using to make my cross-browser programming faster and easier was that none of them seemed to accommodate my lengthy forms.

jQuery has dozens of modal plugins and options including Dialog built into the UI. Which is your favorite? Have you had success with a modal allowing scrolling and still supporting IE6?

Update: jqModal, Facebox, SimpleModal, and Thickbox, direct link to SimpleModal, and Dialog. Think I’m going with Dialog.

Posted on 2 Comments

Today’s Coding Challenge

In one of my applications, I use jQuery’s UI Datepicker as part of the interface for easy date selection in adding and editing some data. I have two screens that show the current date. One screen is a report that says "Today’s date is…" and shows the current date. The other is the form for adding this data. The datepicker calendar is supposed to default to today’s date.

Problem 1: On the development server, the report and the form both default to today’s date. On the staging server, the report and the form both default to today’s date. On the production server, the report defaults to today’s date; the form defaults to December 31, 1998.Solved. In a special case, a null string was being passed when a date type was expected.

Problem 2: When editing, if the date is in the current monthmonths of March and November, the highlights for datepicker don’t work. The day still gets selected appropriately but the date itself is never highlighted making the user think they didn’t click the date. Click to see a working example of the problem. Update: This is partially fixed. In UI version 1.5.2, the highlight does not work in November or March. This is demonstrated at http://sidesigns.com/pub/datepicker/index152.php. I tested with the 1.6rc2 release candidate and November now works but March is still not highlighting correctly (the first week highlights but no others). This is demonstrated at http://sidesigns.com/pub/datepicker/index16rc2.php. I’ll be submitting a bug report to the jQuery UI team.

Posted on Leave a comment

jQuery’s datepicker driving me nuts

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.