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.
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.
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.
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.
