JAVASCRIPT
using underscore to verify if a variable is undefined or null
Example of if a variable is undefined
|
1 2 3 4 5 |
function test() { console.log(_.isUndefined(foo)); // true, no error due to hoisting var foo = 3; console.log(_.isUndefined(foo)); // false, foo is defined now. } |
Example of if a variable is null function test() { var foo = null; console.log(_.isNull(foo)); // true, var foo = 3; console.log(_.isNull(foo)); // false, }
Install node.js by yum (EPEL Repository)
Install Node from the EPEL Repository An alternative installation method uses the EPEL (Extra Packages for Enterprise Linux) repository that is available for CentOS and related distributions. To gain access to the EPEL repo, you must modify the repo-list of your installation. Fortunately, we can reconfigure access to this repository by installing a package available […]
run nodejs as a background by forever
How to run nodejs from background. Here is an easy way
|
1 |
$ nohup node app.js & |
Howevery, the forever will do more things, such like export log files, js api…
|
1 2 3 4 |
$ sudo npm install forever -g #install $ forever start app.js #start $ forever stop app.js #stop $ forever start -l forever.log -o out.log -e err.log app.js #export log and error |
How to stop nodejs server? list node process and kill it.
|
1 2 |
ps aux | grep node kill ... |
sample of handlebars.js with underscore.js
|
1 2 3 4 |
var cartTemplate = '<p> Name: {{na}} Sku: {{sk}}</p>'; var compiled = Handlebars.compile(cartTemplate); console.log(compiled({na: ‘Compact Round Trampoline’, sk : ‘R54’})); console.log(compiled({na: ‘Medium Round Trampoline, sk : ‘R79’})); |
From above sample code, we can define very clear template (no need JavaScript in the template source).
example of backbone.js validate
Here is a good example of backbone validate
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Backbone.js Test by Ning</title> <!--<link rel="stylesheet" href="style.css">--> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="underscore.js"></script> <script type="text/javascript" src="backbone.js"></script> <style type="text/css"> .rectangle { position: absolute; border: 4px solid black; } </style> </head> <body> Backbone.js Test by Ning </body> <script> /* Validation */ var Vehicle = Backbone.Model.extend({ validate: function (attrs) { var validColors = ['white','red','blue','yellow']; var colorIsValid = function (attrs) { if (!attrs.color) return true; return _(validColors).include(attrs.color); }; if (!colorIsValid(attrs)) { return "color must be one of: " + validColors.join(','); } } }); var car = new Vehicle(); car.on('error', function (model, error) { console.log(error); }); car.set('foo','bar'); car.set('color', 'blue'); car.set('color', 'mauve'); console.log(car.get('color')); car.set('color', 'red'); console.log(car.get('color')); // error handlers can be overridden per-operation car.set({color: 'turquoise'}, { error: function (model, error) { alert(error); } }); </script> </html> |
If the object is banckbone Model
|
1 |
console.log(yourObject instanceof Backbone.Model); |
or
|
1 |
console.log(yourObject instanceof yourModel); |
The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.
jQuery large pictures with a loading spinner
Basic Version In our basic version, we will have a single div containing a loading spinner and once our large image is loaded (in the background) we will remove the spinner and insert our image. There’s a few ways to approach the loading screen, two of which are: Use a background image on the holder […]
Good example to security ajax call
Step-1 : Generate Token System For All Web-Service: Generating Token :
|
1 2 3 4 5 |
<?php session_start(); $token = md5(rand(1000,9999)); //you can use any encryption $_SESSION['token'] = $token; //store it as session variable ?> |
Step-2 : Use it while sending ajax call:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var form_data = { data: $("#data").val(), //your data being sent with ajax token:'<?php echo $token; ?>', //used token here. is_ajax: 1 }; $.ajax({ type: "POST", url: 'yourajax_url_here', data: form_data, success: function(response) { //do further } }); |
Step-3 : NOW, Let’s secure ajax handler PHP file with,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
session_start(); //most of people forget this while copy pasting code ;) if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') { //Request identified as ajax request if(@isset($_SERVER['HTTP_REFERER']) && $_SERVER['HTTP_REFERER']=="http://yourdomain/ajaxurl") { //HTTP_REFERER verification if($_POST['token'] == $_SESSION['token']) { //do your ajax task //don't forget to use sql injection prevention here. } else { header('Location: http://yourdomain.com'); } } else { header('Location: http://yourdomain.com'); } } else { header('Location: http://yourdomain.com'); } |
js form validation with JQuery
Here is good tutorial for js form validation with JQuery http://jqueryvalidation.org/documentation/
jquery render with object javascript and ajax example
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="products-list" id="computer-list"> <li class="prod-tramp"> <div class="product-t"> <div class="product-b"> <h2 class="prodname"></h2> <div class="pic"> <img class="tramp-img" src="" alt="New Model image" style="margin-left: 17px;" /> </div> .... </div> </div> </li> </ul><!--products-list--> |
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var url = ajaxUrl; $.post(url, { method: "getAllProducts" }, function(data) { var obj = jQuery.parseJSON(data); var directive = { "li.prod-tramp": { "t<-Computer": { "img.tramp-img@src": "#{t.store_path}/media/catalog/product#{t.small_image}", "h2.prodname": "#{t.name}", ... } } }; $("ul#trampoline-list").render(obj,directive); |
Ajax return data(JSON)
|
1 2 3 4 5 6 7 8 |
-Computer 0 Object { name="Computer name 1", small_image="/url/imagename1.png", more...} 1 Object { name="Computer name 2", small_image="/url/imagename2.png", more...} 2 Object { name="Computer name 3", small_image="/url/imagename3.png", more...} 3 Object { name="Computer name 4", small_image="/url/imagename4.png", more...} |