Pass parameter to Ajax call to use after response returns

Let’s say I have some data I want to pass along with an ajax call to use when the response comes in. You can pass round trip parameters in your jQuery ajax call by adding them to the options object like this

$.ajax({
 url: 'www.example.com/some-api/',
 dataType: "json",
 roundTripVariable: 'Weeeeee!',
 success: function(data, textStatus, jqXHR) {
 // will print 'Weeeeee!' to the console
 console.log( this.roundTripVariable );
 }
});

Kynetx’s New Sandboxed Browser Extensions

I recently released my “Old School Retweet” Kynetx app in the Kynetx app store for the newly released browser extensions. I super love the new extensions and all that they do for users and developers alike. Something that I forgot when I released the app in the app store is that the new extension are sandboxed.

Because the extensions are sandboxed, all of the scripts from the extensions run a bit differently than they used to in the previous Kynetx extensions. Without getting into the technical details too much, the previous extensions just injected JavaScript into the page and the new extensions run JavaScript in a sandbox which has access to the DOM but can’t access anything else on the page. Because of this change my retweet app broke since I was using the jQuery loaded by Twitter.com to bring up the new tweet box (I do this because Twitter.com used that library to bind a click event and to trigger that event it has to be from the same library that bound it). Thankfully, with the help of a friend, I was able to get a work around for both Firefox and Chrome’s sandbox environment.

How I did it…

If the app is run not inside a sandbox I can just access the jQuery that Twitter.com loads to open a new tweet box

$("#new-tweet").trigger("click");

From within the Firefox sandbox I can access the page outside of the sandbox

window['$']("#new-tweet").trigger("click");

If I am in the Chrome sandbox I can create a script element that has the JavaScript that I want to execute. Crude, but it works. : )

var trigger_click_script = document.createElement("script");
var fallback = "window['$']('#new-tweet').trigger('click');";
trigger_click_script.innerHTML = fallback;
document.getElementsByTagName("head")[0].appendChild(trigger_click_script);

Here is the JavaScript code that I ended up with that gets executed when a user clicks on the retweet button.

// get stuff to retweet
var tweet = $K(this).parents(".tweet-content").find(".tweet-text").text();
var name = $K(this).parents(".tweet-content").find(".tweet-screen-name").text();

// build tweet
var retweet = "RT @"+name+" "+tweet;

// open new tweet box
$("#new-tweet").trigger("click");

// hack for FF sandbox
if ($("#tweet-dialog:visible").length === 0) {
  window['$']("#new-tweet").trigger("click");
}

// put tweet in new tweet box
$K(".draggable textarea.twitter-anywhere-tweet-box-editor").val(retweet).focus();
$K("#tweet_dialog a.tweet-button.button.disabled").removeClass("disabled");

// hack for chrome sandbox
if ($("#tweet-dialog:visible").length === 0) {
  var fallback = "window['$']('#new-tweet').trigger('click'); ";
  fallback += "window['$']('.draggable textarea.twitter-anywhere-tweet-box-editor').val('"+retweet+"').focus(); ";
  fallback += "window['$']('#tweet_dialog a.tweet-button.button.disabled').removeClass('disabled'); ";
  var trigger_click_script = document.createElement("script");
  trigger_click_script.innerHTML = fallback;
  document.getElementsByTagName("head")[0].appendChild(trigger_click_script);
}

How to get jQuery elements from an array of selectors


To use an array of strings as jQuery selectors I have found the need to append an empty string.
My bad example works because it coerces the ‘this’ object to a string.

Bad Example:

array = ["h1","p","div"];
$K(array).each(function() {
    console.warn( $K(this+"").children() );
});

Much Better Example:

array = ["h1","p","div"];
$K(array).each(function(index, value) {
    console.warn( $K(value).children() );
});

I had previously tried the following with out success

array = ["h1","p","div"];
$K(array).each(function() {
    console.warn( $K(this).children() );
});

The problem of what I was originally trying was that each item in the array wasn’t being treated as a string, I think.The problem of what I was originally trying was that ‘this’ is an object and not a string like I need for the jQuery selector.

A big thanks goes out to my friends,Alex Olson & Sam Curren, for helping me understand my mistake while being tired.

If I didn’t need to do something different for each time through the loop I could do something like this stack overflow answer:

array = ["h1","p","div"];
console.warn( $K( array.join(", ") ).children() );

Getting into jQuery

Swiss Army Knife Cadet 1

I have a friend that is wanting to get into learning and using jQuery so I thought that I would throw some information together to help them get started.

Documentation

Love jQuery’s documentation! I love being able to go to http://api.jquery.com/ and being able to quickly search for what I am looking for. This is great for when I know roughly what I want and just need a bit of information on how to do it. When I was starting out, the documentation main page was the place to be http://docs.jquery.com/

Including jQuery into projects

So you can download the jQuery code from the site and put it up on S3 or your own hosting service and include it into your projects that you are working on but why not let Google do it for you if it makes life easier? Google has a bunch of script libraries that they host for free that are used commonly. To include jQuery in your project stress free try this

Document Ready

One thing that can be frustrating when just starting out using jQuery is finding out the hard way of why you have to wait for the page to load before your functions can work. What??!! jQuery is a JavaScript library that extends native functionality of JavaScript and just plain makes JavaScript easier to work with. Problem is, none of your jQuery functions will work until the library is completely loaded and the structure of the html is in the browser. You can make sure your jQuery functions don’t try to do anything until the page is ready by putting your code in a document read wrapper that jQuery makes easy.

$(document).ready(function() {
  // Your jQuery code goes here
});

Shortcut

Because using jQuery is soo awesome and you are going to be using it soo much, the shortcut ‘$’ was used to reference jQuery. So the following two jQuery functions are the same.

jQuery("#ajax img").hide();
$("#ajax img").hide();

Help

Just remember when you get frustrated or you need help understanding something with jQuery do a Google search for what your having trouble with. If that doesn’t get you what you are looking for, ask a friend! There are many who have loved using jQuery and would love to help a friend out. Also, don’t forget the ever awesome http://stackoverflow.com/ which is a great place to find, ask, and answer programming related stuff! jQuery included.

Example

Here is a full and simple working example that I created just to show off a bit of the fun power of jQuery. Again, jQuery documentation rocks and has many examples but I thought this would be nice to pull together everything I had talked about here.

https://mikegrace.s3.amazonaws.com/geek-blog/jquery-example-1/jquery-example-1.html

photo by Quality & Style