Winn.ws » Ajax

.live() and the future

Greg Winn — Sun, 18 Apr 2010 06:25:40 +0000

Just recently i seen this used by a co-worker, and did not know much about this. So I took some time and looked it up on the jQuery site docs. I was amazed by what it does, the .live() function will match any element now and in the future! This means if you .load() a remote page in the .live() can match an element on that page as it’s loaded in!

Attach a handler to the event for all elements which match the current selector, now or in the future. jQuery – .live()

Some info on .live()
his method is a variation on the basic .bind() method for attaching event handlers to elements. When .bind() is called, the elements that the jQuery object refers to get the handler attached; elements that get introduced later do not, so they would require another .bind() call. For instance, consider the HTML:


  
    Click here

We can bind a simple click handler to this element:

$('.clickme').bind('click', function() {
  // Bound handler called.
});

When the element is clicked, the handler is called. However, suppose that after this, another element is added:

$('body').append('Another target
');

This new element also matches the selector .clickme, but since it was added after the call to .bind(), clicks on it will do nothing.

The .live() method provides an alternative to this behavior. If we bind a click handler to the target element using this method:

$('.clickme').live('click', function() {
  // Live handler called.
});

And then later add a new element:

$('body').append('Another target
');

Then clicks on the new element will also trigger the handler.

Loading content with JQuery

Greg Winn — Mon, 30 Mar 2009 19:14:34 +0000

Loading content via Ajax is quick and easy with JQuery. If you have never used jQuery before you might think twice about it!

Below is my html where we will load the content.

Now lets look at the javascript needed to load a remote page in.

1	$("#LoadContent").load("path/to/remote/file.php");

After that is called the contents of “file.php” would be loaded into the div above! Quick and easy way to include item into your app. You may also pass variables to the page like so:

1	$("#LoadContent").load("path/to/remote/file.php", {id: 1, name: "Greg"});

Hope this small tool helps change your mind about JQuery!

Simple Ajax with .NET

Greg Winn — Tue, 04 Nov 2008 00:15:03 +0000

Adding Ajax to an application is simple and easy! Ajax is a powerful tool and can make your application look and feel great!

First let’s start by adding a “Script Manager” to the page, now we only have to add this once so it’s best placed in your Master page. The Script Manager needs to be placed between the form tags on your page like so:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    asp:ScriptManager>
form>

After that, we can now add Ajax to an item. Below I have added an “Update Panel” to a list view. Now every action that list view makes will be way of HTTP Requests “Ajax”!

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:ListView ID="ListView1" runat="server" DataKeyNames="PostID" 
                DataSourceID="ObjectDataSource1">
            ' Your code here...
        asp:ListView>
    ContentTemplate>
asp:UpdatePanel>

Winn Scriptatype: 1.7

Greg Winn — Wed, 15 Oct 2008 02:17:58 +0000

I wanted to re-cap the new adds in 1.7 for rails. The new method calls are as listed:

# Added V1.7b
textlink_do_fade
textlink_do_puff
textlink_do_blindup
textlink_do_dropout

You can build any of the above calls with:

textlink_do_fade('Link Text','divYouWantToUpdate',{***},{****})

Visit the project for more info on how to use the latest methods and more. Winn Scriptatype project home page. at Ruby On Rails Railway.

WinnScriptatype:Rails v1.7b

Greg Winn — Fri, 04 Apr 2008 03:18:55 +0000

I just released WinnScriptatype version 1.7 beta on the RubyForge project page. I have also made some fixes to version 1.5 and it is now production ready. The latest release has added some new functionality and the ability to make calls to display text. The call still supports the effects and Ajax request url along with url options.

[ruby]
# New calls in 1.7b
textlink_do_fade
textlink_do_puff
textlink_do_blindup
textlink_do_dropout
[/ruby]

I expect i will be making the same update to the PHP version soon so keep an eye out for that!

Take a look at the WinnScriptatype:Rails RubyForge project page and download the latest!

Winn Tracker 1.0 beta

Greg Winn — Thu, 03 Apr 2008 16:40:12 +0000

It’s time to start tracking everything! Now you can with Winn Tracker; track downloads, page views, how many times a link or image or anything was clicked and, keep track of incoming links.

Very easy to use and start implementing right now! The system only takes one database table, and you can add this table to a current database so no need to make a whole new database for this. Developer friendly, the system is object orientated using one class. Once the class is called it will send the information provided to the database, after that it’s all yours!

Lets start go here to download the latest Winn Tracker.

WinnScriptatype:PHP v1.5 Available

Greg Winn — Mon, 31 Mar 2008 19:33:47 +0000

Call two effects for two different elements with one call. This option is now working in version 1.5! Simply make the call “checkbox_do” then add your effects like so:

[php]
checkbox_do_fade_and_appear(‘div1′, ‘div2′, ‘***’, array(‘userName’ => ‘Bob’));
[/php]

Only change you will have to observe is the second element id input. In this case “div2″ is the second element that will receive the effect “appear”. Note that if your going to make the standard call for one effect it’s all still the same from version 1.0.

Check out the details and download WinnScriptatype:PHP v1.5

Winn Scriptatype for PHP

Greg Winn — Sat, 29 Mar 2008 20:37:38 +0000

Thats right, i have converted the rails plugin to PHP. Now you can use the same functions in your next php application. This php class works the same way by creating a checkbox and on click it will call a script with Ajax that will update your database. On success it will return an effect based on the “checkbox_do_” call you make.

Visit the Winn Scriptatype:PHP page, after that you can take a look at the latest nightly dump for the next version of this great script at our SourceForge project page.

Rails Plugin: WinnScriptatype

Greg Winn — Thu, 27 Mar 2008 02:45:00 +0000

Making an Ajax checkbox just got easy. This very simple plugin was built for my own use. The idea was to make one call for my checkbox, update to the database, and an effect. This plugin is easy to use and install, i dont have it setup in an svn yet so you will need to download it and place it in RAILS_ROOT/vendor/plugins/HERE.

I had been working on this plugin for a few weeks in making a new application. I kept writing the “input, Ajax.Request and, Effect.Fade”, so i needed a way to make that fast and do what i need. And out came this handy plugin!

[ruby]
# Lets use this new plugin
checkbox_do_fade(‘theDiv’, ‘CheckboxID’, {:controller => ‘todo’, :action => ‘finish’, :id => todo.id}, {:userid => user.id})

[/ruby]

Here is an over view of the options:

[ruby]
checkbox_do_fade(‘*’, ‘**’, {***}, {****})

[Element ID]* This is the name of the element you want to effect such as a div or table (tr,td)…

[Checkbox ID]** This is the id of the checkbox it self

[URL/path]*** this is the url for the update to take place NOTE: always use controller,
action, and id DO NOT place other variables in this block that is for the next block.

[URL/path options]**** This block is used for url options like so: (/path/to/1?userid=1) as you see
userid is 1, this is done by using the url options block. You may send an unlimited number of
url options with this.

# Below are the ONLY supported calls
checkbox_do_fade # This will fade the element
checkbox_do_puff # This will puff the element
checkbox_do_blindup # and so on…
checkbox_do_dropout # again…
[/ruby]

Ready to start using it? Download WinnScriptatype

You will also need help installing this plugin so take a look at Ruby on Rails Railway : WinnScriptatype.

New Product: Winn Tracker

Greg Winn — Tue, 25 Mar 2008 14:25:32 +0000

Something i have been working on for about three or four weeks now is something called “Winn Tracker”. This new product will have the ability to track page views, downloads and user information in your own custom application or website. Winn Tracker will allow you to make a call to the database to track info 3 ways.

1. Direct Link (http://your domain.tld/pathto/tracker…)

2. PHP Class link ($a->hit(‘info to send’,['userName' => 'Bob']);)

3. Ajax link, out of the three this is the preferred method of communication. I have build a new Javascript function on top of prototype to build the call and then use the Ajax.Request function. (Winnjs.Hit(’send info’,['username:Bob']))

The first launch of this will be in just a few short days and then the full release will be in about a month. The first release of this will not have a backend tool for the admin area. Version 2 will have a full admin area where you can create the three above calls with options, with little programing experience.

This system will come light with only about 1.5 megs of files and only 3 tables to install to your mysql database. Version 2 will come with a full install script along with many more options for non developers to use.

I will keep you posted on new changes to this and when it will launch.