Fork me on GitHub

Drew's World

Rants, News, Etc on my Life and Projects

House Demo Day 1

by Andrew De Ponte (@cyphactor)

As some of you may know from previous posts. I recently bought my first house which is very much a fixer upper. Anyways, today Aly and I just completed the first day of demo and here is a small walk through with Aly’s new HD Flip.

Bought My First House

by Andrew De Ponte (@cyphactor)

Phew, the stress and hesitation is over with. Today, I closed on my first house. I am now a home owner. Can you believe that? I can’t. It hasn’t really settled in yet that I now own my own home. Now, the excitement and overwhelming feeling comes of the massive project that is a fixer upper house. However, with that also comes the great satisfaction and feeling of accomplishment after I make every addition step towards my goals for this house.

Everyone keeps telling me that the tasks around the house will never end. I am sure they are right, but that is also part of what I love about it. It continually evolves as technology and time progress just as any good software does. Beyond that, I now get to make sure that it is the way I want it. In fact the two primary factors I took into consideration while looking for houses were Location, Location, Location, Location and a good base (framing, foundation) to start from. Oh, and I of course had to consider the money part as well. Luckily I found a repo that needed a lot of work but had an awesome location and fell just within my budget.

Buying this house was a very difficult decision to make as I am currently involved in a number of side software projects besides my normal full time job. However, everything seemed to fall into place and it felt like the right time. So, after weeks and weeks of contemplation and discussion with friends and family I finally decided to take the leap, and here I am now a home owner. Oh the life!

Ajax Request Generated JavaScript

Hi all. Recently I was working on a web application that utilized JavaScript and AJAX. Who would have guessed. Anyways, I ran into a bit of a snag when I had the AJAX requests result defining a JavaScript snippet. The problem was that AJAX requests strip out script tags and don’t let them get inserted into the DOM tree. I am not sure why this is the case, maybe for some security reason that I have yet to see. Anyways, this creates a bit of a problem when you are trying to do things like use a JavaScript calendar widget inside the AJAX result set when the calendar widget needs to be initialized by some JavaScript code that is unique to that calendar.

Despite all my efforts in googling I failed to find a clearly defined solution. Bits of the sites have clues but none of them had actual solutions with enough detail to make it reproducible. Hence, after exploring all of these hints and all of the combinations of the hints I managed to find a working solution for using JavaScript that is dynamically generated as part of the result of an AJAX call.

Lets assume that you are using Prototype because I was, and it is a very common AJAX JavaScript library. The first thing I looked to find out was if there was an event fired off to the portion that is generated by AJAX request. The answer is, not that I could find. There are events in the top level document but none which really help you. Since, there are no events or callbacks in the child document (one produced by the ajax call and loaded into the top level) and no script tags carried through to the top level document we first have to figure out a way to get the JavaScript code to the top level document and then secondarily have JavaScript evaluate it.

In order to get the script tags content to the top level document I had to create a div that contained the raw content of the script tag that I wanted available. Beyond that the div had to have a unique ID that was able to be obtained programatically in the top level document using JavaScript. An example of this might look as follows (html.erb template of JavaScript):

<div id="<%= calendar_id %>_script" style="display: none;">
  <%= calendar_id %>SelectHandler = function(type, args, obj){
    var selected = args[0];
    var selDate = selected[0][0] + "-" + selected[0][1] + "-" + selected[0][2];
    <% if txt_input_id.nil? %>
      document.getElementById("<%= calendar_namespace %>_<%= calendar_id %>").value = selDate;
      <%= calendar_id %>hide();
    <% else %>
      document.getElementById("<%= txt_input_id %>").value = selDate;
      <%= calendar_id %>hide();
    <% end %>
  }

  <%= calendar_id %>show = function (){
    var cur_z = $('<%= calendar_container %>').style.zIndex;
    if (!cur_z) {
      cur_z = 1;
    } else {
      cur_z = parseInt(cur_z);
    }
    $('<%= calendar_container %>').show();
    $('<%= calendar_container %>').style.zIndex = (cur_z + 1);
  }

  <%= calendar_id %>hide = function(){
    var cur_z = $('<%= calendar_container %>').style.zIndex;
    if (!cur_z) {
      cur_z = 1;
    } else {
      cur_z = parseInt(cur_z);
    }
    $('<%= calendar_container %>').hide();
    $('<%= calendar_container %>').style.zIndex = (cur_z - 1);
  }

  YAHOO.namespace("<%= calendar_namespace %>.<%= calendar_id %>");
  YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.init = function() {
    YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.Cal = new YAHOO.widget.Calendar("<%= calendar_id %>","<%= calendar_container %>", <%= @opts %>);

    YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.Cal.selectEvent.subscribe(<%= calendar_id %>SelectHandler, YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.Cal, true);
    YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.Cal.render();
  }
</div>

This div with a unique id gives me the capability of pulling out the associated raw JavaScript that is the innerHTML content of this div in the top level document and having the top level documents JavaScript evaluate it. This can be done with a JavaScript function like the following:

function createRowEditCalendar(id) {
  var script = document.getElementById("cal_visited_on_" + id + "_script").innerHTML;
  eval(script);
  var my_init_cmd = "YAHOO.namespace_o_hell.cal_visited_on_" + id + ".init();";
  eval(my_init_cmd);
  return true;
}

The next logical question of course is what event or callback launches the above JavaScript function in the top level document. The answer in this case is simply to use the Prototypes Ajax.Updater onComplete callback by having it first programatically figure out the name of the div using the reproducible naming scheme and then call the above JavaScript function passing it the necessary id to access the hidden JavaScript div. This might look something like the following:

<input type="button" id="rowedit_create_button" value="Create" onclick="new Ajax.Updater(<% if prefix %> '<%= prefix %>_rowedit_data_rows' <% else %> 'rowedit_data_rows' <% end %>, '<%= urls[:create] %>', {asynchronous:true, parameters:$(<% if prefix %> '<%= prefix %>_rowedit_create_form' <% else %> 'rowedit_create_form' <% end %>).serialize(), insertion: Insertion.Bottom, onComplete: function() { var drows = document.getElementById('rowedit_data_rows'); var last_row_id = drows.lastChild.id; last_row_id = last_row_id.replace('edit_', ''); last_row_id = last_row_id.replace('_row', ''); createRowEditCalendar(last_row_id); } });"/>

Assuming that you have those three components in place and properly setup with all the syntax correct you should have a working solution. Note: Be very careful of syntax errors in the JavaScript inside the eval() method because FireBug won’t detect them, or run-time errors in the JavaScript anywhere because not all of them will be detected by FireBug. Anyways, hope this helps someone out there, it sure would have helped me if I had it.

iPhone App Loading Screen

by Andrew De Ponte (@cyphactor)

Hi all. If you don’t know already I have been playing with some iPhone app development pretty heavy lately. One of the interesting things which was some what more difficult to find was how to create a loading screens in iPhone apps. After I bit of googling and some reading of different forums I finally narrowed it down. It is handled automatically if you simply created a PNG file called Default.png that is 320 x 240 pixels with a 160 ppi and place it in your projects Resources file. Once in you Resources it will be displayed during the time that the application is loading. If you need to extend the time to get your splash screen to stay on the screen because your code is god like and fast simply tack a sleep or something in your applicationDidFinishLaunching method.

Trac Ticket Creator

by Andrew De Ponte (@cyphactor)

Hello all. I have been using Trac for many years now and I have always had one issue with. Creation of large numbers of tickets, large numbers being 10 to 20. The interface just doesn’t make it easy. So early this evening I finally decided I was going to do something about it. So, I went to http://trac-hacks.org/wiki/XmlRpcPlugin and checkout out and installed the code on one of our Trac servers. Then, I wrote a simple python wxWidgets script that connects via XML RPC to the Trac environment and provides a much quicker and easier interface for creating large numbers of tickets.

The interface simply provides a milestone dropdown and then a textbox and that is it. Once you have selected a milestone you want the tickets to be associated with (generally a batch of tickets is associated with a milestone), you can type your ticket summary into the text box and simply press enter to create the ticket. Once you press enter and it creates the ticket it will clear the text box so that you can type the next ticket summary in and hit enter to create the next ticket.

Soon enough I will clean this script up and officially release it as on an open source app on the main site. If you are interested in this app before that time, feel free to hit me up.