Skip to main content

Posts

Showing posts with the label jQuery

Dojo & jQuery side by side. Part 2: Animation

Posted by  Christopher Imrie  in  Code 2 Comments This is the second part of our Dojo and jQuery side by side series. If you’re not following allowing with the series, do be sure to check out  Part 1: Dom Basics . As mentioned in the previous article, the aim here is to provide a simple unbiased side by side comparison of common jQuery operations and how they are achieved in Dojo. Today, we’re looking at animation and as a quick reminder you should assume that all the calls below are called when the DOM is ready.  If you’re not sure how to do this, checkout  Part 1 . Lets go! Fading elements in and out This tends to be the workhorse for many beginner javascript programmers.  Simply select the element you want and then the javascript library will do the rest.  jQuery is more succinct here since it assumes you want the animation to start straight away whereas dojo assumes you will want to trigger it later using the play method...

Dojo & jQuery side by side. Part 1: DOM Basics

February 9th 2012 Posted by  Christopher Imrie  in  Code Dojo  is a fantastic toolkit that we have used on many projects here at moresoda.  Although we still love and use  jQuery  nearly everyday, we use Dojo on projects where the front end requirements are more complicated than your average DOM manipulation and  HTML5 shims . This article isnt about preaching Dojos benefits though.  If you have a read of the  features and benefits of Dojo  you can make up your own mind.  That being said, Dojo can be harder to get into since is it a much larger than jQuery. Hence my aim here is to provide a simple, unbiased side by side comparison of common jQuery operations and how they are achieved in Dojo. Lets go! Loading the script from the Google CDN Both can be loaded from the Google CDN.  If you use any components of Dojo that are not part of Dojo Base (the file being loaded by the script tag below), they will b...

the jquery ajax success and error usage

Although jQuery helped to simplify the javascripts alot, it's still ugly and hard to maintain in the future. Let me know if you have any other non-ugly solution. var myurl =  "../json/addNotes"; var varUserName = '${userName}';   $.ajax({url:myurl,dataType: 'json', data:'comments='+comments+'&userName='+varUserName, success: function(){       alert("Comments saved.");       $('#Comments').val("");   },   error: function(){       alert("Saving was unsuccessful, please try again.");   }  } ); }

The power of jQuery - how to disable all the input in html page

I need to implement a function about: when current user is not active, all the content should be disabled. With jQuery, it's pretty easy ,   var active = "${active}";    if(active =='false' ){   $(".form-input :input").each( function(i) {   $(this).attr('disabled', 'disabled');    }); comments: line 1:  get the  user's active status line 2:   if user is not active line 3:    loop to get all the input elements(like text, checkbox, radio line 4:         disable all the input if the user is not active

Mysql : The sqls for clone db and rename db

-- -------------------------------------------------------------------------------- -- Clone a db -- Note: comments before and after the routine body will not be stored by the server -- -------------------------------------------------------------------------------- DELIMITER $$ CREATE DEFINER=`dbname`@`%` PROCEDURE `clone_db`(IN old_db VARCHAR(100), IN new_db VARCHAR(100)) BEGIN     DECLARE current_table VARCHAR(100);     DECLARE done INT DEFAULT 0;     DECLARE old_tables CURSOR FOR select table_name from information_schema.tables where table_schema = old_db  and table_type='BASE TABLE';     DECLARE CONTINUE HANDLER FOR NOT FOUND SET done = 1;     OPEN old_tables;     REPEAT         FETCH old_tables INTO current_table;         IF NOT done THEN         SET @output = CONCAT('create table ', new_db, '.', current_table, ' like ', old_db, '.', curren...

64 bits mysql 5 doesn't work on 64 bit windows vista(or 7)

When install the mysql, it came out below Results 1. Prepare configuration (pass) 2. Write configuratin file (pass) 3. Start service (pass) 4. Apply security setting failed with follwoing error Error Nr. 1045 Access denied for user root@localhost (using password:NO) Solution: Here are the steps that worked for me: NOTE: I did not have to open TCP port 3306 at firewall. 1. When service startup fails at MySQL Instance Config Wizard, cancel the wizard, go to Services windows and make sure the MySQL Server is stopped. 2. Execute again MySQL Instance Config Wizard (The service should start now) 3. If step 4 fails (Apply Security Settings), cancel the wizard 4. Create a TXT file (i.e. C:\mysqlpassword.txt) with the following lines UPDATE mysql.user SET Password=PASSWORD('mypassword') WHERE User='root'; FLUSH PRIVILEGES; 5. Open a Command prompt (former DOS console) and execute: (run as administrator ** very important) mysqld --defaults-file="C:...

Time to say good bye

(Hockey) San Jose Sharks won Detroit Red Wings in Game 7 last night. Then   Vancouver  Canucks will face Sharks  this Sunday in Game 1 of the western conference final.  Go Canucks Go. I had very good time to work together with other Tantalusers in the last 6 moths. It is time to say good bye to all of my friends in Tantalus. I got improvement in my English and technologies when I was in Tantalus. Siu-Ki helped me a lot on Oracle PL/Sql. And David showed the way to deal with issues carefully. Each time I talked with Yanik at the new Java Technologies, he can always provide me some surprise and guide me to the correct direction.   Discuss technologies with Ben is always such a good time, I also learned a lot from him. Marc S. is a Scrum master, It's always enjoyable to discuss with him about applying scrum in the team. Thanks to boss Marc, I am more familiar with Jasper Report now and no fearing of any requirement for the jasper report, which is really a gr...

jQuery - StackPanels

 <div class="testSubject2">             <h2 id="header_puppies"><a href="#">Puppies</a></h2>             <div id="panel_puppies">               <img src="puppy-1.jpg"><img src="puppy-2.jpg"><img src="puppy-3.jpg"><img src="puppy-4.jpg"><img src="puppy-5.jpg"><img src="puppy-6.jpg">             </div>             <h2 id="header_flowers"><a href="#">Flowers</a></h2>             <div id="panel_flowers">               <img src="flower-1.jpg"><img src="flower-2.jpg"><img src="flower-3.jpg"><!--img src="flower-4.jpg"><img src="flower-5.jpg"><img src="flower-6.jpg"-->      ...

jQuery - TABS

<div class="testSubject2"> <ul> <li><a href="#tab_puppies2" id="tab_for_puppies2">Puppies</a></li> <li><a href="#tab_flowers2" id="tab_for_flowers2">Flowers</a></li> <li><a href="tab_food.html" id="tab_for_food2">Food</a></li> <li><a href="/jqia2/lengthyTab" id="tab_for_slow2"><span>Slow</span></a></li> </ul> <div id="tab_puppies2"> <img src="puppy-1.jpg"><img src="puppy-2.jpg"><img src="puppy-3.jpg"><img src="puppy-4.jpg"><img src="puppy-5.jpg"><img src="puppy-6.jpg"> </div> <div id="tab_flowers2"> ...

jQuery - autocomplete

<input type="text" class="testSubject" /> $('.testSubject').autocomplete({source:["FX", "Fahrenheit 451", "Family Guy, Volume One, Seasons 1 and 2", "Family Plot", "Fantastic Four (1994), Disc 1", "Funny Girl"]}); $('.testSubject').autocomplete({source:"/jqia2/getMovies"}); //Response ["Final Fantasy: The Spirits Within","Finding Nemo"]

jquery - button

jQuery UI supplies a set of 174 themed icons that can be displayed on buttons. You can show a single icon on the left (the primary icon), or one on the left and one on the right (as a secondary icon). Icons are specified as a class name that identifies the icon. For example, to create a button with an icon that represents a little wrench, we’d use this code: $('#wrenchButton').button({ icons: { primary: 'ui-icon-wrench' } }); If we wanted a star on the left, and a heart on the right, we’d do this: $('#weirdButton').button({ icons: { primary: 'ui-icon-star', secondary: 'ui-icon-heart' } });

jQuery - event bubbling

      <div id="selectionsPane">           <label for="bootChooserControl">Boot style:</label>           <select id="bootChooserControl" name="style"></select>           <label for="colorChooserControl">Color:</label>           <select id="colorChooserControl" name="color" disabled="disabled"></select>           <label for="sizeChooserControl">Size:</label>           <select id="sizeChooserControl" name="size" disabled="disabled"></select>         </div> One capability of the event model that often gets ignored by many a web developer is event bubbling. Page authors frequently focus only on the targets of events, and forget that events will bubble up the DOM tree, where h...

jQuery - usage of Load

 <div id="someContainer"></div> old way to get  the remote server's result:   window.onload = function() {         var xhr;         if (window.ActiveXObject) {           xhr = new ActiveXObject("Microsoft.XMLHTTP");         }         else if (window.XMLHttpRequest) {           xhr = new XMLHttpRequest();         }         else {           throw new Error("Ajax is not supported by this browser");         }         xhr.onreadystatechange = function() {           if (this.readyState == 4) {             if (this.status >= 200 && this.status < 300) {        ...

jQuery - usage of Array

         var anArray=['0ne','two','three'];            $.each(anArray,function(n,value){                 alert(n + 'and '+ value + ' and ' + anArray[n]);            });                     var anObject = {'one':1,'two':2,'three':3};            $.each(anObject,function(name,value){                 alert (name + ' and ' + value + ' and ' + anObject[name]);            }); var index = $.inArray(2,[1,2,3,4,5]); var a1 = [1,2,3,4,5]; var a2 = [5,6,7,8,9]; $.merge(a1,a2); $.unique(array) $.makeArray(object) Converts the passed array-like object into a JavaScript array. Parameters object (Object) The array-like object (such as a NodeList) to be converted. Returns The resulting JavaScr...

jQuery - bind events

 <img id="example" src="example.jpg" onclick="say('BOOM!');" alt="ooooh! ahhhh!"/>   $(function(){         $('#example').bind('mouseover',  function(event) {           say('Crackle!');         }).bind('mouseout', function(event){             say('bye');         })         ;       });

jQuery - attr

 <input type="text" name="mytext" id="mytext" data-custom="custom value"/> get the value of attribute:   var defaultData = $('#mytext').attr('value'); set the value of attribute:   var defaultData = $('#mytext').attr('value','love'); or var defaultData = $('#mytext').attr({'value':'love','title':'my title','disabled':true});