mobile touch gotcha

I once made an angular firebase demo site called Fridge Magnets With Friends.
You can move magnets around on a virtual fridge. This involves a lot of dragging elements.
One day mobile drag stopped working, even tho I employed the clever jquery ui touch punch.

I spent hours switching the whole thing to use ngDraggable, because their mobile demo did work in mobile. Altho using ngDraggable required me to take out jquery (actually it didn't, but some forums said that would help make it work in mobile) - so I spent a while redoing the angular app without jquery.
Moment of truth: no luck.

Finally I hijacked the browser with a little shim code:

        $document.on('touchstart', function(e){

            console.log(e)

                            });

Because for the life of me I couldn't figure out why my elements weren't receiving the touchstart event in mobile.
This way I could see what element the e event was pointing to.
Turns out my footer CSS was very improperly done and covering the entire screen, so the event for touchstart, which has to have a stoppropogate() for other reasons in mobile only, never made it to the dragable elements.
Took out the footer and both solutions started working; however, jquery-ui + touch-punch still worked better than ngDraggable, so in the end, 4 hours of work (work that was, admittedly, kind of fun) got reduced to commenting out a couple lines of html. At least I understand mobile touch events now.

facepalms: 9.5

unexplainable 500 errors with flask and jquery ajax on google app engine

I was trying to do something simple - get a preloaded partial from the server via ajax. my api call worked directly in the browser, worked when I ran it with $.get() from the console after the page was loaded, but was returning 500 during page load (as in, only failing when it was called as js running at after dom load). I could confirm that the correct flask view was running and succeeding using logging, but the 500 I was getting had NO responsetext, and nothing useful..

After fighting and fruitless searching for 40 minutes, I disabled the flask debug toolbar. Voila! everything worked as expected.

Moral of the story: F$@# the flask debug toolbar.

facepalms: 8

Twitter is useless?

So I had a great idea for a JQuery plugin. What's better, I was going to write it too.

A single line initializes and adds the plugin to your page, which then allows people to tweet from said page, including a shortened link to said page, hash tags of your choice - but that's just the beginning. Then, the plugin retrieves all tweets with the same shortened link, organizes them using create_date and @whoever, and displays them on your page as hierarchical comments.

Basically, a totally painless and free commenting system hosted and authenticated by twitter, displayed on your page with one line. I like. Except for one problem - twitter search doesn't work for included URLs.

If anybody knows how to possibly retrieve all tweets about a given url (or the last 200), please let me know. It's a terrible wasted potential not to allow this.

For instance, here's a twitter account of mine from another project: . The last couple tweets have bitly links. You'd think a twitter search for the link would show up the tweet, but NO! nothing going. Even when you switch from their ridiculous "popular tweets" to "all tweets". What kind of tweet search misses on unique text from a tweet?

facepalms = only 2, but general annoyance is through the roof.

UPDATE:

I take it back - some urls hit, some don't. Even better. Possibly, broken urls don't hit? But I'm not sure.

holy sweet victory

Just figured out something that's been bugging me nonstop for weeks, which has no documentation online: the jquery plugin fancybox doesn't like to have its stuff overwritten, which is to say, you shouldn't define something like this:

var fancy_box_options = fancy_box_defaults;
fancy_box_options.type = 'iframe';
fancy_box_options.width = 696;
fancy_box_options.height = 499;
fancy_box_options.scrolling = 'no';
fancy_box_options["onStart"] = function(link){
var new_link = $.param.querystring($(link).attr("href"), "gmail=" + $("#gmail").val());
$(link).attr("href", new_link);
};

$("a.iframe").fancybox(fancy_box_options);
$("a.iframe_defaults").fancybox();

In one function, and then soon after define:

<% if current_user && @popup_help %>
var fancy_box_options = fancy_box_defaults;
fancy_box_options.type = 'iframe';
fancy_box_options.width = 696;
fancy_box_options.height = 499;
fancy_box_options.scrolling = 'no';

fancy_box_options.href = '<%= popup_help_path(:gmail => current_user.email) %>';
$.fancybox(fancy_box_options);

in another. You'll get a wholly unhelpful error about href being undefined.

All better now -
#facepalms only 4, because I already had a lot of trouble with this previously, I'm over it now, and the sweet release of figuring it out is worth so, so much.

Rails 3 Unobtrusive Javascript is Unintuitve

So what I wanted to do was link from a partial view to a controller method through a route which took a title parameter and from the controller method run a javascript file in order to append content to a div with a unique name defined by the title param.

In django it's pretty straightforward, but ruby on rails 3 had me scratching my head for a good long while.

Here's the solution, or at least the parts that were difficult:

the link:

<%= link_to "Comments", show_comments_path( :format => 'js', :comment_id=> session[:id] ), :remote => true %>

This whole :remote => true business tells rails 3 that this is an ajax call. The :format param does NOT get passed into the url, but DOES render the response as html, most of the time. Which is to say, rails will run the .js.erb file with the name matching your route.

Here's the route:

match 'show_comments/:comment_id', :to => 'deals#show_comments', :as => :show_comments

So first rails runs the show_comments method from the appropriate controller, which you can use to set state variables for the javascript. Then, whatever is in show_comments.js.erb will be run, and the current page will NOT be reloaded or redirected. No partial needed. No view needed. The controlling method will do all of this as the default return, so no return or render needed either, only the .js.erb file which has your prototype or jquery calls, or whathaveyou.

facepalms: 4 (steady, slow, only slightly infuriating progress)

event data in jquery

this one stumped me for quite a bit. If you want to bind a click event to a div id in jquery to a preexisting function which takes arguments, you need:

$('#id').click({param: param}, function_to_run );

to bind it. Here, id is the id of the div or whatnot, param (the second one, the first one could be anything) is the variable you want to send, and the function_to_run is already written. No parens after the name, you're sending it as an object.

The tricky part is in the function itself:

function function_to_run(event) {
param = event.data.param;

get it? The click event sends the event itself as the one argument to function_to_run, and the parameters you give it are stored in data. just so you know.

around a 6 on the facepalm scale.