JavaScript references

I just found Chris Shiflett's April 26 posting with a great list of references for JavaScript. The first one I have started reading is "JavaScript for PHP Developers" by Stoyan Stefanov. It is one of the most clear and concise descriptions I have found to date as I try to apply my knowledge of other programming languages to JavaScript.

Miscellaneous notes and thoughts

While working on integrating an instance of SlickGrid into a project file today, I discovered that all the rows had white backgrounds. In all the examples, the rows alternate colors for easier reading.  It took a while, but I traced the problem down to a conflict in the CSS for .ui-widget-content .  After adding the following to a .css file that loads at the end of the queue, my SlickGrid now has alternating gray and white rows as needed:

.ui-widget-content.slick-row.odd
    {
    background-color:white;   
    }
.ui-widget-content.slick-row.even
    {
    background-color:rgb(250,250,250);   
    }

The current problem I am working on is the inconsistent alignment and width of SlickGrid headers and their associated data cells. It is similar to the problem shown here: http://stackoverflow.com/questions/8559487/slick-grid-header-row-cell-alignment

Update 12:20

What appears to be happening is that the column width is set, for example, to 50. However, the elements added for the sortable and resizable properties add width to the header (about 10 pixels), but not to the cell.

Strangely, it very always becomes properly aligned if I hold down the shift key and refresh the page, even though no changes are made to code or CSS between page loads.

If I set the resizable and sortable properties to false, then everything consistently aligns properly on every page load/refresh.

Update 16:05 

I have spent much of today researching this error, with little advancement.  I tried to rebuild and reproduce the problem in jsfiddle.net, but it aligned properly there.  I tend to think that the cause is related to browser rendering and CSS caching or interpretation. It has been tested on Mac and Windows in Firefox, Chrome and IE. The misalignment is not consistent or predictable.  In Firefox, if I first use Chris Pederick's Web Developer toolbar to clear the cache, the SlickGrid always loads with proper alignment.

So far I am impressed by the capabilities of SlickGrid. My current project has so many jQuery plugins, other modules and CSS files there are bound to be conflicts.

Update 18:50

I haven't been able to consistently reproduce the problem discussed above, so I have moved on. I am now working on retrieving data from the database via jQuery ajax. In the past I have always written my own ajax functions, but have decided to go with jQuery for this project since its requirements may eventually grow beyond the simple tools I have previously built.

So far, the method has been very simple. I need the ajax to be called when a user clicks on a row in the SlickGrid.  In the grid's setup JS, I added:

grid.onClick.subscribe(function(e, args) {
        var cell = grid.getCellFromEvent(e);
        var rowClicked=cell.row;
        var clickedItem = gridData[rowClicked].id;

        var request = $.ajax({
              url: "myScript.php",
              type: "POST",
              data: {id : clickedItem},
              dataType: "html"
            });

            request.done(function(msg) {
              alert(msg);
              });

            request.fail(function(jqXHR, textStatus) {
              alert( "Request failed: " + textStatus );
            });
        });

Now I need to write PHP code to retrieve the specified record from the database, convert the data into JSON and send it back in order to populate the form for editing.

Thought for the day: Craftsmanship

It has always been important to me to try to get my projects' source code to be as organized and perfectly laid out as the visible user interface. Why? Partly because it makes future maintenance and upgrades easier, but there's also something to be said for pride of craftsmanship. Even though virtually no one is going to view the source of the websites and apps I design, there is value to me in knowing every part of the project is done as clean and artful as possible.

This concept was highlighted by a quote I read by Steve Jobs' biographer Walter Isaacson:

"One of the most important things he taught Steve was [that] it's important to be a great craftsman, even for the parts unseen. When they were building a fence, he said, 'You have to make the back of the fence that people won't see look just as beautiful as the front, just like a great carpenter would make the back of a chest of drawers ... Even though others won't see it, you will know it's there, and that will make you more proud of your design.'"

( source )

Now that I am using the Eclipse IDE for my work, I expect that making beautiful source code will be easier than ever.

The day's work awaits... Today I will return to working on a GIS UI in JavaScript and PHP, with jQuery and the Google Maps API.

Working notes January 26

I just came across a block of CSS that I generated a while back using http://www.colorzilla.com/gradient-editor . This is a useful tool.

Useful URLs for today

Today I am working on forms. My goal is to have forms in the current project look cleaner and more modern than default HTML. 

The base I am building from:
http://line25.com/tutorials/create-a-stylish-contact-form-with-html5-css3

How to make form elements float into the same line instead of vertically stacked:
http://stackoverflow.com/questions/2306117/radio-buttons-and-label-to-display-in-same-line

A good toolset for building HTML5 +CSS + JS forms
www.reformedapp.com/

This appears to be a promising tool for creating tree controls in HTML5+jQuery
http://www.jstree.com

Some tips on styling HTML dropdowns using only CSS:
http://stackoverflow.com/questions/1895476/how-to-style-select-dropdown-with-css-only-without-javascript

Drupal frustrations

After more than 10 years of building all my software and website coding from zero with primary programming languages like VB6, ASP, PHP, ActionScript and JS, I have begun adopting open-source packages due to their advanced feature sets.

My newest exploration is Drupal.  In many ways I am very impressed with its capabilities. However, one task that seems to me to be a simplistic task has cost me more than two days of work, and now it's early on a Sunday morning and it's still consuming my thoughts: How to make the content of a node visible on a non-Drupal external site.

I started by installing the Services 3 module, configuring the REST server and its endpoint. After hours of fruitless research, I finally discovered a posting with a good explanation of accessing Drupal data externally with authenticated access via REST.

My attempts to implement that were unsuccessful. As I posted on drupal.stackexchange.com, the Drupal system would recognize my login and authenticate my session, but I still can't retrieve a node's content.

I posted another request for help on any method to see Drupal node data externally, and received the suggestion to use feeds. So, this morning I have been researching that avenue.  So far, success has been very limited. Based on http://www.group42.ca/drupal_6_rss_omnibus I was able to finally see something from my Drupal site by requesting the url my-site.com/drupal-folder/rss.xml.

However, due to the purpose of my Drupal installation, it is locked down to require authenticated access for everything. At this point I am stymied by two problems using the Atom/RSS technique: I haven't seen documentation to do an auth login to request RSS data, and so far I can only see as RSS what appears on the Drupal front page.

Back to the research...