Visual JQuery

If you were to…

1.  create a campaign with your affiliate link …  Hopefully your affiliate has an affiliate link (we will call afflink) that ends with SID=.  This will allow prosper202 to stick an ID there which will allow the affiliate network to keep track of conversions for you and feed the info back to prosper202.  Here is a contrived example.

http://your_affiliate_url.com/click.track?CID=90210&AFID=007&ADID=101&SID=

2. Create an ad, and then a link in prosper202.  Here is a contrived example of an ad link (we will call adlink).

http://myp202installsys.com/tracking202/redirect/dl.php?t202id=12345&t202kw=

3.  Use your adlink in your ads.

Then this is what would happen for a click (or pop in PPV)…

Because you advertised your adlink myp202installsys.com is first hit (see the link in #2 above).  Here prosper knows what afflink to get because of the id in the adlink.  A counter is incremented in prosper for the click on the matching campaign.  Prosper then takes the afflink from #1 above, and plugs in a SUBID (internal to prosper) at the end, maybe like this: http://your_affiliate_url.com/click.track?CID=90210&AFID=007&ADID=101&SID=911

This number (911) will be the key that the affiliate network keeps around for us.  It is meaningless to them, they just keep it around to be nice to us.  For us it is used to track a sale with.  Now, lets assume that a sale occurs for this click/pop (#911), then when the affilate network reports your sales, a sale will be attributed to SID 911 and when you plug that back into prosper202 (via reporting or post-back pixel), you will be able to see which campaign got the sale.  Now you can optimize your campaign.

Of course if you also turn on keyword tracking in your traffic source, that can get passed with the kw= piece in the adlink above, and now prosper can also tell you what keyword generated the sale.

To find out how each affiliate network allows you to plug in a subid, please check out subids.tracking202.com .

To demonstrate I will put up some alerts that you can run in your error console in FF, or throw on a page.  My goal below is to show true when we find the string “test.it”.  You will see that the (.) needs double escaping in string object syntax and needs single escaping in perl syntax.

// using perl type syntax
alert("is match? " + /test\\.it/.test('testXitok')); // => is match? false  (extra escape problem masked, it will hurt us later)
alert("is match? " + /test\\.it/.test('test.itok')); // => is match? false (should have been true!!!! extra escape got us!)
alert("is match? " + /test\.it/.test('testXitok')); // => is match? false (correct with single escape)
alert("is match? " + /test\.it/.test('test.itok')); // => is match? true (correct with single escape)

// using string object method syntax
alert("is match? " + (null != "testXitok".match("test\\.it"))); // => is match? false (correct with double escape)
alert("is match? " + (null != "test.itok".match("test\\.it"))); // => is match? true (correct with double escape)
alert("is match? " + (null != "testXitok".match("test\.it"))); // => is match? true (single escape got us here!  It hurts!)
alert("is match? " + (null != "test.itok".match("test\.it"))); // => is match? true (single escape problem is masked)

Moral of the story, go read the stinking book.  It is such a temptation to be a javascript hacker instead of doing it right.  Well, no more time to hack at javascript, I gotta move on to the next project!

Eric

So, if you are losing your mind because IE is losing your browser navigation buttons, try reducing the size of your page and see if that won’t help you too.

Eric

The bug occurs only on IE when I copy the nodes and then try to fire an event by typing in the field.  What happens is that the event handler for the SUBSEQUENT input boxes can not be fired until I modify the field in the ORIGINAL node block.  Then I get BOTH events!!!  Nasty huh?

The solution actually lies in jQuery’s clone function.  Here you see that when they do a clone they will eliminate the property that is embedded in the html called jQuery12341234=”2″ (those number are some internal jQuery identifier, probably for the event handler).

To fix the bug all I had to do was remove that attribute and definition and viola it works!

Here is jQuery’s replace from their clone function.

html.replace(/ jQuery\d+="(?:\d+|null)"/g, "")

My approach (before I found that jQuery was doing it also was this.

html.replace(/jQuery\d+=["']\d+["']/g, "")

Since jQuery programmers know more than me (i.e. when null might be in that field) I just ditched mine and used theirs.

Have a great day!

Eric

Normally you would use the bgiframe plugin for jquery to address this problem, but in this case we don’t have a reference to the dropdown list once it is filled in from the ajax call.  So, my solution was to add a simple callback to the autocomplete plugin that is fired off after the list is populated and made visible.  That gives me the option that simply takes the list container and calls bgiframe on it.  And viola!  My dropdown list covers up all the controls underneath, even the select lists.

Here is a patch if you would like to patch the autocomplete plugin.  Note, it also contains a fix from my last post about using multiple fields as input (the Devbridge autocomplete part is at the bottom of the post).

--- jquery.autocomplete.js  2009-09-27 23:15:14.000000000 -0600
+++ ../jquery.autocomplete.js   2010-01-29 15:29:14.000000000 -0700
@@ -230,6 +230,9 @@
     },^M
     ^M
     getSuggestions: function(q) {^M
+      if (this.options.noCaching) {^M
+        this.clearCache();^M
+      }^M
       var cr, me;^M
       cr = this.isLocal ? this.getSuggestionsLocal(q) : this.cachedResponse[q];^M
       if (cr && $.isArray(cr.suggestions)) {^M
@@ -280,6 +283,7 @@
       }^M
       this.enabled = true;^M
       this.container.show();^M
+      if ($.isFunction(me.options.onListShow)) { me.options.onListShow(this.container); }^M
     },^M
 ^M
     processResponse: function(text) {^M

Download the actual patch right here!  jquery.autocomplete.js.patch

Remember, to patch your file, simply cd to where your jquery.autocomplete.js file resides (and copy in this patch to that directory to a file called jquery.autocomplete.js.patch) and run this command

patch jquery.autocomplete.js < jquery.autocomplete.js.patch

Now, once you have that file patched, you can do this sort of thing with your autocomplete options.

$("input[name*=some_name], input[name*=some_other_name]").each(function(i) {
$(this).autocomplete(
{
serviceUrl:baseURL + '/lib/dostuffremotely',
minChars:3,
width:500,
maxHeight:400,
zIndex: 9876,
deferRequestBy: 0, //milliseconds
params: {
'prefix':'xyz',
'column':'abc'
},
onListShow: function(container) { container.bgiframe(); }, // LOOK HERE, THIS IS NEW!!!
onSelect: function(value, data){  // "this" is NOT defined here
// handle onselect
}
}
);

Happy jquerying!

Eric

stackoverflow question

The question was, if you are using this jquery autocomplete plugin how do you get the .autocomplete function to include other fields so that you can have a context type of search.  One person (bendewey) answered that you can do the following.

var selectedCategory = $('.categories').val();
var query = '';
if (selectedCategory !== 0)
{
query = '?category=' + selectedCategory;
}
$("#suggest4").autocomplete('search_service.svc' + query, {
// options
});

This is 1/2 correct.  The problem is that when .autocomplete() is called, the url + query are evaluated immediately which means that the current (at time of page loading most likely) selected category value will ALWAYS be used when autocomplete is called.  That means that if the user selected a different category, the new value will not be passed with the query.  Here is a patch to the autocomplete code that will fix it.  After running the patch, you will be able to pass a function to your .autocomplete call (instead of a string url) and then each time autocomplete runs, the function will be run to create the right params.

to run patch:
1. cd to the directory where your jquery.autocomplete.js file exists

2. copy the patch file to a file called jquery.autocomplete.js.patch (in the above mentioned directory)
3. run patch < jquery.autocomplete.js.patch

to use the patch:
do what bendewey said above, except for you need to make the 1st arg of .autocomplete to be a function that returns the proper query, like this…

$("#suggest4").autocomplete(function() {
 var selectedCategory = $('.categories').val();
 var query = '';
 if (selectedCategory !== 0)
 {
   query = '?category=' + selectedCategory;
 }
 return 'search_service.svc' + query; }, {
 // options
 }
);

Here is the patch (you can download the file below):

--- jquery.autocomplete.js.orig 2010-01-15 11:00:55.000000000 -0700
+++ jquery.autocomplete.js  2010-01-15 11:04:02.000000000 -0700
@@ -14,7 +14,7 @@

 $.fn.extend({
 autocomplete: function(urlOrData, options) {
-       var isUrl = typeof urlOrData == "string";
+       var isUrl = typeof urlOrData == "string" || typeof urlOrData == "function";
 options = $.extend({}, $.Autocompleter.defaults, {
 url: isUrl ? urlOrData : null,
 data: isUrl ? null : urlOrData,
@@ -346,10 +346,14 @@
 term = term.toLowerCase();
 var data = cache.load(term);
 // recieve the cached data
+        var url = options.url;
+        if (typeof url == "function") {
+            url = options.url();
+        }
 if (data && data.length) {
 success(term, data);
 // if an AJAX url has been supplied, try loading the data now
-       } else if( (typeof options.url == "string") && (options.url.length > 0) ){
+       } else if( (typeof url == "string") && (url.length > 0) ){

 var extraParams = {
 timestamp: +new Date()
@@ -364,14 +368,16 @@
 // limit abortion to this input
 port: "autocomplete" + input.name,
 dataType: options.dataType,
-               url: options.url,
+               url: url,
 data: $.extend({
 q: lastWord(term),
 limit: options.max
 }, extraParams),
 success: function(data) {
 var parsed = options.parse && options.parse(data) || parse(data);
-                   cache.add(term, parsed);
+                    if (typeof options.url != "function") {
+                        cache.add(term, parsed);
+                    }
 success(term, parsed);
 }
 });

You can also download the patch file here:  jquery.autocomplete.js.patch

Now, what if you are using this autocomplete from Devbridge?  You can almost do it out of the box, here is a code sample.

$("input[name*=phone_number]").each(function(i) {
 var prefix = this.id.replace(/\.[^.]*$/, "");
 $(this).autocomplete(
 {
 serviceUrl:baseURL + '/lib/findUsers',
 zIndex: 9999,
 deferRequestBy: 0, //milliseconds
 noCaching: true,
 params: {
 'area':function() { return $(jq(prefix + ".area_id")).val(); },
 'prefix':prefix
 },
 onSelect: function(value, data){  // NOTE: 'this' is NOT defined correctly here
 // do stuff with data
 }
 }
 );
 });

You will notice that I included a parameter that isn’t supported, that is the noCaching parameter.  I had this working pretty good without it, except if you changed the non-autocomplete field (in this case area code), and you go back to the auto field and fail to find something, that is cached with the query, so when you change the area code, you get stuck because the query field got cached, and auto thinks that it should not try again.  That is why I made this tiny patch to this version of autocomplete.

Index: jquery.autocomplete.js
===================================================================
RCS file: /opt/Repository/MobilSense/MobilSentry/Products/MobilSentry/Src/CSS/share/assets/jquery.autocomplete.js,v
retrieving revision 1.1
diff -u -r1.1 jquery.autocomplete.js
--- jquery.autocomplete.js  10 Jan 2010 06:46:45 -0000  1.1
+++ jquery.autocomplete.js  15 Jan 2010 23:20:55 -0000
@@ -230,6 +230,9 @@
 },^M
 ^M
 getSuggestions: function(q) {^M
+      if (this.options.noCaching) {^M
+        this.clearCache();^M
+      }^M
 var cr, me;^M
 cr = this.isLocal ? this.getSuggestionsLocal(q) : this.cachedResponse[q];^M
 if (cr && $.isArray(cr.suggestions)) {^M

And you can download it jquery.autocomplete.js.patch.

I have been going through a breakdown for a little while. I have been blessed to be able to still provide for my family during this time, but it has been harder lately than it has been in a long time.  A bright light that I have had in all this is that I have felt inspiration from God that success, real success, life changing success is just around the corner. I am grateful for this, when times get hard, I think back to that inspiration and it elevates my spirit again.

I really like how Paul looks at this situation in his blog. I am just getting ready to break through a big wall and it takes a lot of effort to knock down my “building blocks” so that they can be rebuilt or restructured. I have thought about this for a while, years before reading the wise words from that blog in fact.  About 8 years ago Jennfer and I  began to see our children going through “breakdowns” and “breakthroughs” at different times in their lives.  It seems like every 6 months or so our kids kind of freak out.  In researching  it, we learned that human development is like a building that was built of blocks.  When you build a block castle with a set of 20 blocks and get it just perfect, then suddenly somebody gives you another 20  blocks, you can’t just build onto your existing structure.  You will likely have to tear down what you have, and taking your knowledge and experience in building the first one, now you will build one that is twice as large and beautiful.

My kids are amazing people, when this happens to them, after we get through the breakdown (this can be very painful) things are so much better.  As with them, I know my own life is about to be amazing, because I have been in a larger than normal breakdown.  But I am learning so much during this breakdown.  So much more than I ever could have learned without it.  As painful as it has been, I am thankful to God for giving me this opportunity to struggle and learn so that my “structure” can be rebuilt and I can be a better person, more successful and more in control of myself.  I am so excited to see what things will look like when the rebuilding is done.

Eric

Eric

I follow an interesting blog that focuses on money from the perspective of Ayn Rand and her amazing book “Atlas Shrugged”.  The posted a great article that I want to link to because this speech by Francisco is so important and so applicable in our day.

My Money Shrugged — Gold And Money

Thanks guys!