Programing

Jquery click not binding to checkbox (or any other element)

Posted in Geekdom, Programing, Web Development on January 24th, 2014 by Jarred – Comments Off

I am just writing this down for the sake of my own personal sanity. I just spent way too much time trying to trouble shoot why I could not bind a click event to a checkboxes in jquery. This post here gave me a clue what I was doing wrong. If by chance you are having a similar issue make sure that the element you are trying to bind to is already created and part of the DOM or it will not work and you will be left befuddled why exactly nothing is happening (at least I was).

Reflections upon my last project

Posted in Entrepreneurship, Programing, Web Development on August 24th, 2013 by Jarred – Comments Off

So, I have come to the realization that I may not have the best ability to pick projects that end up being significant sources of income. In light of this realization, a few months ago I decided it was time to try and to a few “speed” projects rather than invest monumental amounts of time on a single project that more than likely will have lackluster resulted. While in theory this idea seems to make sense, in practice I am afraid once again I fell short of the mark.

 

While trying to find some decent rates for a personal HSA (health savings accounts) accounts, I found that useful online resources were few and far between. I decided that this might be a perfect niche opportunity to not only track and compare the interest rates offered by different custodians (something I was doing anyways), but also hopefully create a quick little site that others would find useful. I imagined the adsense keywords related to a health savings account site would be higher paying and the structure/layout of the site could be extremely simple and easy. All in all I judged it would be a lightning quick sprint of a project that would have some income generating potential.

 

I judged wrong (at least on the “lightning quick sprint of a project “ part). If you like, take a look at it here: While I am extremely happy with the final product, I logged about 66 hours so far getting it up and running. I started out using a Google doc spreadsheet as the database as I believed this would be fairly easy to maintain. Realizing that the maintenance of such a site would be significant, as an afterthought I decided to try and integrate with Amazon Mechanical Turk to try and crowdsource a lot of the nitty gritty upkeep. But I failed to account for how long this integration would take, and then how much I actually would have to pay to get the quality upkeep I was looking for. So, in the end, after taking all the time to integrate, I decided that the original spreadsheet idea was a much better idea and switched back (of course I deleted most of the previous versions so I had to rewrite much of it from scratch again). This took much longer than expected. In short, some of the takeaway lessons from the project are: I need to do a better job planning out my projects from the get go, and also I need to keep all of the past revisions (even if I don’t think I am going to end up re-using them).

 

So despite being disappointed by the much longer than expected time frame, I think the site turned out looking pretty good and could be quite useful for anyone looking to compare rates on HSA account. If by any chance you are looking for for a HSA account check the site out here: HSA Rates  As of yet there is next to no traffic to the site and of course this means as of yet it has not produced any real income. I am hopeful however that as the site gets indexed and gets some backlinks it will help improve income rate and bring me closer to my goal.

Remove an Element with a Relative Position from the Normal Flow of a Web Page

Posted in Programing, Web Development on March 8th, 2013 by Jarred – Comments Off

Here is a nifty little trick I found on a post from StackOverflow. I usually prefer to “relatively” position elements in my pages so that I can have a more fluid designs. However relatively positioned elements are not taken out of the normal flow of the document and so often I am left with a big ugly blank space where they would normally be found. This can lead to all sorts of issues especially when you try and relatively position every element thereafter to cover the ever growing blank spaces. Here is a novel solution that will create a 0 height 0 width pseudo-relative element to wrap around a absolutely positioned element to give you a relative reference point that will not leave that dreaded big blank space.

<div style=”position: relative; width: 0; height: 0″>
<div style=”position: absolute; left: 100px; top: 100px”>
Hi there, I’m 100px offset from where I ought to be, from the top and left.
</div>
</div>

Taken From: http://stackoverflow.com/questions/6040005/relatively-position-an-element-without-it-taking-up-space-in-document-flow

Getting the back button to work with Backbone and jquery mobile

Posted in Programing, Web Development on January 3rd, 2013 by Jarred – Comments Off

I was getting some strange errors in my app when trying to get the back button to work with the pushState history provided by Backbone.js. I was getting this error: Uncaught TypeError: Cannot call method ‘replace’ of undefined jquery.mobile-1.2.0.min.js:2 I suspected it was a conflict between the “routing” systems provided by jquery mobile and the backbone frameworks. In my search to figure out how to make it work I came across this post here http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/ The solution presented in the article however did not work for my as apparently (unknown to me) I was using some of the features that were being disabled. To solve my issues I pared down what the article suggested I disable and then just inserted the code into script tags right after I loaded all the frameworks. I now have a functioning back button in my hybrid jquery mobile/backbone app.

$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;

Combining JSON objects from the google datastore problems

Posted in Geekdom, Programing on December 10th, 2012 by Jarred – Comments Off

So, here is the story: I have two different JSON objects stored as strings in the google app engine datastore. I have been trying to fetch both of the two JSON object in a single ajax call in an attempt to reduce the number of request made to the server which hopefully will make my application more efficient/quick. However It took me a great deal of time to figure out exactly how to merge / combine the two different JSON objects into a single object server side for ajax transfer over to the client. I kept on getting JSON validation errors even though the code looked perfectly good to me. Even worse the online JSON validators would tell me that there was an unexpected character, but they would either not tell me where it was, or the location they specified was perfectly valid JSON. So, eventually I figured out my problem (at least one of them); I was encoding (unwittingly) the objects in the datastore as UTF-8 with the “byte order mark” which was causing validation errors when I tried to merge the two object. Once I encoded the files that were creating my datastore object without the byte order mark, they successfully merged into a unified JSON object that I was able to pass via ajax and successfully parse.

In case anyone is wondering (or I have to figure out how to do it again), here is the way I combined the two python JSON objects server-side:

combinedObject = { 'obj1' : dataObj1, 'obj2' : dataObj2 }

However, for some reason (as of yet I do not fully understand) I have to call the JSON.parse on both the parent object and then child objects in order to get the objects correctly parsed into javascript.

EDIT: Another note regarding unexpected character errors when trying to parse JSON: I was pasting in formatted and what I thought was validated data from one of the many online tools, however I think I was also inadvertently pasting in hidden characters which was causing all sorts of confusion and problems. Another thing you might want to check this if you are having parsing errors.

How not to set Backbone model properties

Posted in Geekdom, Programing on November 29th, 2012 by Jarred – Comments Off

So here is another backbone.js tidbit that took me a while to figure out/understand. This may be fairly straight forward to seasoned programmers, but it really through me for a loop. If you try and set initial model (or view) properties outside of the “defaults” method you can not retrieve them using model.get(‘propertyName’). This was a point of confusion because sometimes it was working like i though it should and sometimes it did not. To further complicate things I was trying to set properties by passing them when I was instantiating the object. It took me a while to figure out what I was doing wrong.

So this is incorrect even though you can still access the object properties.


ExampleModel = Backbone.Model.extend({
propertyName: 'Some Value',
})
exampleModel = new ExampleModel ({propertyName: 'Updated Value'});
exampleModel.propertyName// 'Some Value' not 'Updated Value'

From what I understand this is the correct way to do it


ExampleModel = Backbone.Model.extend({
defaults: {
propertyName: 'Some Value',
},
})
exampleModel = new ExampleModel ({propertyName: 'Updated Value'});
exampleModel.get('propertyName') //'Updated Value'

Now that I understand the concept the documentation makes this very clear to correctly set default model properties using the defaults method.

Problems with binding events on subview in backbone.js

Posted in Programing on November 23rd, 2012 by Jarred – Comments Off

I am working on learning backbone.js and well it has been a bumpy road. Along the way I have come across several hiccups, but this one was a doozy and caused me all sorts of frustration. I was trying to to bind a change event to a select menu in one of my subviews. For the life of me I could not get the event to fire correctly. If I copied the exact same event to the parent view it worked just fine. This lead me to believe that I was experience a scope issue. There is lots of information on the web about breaking the scope of “this” in backbone.js which further lead me to believe this was the problem. But turns out that was not the problem at all. After a whole lot of confusion I lucky stumbled upon this post on stackoverflow

Unfortunately it looks like it was not the answer to the original posters problem, but it solved my issue.

According to the post, events in backbone.js are not actually bound to the changing element but rather the root element of the view and then delegated to the children from there. This is important if you are not actually inserting your the root element of your subview into the DOM, because then your events will not fire (which is exactly what I was doing).

So, this render function simply inserts the rendered template html into the DOM which fails to actually insert the views el into the DOM.

render: function() {
$('#anchorDiv').append( this.template(this) );
},

Something like this however will actually insert the view’s root element into the DOM which will (at least in my case) solved all my event issues.
render: function() {
$(this.el).html( this.template(this) );
$('#anchorDiv').append( this.template(this) );
},

I am really liking backbone.js as I think it is helping me better structure my applications. That being said, it has been tough to really learn and grasp how everything is supposed to work. This issue was not straight forward to me at all and hopefully might help somebody out there figure out why their events are not working like they thing they should.

JavaScript to Calculate the angle between two points in degrees

Posted in Geekdom, Programing, Web Development on February 19th, 2012 by Jarred – Comments Off

Quick little snippet here for later reference (Yeah this one took me a bit to figure out).  The below function will return the angle between two points and return it in degrees from 0-360.

 

 

		function calcAngle(x1, x2, y1, y2)
		{
		calcAngle = Math.atan2(x1-x2,y1-y2)*(180/Math.PI);	
		if(calcAngle < 0)	
		calcAngle = Math.abs(calcAngle);
		else
		calcAngle = 360 - calcAngle;		
		return calcAngle;
		}

 

 

Sources http://board.flashkit.com/board/showthread.php?t=778094

 

Universal AJAX function

Posted in Geekdom, Programing, Web Development on February 13th, 2012 by Jarred – 1 Comment

Here is my universal AJAX function. I am posting it here for reference. Over the months I have adapted/revised this function and now have finally gotten it to do pretty much what I want it. I did not write all of this myself I pulled most of it off of somewhere, but I can not remember so I can not give proper credit. Let me know if you have any suggestions on how to improve it.

 

// ******************************************************
// Universal Ajax Function
// Useage Example:  universalAJAX('http://url.com', "var1=true&var2=false", functionWhenDone, functionWhenWaiting, functionWhenFail);
// ******************************************************

function universalAJAX(URL, DataToSend, doneFunction, waitingFunction, errorFunction)
{

var json_http;
if (window.XMLHttpRequest)
{json_http=new XMLHttpRequest();}
else
{json_http=new ActiveXObject("Microsoft.XMLHTTP");}

json_http.onreadystatechange=function()
 {
   if (json_http.readyState==1)
    {waitingFunction();}
  if (json_http.readyState==4 && json_http.status==200)
    {
	if (json_http.status==200)
		{
		doneFunction(json_http.responseText);
		clearTimeout(timeOutVarCancel);
		}
	else
		{
		errorFunction();
		clearTimeout(timeOutVarCancel);
		}
	}
}

  json_http.open("POST",URL,true);
  json_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
  json_http.send(DataToSend);

  var timeOutVarCancel=setTimeout(errorFunction,10000);
}

Iterating through properties of a JavaScript Object with the “For In” loop

Posted in Geekdom, Programing, Web Development on January 16th, 2012 by Jarred – Comments Off

As I have mentioned before I am a novice self taught programmer and I often come across little problems that take me quite a while to figure them out. I like to post them here so I can come back and remember how I solved the problem and also so hopefully others can benefit from my struggles. I came access one of these said problems this weekend trying to iterate through a object in JavaScript using a “for in” loop. I understood the looping mechanism quite well, however getting the syntax to work for me through me for a loop.

 

Incorrect (This is how I would assume it would work)

 for (var x in someObject.someProperty)

{
newVar = someObject.someProperty.x.anotherProperty;
}

This is how I got it to work

 for (var x in someObject.someProperty)

{
newVar = someObject.someProperty[x].anotherProperty;
}

You will notice you cant use .x to access the property the loop is currently processing,  you must use the [x] In truth I do not understand why this is so if anybody out there cares to enlighten me that would be appreciated. Either way hopefully this might save some frustration.