Zend Framework Blog » JavaScript and AJAX http://blog.richardknop.com Zend Framework, PHP, Django, Python, SQL, MySQL, PostgreSQL, Oracle, PL/SQL, data model patterns, OOP, design patterns, JavaScript, jQuery, HTML, XHTML, CSS, XML, web services & APIs, Security, E-commerce and much more Sat, 04 Feb 2012 19:47:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Interesting jQuery toggling of a loading gif http://blog.richardknop.com/2011/09/interesting-jquery-toggling-of-a-loading-gif/ http://blog.richardknop.com/2011/09/interesting-jquery-toggling-of-a-loading-gif/#comments Sat, 10 Sep 2011 15:09:41 +0000 Richard Knop http://blog.richardknop.com/?p=661 This is an interesting way to hide/show an AJAX loading gif image. Once an ajax request starts, the div containing the loading image shows up, once the request is done, the div is hidden again. I saw this on Stack Overflow and found it pretty:

  1. $('#ajax_loading_div')
  2. .hide()  // hide it initially
  3. .ajaxStart(function() {
  4.     $(this).show(); // show it when an AJAX request starts
  5. })
  6. .ajaxStop(function() {
  7.     $(this).hide(); // hide it when an AJAX request ends
  8. });
]]> http://blog.richardknop.com/2011/09/interesting-jquery-toggling-of-a-loading-gif/feed/ 0 JQuery autosave on click event http://blog.richardknop.com/2009/09/jquery-autosave-on-click-event/ http://blog.richardknop.com/2009/09/jquery-autosave-on-click-event/#comments Tue, 29 Sep 2009 19:54:28 +0000 Richard Knop http://blog.richardknop.com/?p=460 What does this simple jQuery snippet do? When you click on the link with class “autosave”, the form with id “autosave” is submitted via POST request to the same page. After that it redirects to the actual target of the link (href attribute).

  1. $(document).ready(function() {
  2.     $('a.autosave').click(function() {
  3.         // get relative address of the current window/tab
  4.         var url = window.location.pathname;
  5.         // collect the data from the form with id "autosave-form"
  6.         $postData = $('form#autosave').serialize();
  7.         // submit the form
  8.         $.post(url, $postData, function(data) {
  9.             // after the ajax request is successful, redirect to the link target
  10.             window.location.href = $('#autosave').attr('href');
  11.         });
  12.         // prevent default behavior
  13.         return false;
  14.     });
  15. });

This can be useful in numerous situations. For example, on the page where user can edit his/her profile, you want to have a link saying something like “view my profile”. But you don’t want less experienced users to click on the link and lose all changes they have made to their profile (which happens quite a lot).

]]> http://blog.richardknop.com/2009/09/jquery-autosave-on-click-event/feed/ 0 Writing your own JavaScript without frameworks http://blog.richardknop.com/2009/06/writing-your-own-javascript-without-frameworks/ http://blog.richardknop.com/2009/06/writing-your-own-javascript-without-frameworks/#comments Sun, 07 Jun 2009 16:58:22 +0000 Richard Knop http://blog.richardknop.com/?p=296 Most people today aren’t really writing their own JavaScript, they are just using frameworks such as jQuery, Dojo or YUI. I’ve been doing the same thing for a long time but I have decided it is the time to learn how to write my own JavaScript during this summer. I bought a book from John Resig and have already dived into it.

I’m a long time PHP developer and I understand the principles of OOP so I thought it would be quite easy to just apply them in another object oriented language. It turned out to be a little more difficult than I thought initially.

A major difference between PHP (and other server side languages such as Python or Ruby) and JavaScript is that there are no classes. You are working directly with objects all the time. Everything in JavaScript is an object: variables, functions etc. Every part of a webpage is represented as an object in the DOM, too.

So how to create an object when there are no classes? You can create an object in JavaScript by defining a constructor. For example, let’s create a Car object:

  1. // create the Car object by defining its constructor
  2. function Car(brand, model) {
  3.     this.brand = brand;
  4.     this.model = model;
  5. }

As you can see, ‘this’ keyword works similarly as in C# or as ‘$this’ in PHP – it points to a current object. You can add methods and properties to the object through its prototype:

  1. // add few methods to the Car prototype
  2. Car.prototype.getBrand = function() {
  3.     return this.brand;
  4. }
  5. Car.prototype.getModel = function() {
  6.     return this.model;
  7. }

By adding a method to Car’s prototype all Car objects will have access to it.

One more big difference between PHP and JavaScript is inheritance. In PHP, an object can extend (be derived from) another object (or interface). You define the inheritance in class definitions. In JavaScript, the inheritance is achieved through prototypes:

  1. // create an AudiA6 object by defining its constructor
  2. function AudiA6(color) {
  3.     // call Car's constructor on this object with 'Audi', 'A6' arguments
  4.     Car.call(this, 'Audi', 'A6');
  5.     this.color = color;
  6. }
  7. // AudiA6 inherits all methods of the Car
  8. AudiA6.prototype = new Car();
  9. // add a getColor() method to the AudiA6
  10. AudiA6.prototype.getColor = function() {
  11.     return this.color;
  12. }

The getColor() method is available only to AudiA6 objects:

  1. var car = new Car('Skoda', 'Fabia');
  2. var audiA6 = new AudiA6('blue');
  3.  
  4. alert(audiA6.getColor());
  5. alert(car.getColor()); // returns null

That’s it for today. I will write few more articles about JavaScript and also AJAX later in the summer as I progress through John Resig’s book :)

]]> http://blog.richardknop.com/2009/06/writing-your-own-javascript-without-frameworks/feed/ 0