JavaScript / HTML / CSS / PHP

20Oct/101

Checking object properties

When I'm working with an object and I need to check a property, I cannot go straight up I always first check if this one exists, but we have different ways to check them, before I used to do this.

   if (object.property) {
       //exists
       console.log(object.property);
   }

It works when the property is undefined, but if the property has false ,zero(0), or empty string ("") it wont work as we wanted.

Other way is checking if it has its own property by using

if (object.hasOwnProperty("property")) {
   //exists
   console.log(object.property);
}

But here you are just checking the properties that come with the object, not the ones that are inherited by the prototype chain. So in case you want to check all the properties use this code.

if ("property" in object) {
   //exists
   console.log(object.property);
}

It's really annoying checking long objects structures

   var object = {
  data: {
    item: {
      sub_item: {
        bla: {
          here : {
            iam: true
          }
        }
      }
    }
  }
};  
// This could throw us a Reference Error
if (data.item.sub_item.bla.here.iam) {
  //it works
}
//Other way could be...
if (data)
  if ("item" in data)
     if ("sub_item" in data.item)
       if ("bla" in data.item.sub_item)
          if ("here" in data.item.sub_item.bla) {
             //don't do this
          }

Try this snippet:

Array.prototype.some = function(fn, thisObj) {
  var scope = thisObj || window;
  for ( var i=0, j=this.length; i < j; ++i ) {
    if ( fn.call(scope, this[i], i, this) ) {
      return true;
    }
  }
  return false;
};
function isSet (object, string) {
  if (!object) return false;
  var childs = string.split('.');
  if (childs.length > 0 ) {
    return !childs.some(function (item) {
      if (item in object) {
        object = object[item];
        return false;
      } else return true;
    });
  } else if (string in object) {
    return true;
  } else return false;
}

var object = {
  data: {
    item: {
      sub_item: {
        bla: {
          here : {
            iam: true
          }
        }
      }
    }
  }
};

console.log(isSet(object,'data.item')); // true
console.log(isSet(object,'x')); // false
console.log(isSet(object,'data.item')); // true
console.log(isSet(object,'data.item.sub_item.bla.here.iam')); // true
Filed under: javascript 1 Comment
12Aug/103

Private & public properties for JavaScript

Here we have a good article about keeping private properties in your JavaScript kinda Java , well we know that JavaScript is not enough good for Object Orientation but it has a lot good parts :) is very flexible.

Here we have the normal way for making "Classes"

var myClass = function () {
    //this is like the constructor
};
myClass.prototype.myMethod = function () {
   //wow a method :D
};
var myClassInstance = new myClass();

Well we know that everybody who use firebug or javascript pretty often could have access to this objects, so a good way for keep this objects not accesible to the window parent object.. is doing this

(function(){
    var myClass = function () {
        //this is like the constructor
    };
    myClass.prototype.myMethod = function () {
       //wow a method :D
    };
    var myClassInstance = new myClass();
});

And this way is to keep your properties private even from your own objects (I took this method from the Douglas Crockford website), the problem here is that you just access from public to private properties, and private don't have access to public.

var myClass = (function () {
    function privateMethod() {
        alert("Hello I'm the private method");
    }
    return {
        variable:1,        
        method: function () {
              alert(this.variable); // shows 1
        },
        methodCallPrivate: function () {
            privateMethod();
        }
    }
});
var myClassInstance = new myClass();
myClassInstance.method(); // shows 1
myClassInstance.methodCallPrivate(); //shows "Hello I'm the private method"

But I found this way if you want both have access to each other

var myClass = (function () {
    var _public = {};
    var _private = {};
    _public.pubVariable = "Hello World from _public.pubVariable";
    _private.priVariable = "Hello World from _private.priVariable";
    _public.pubMethod= function() {
        alert(_private.priVariable);
    };
    _private.priMethod = function() {
        alert(_public.pubVariable);
    };
    _public.callpriMethod = function() {
        _private.priMethod();    
    };
    return _public;
});
var myClassInstance = new myClass();
myClassInstance.pubMethod(); // shows "Hello World from _private.priVariable"
myClassInstance.callpriMethod(); // shows "Hello World from _private.priVariable"
myClassInstance.priMethod(); //Throws an Error
Tagged as: , , , , , , 3 Comments
19May/101

Form submit like AJAX style using an Iframe

I remember the first time I start using AJAX it was really really amazing :) till I found that I can't send images just text, well I'll show how to upload a file without refreshing the whole page.

Here is you html form code:

1
2
3
4
<form enctype="multipart/form-data" method="post" >
    <input name="image" type="file" />
    <input type="submit" value="Submit" />
</form>

And you have add an Iframe element , doesn't matter in which part of the document but I recommend you put it inside of the form like this, add the target attribute to the form element and put the iframe name attribute as a target, you can hide the iframe with the style display:none.

1
2
3
4
5
<form enctype="multipart/form-data" method="post" target="iframe">
   <input name="image" type="file" />
   <input type="submit" value="Submit" />
   <iframe id="iframe" style="display:none"></iframe>
</form>

Ok the problem is that there's no way to fire the onload event of the iframe (I already tried many ways, and asked many people if you know how please let me know) so you have to do a Script that notice you when the Iframe is ready and not just that, maybe you'll need a response from the server.

So here we have to find a way to receive the data and call back a function when the iframe is loaded.

You can follow this way:

1
2
3
4
5
6
7
8
9
10
11
12
<form action="submitIframe.php" enctype="multipart/form-data" method="post" target="iframe">
    <input name="image" type="file" />
    <input type="submit" value="Submit" />
    <iframe name="iframe" style="display:none;"></iframe>
</form>
<script>
  function myCallBackFunction(data)
  {
    //put your code here
    alert(data);
  }
</script>

So you need to response something like this:

1
2
3
4
<script type="text/javascript">
var data = "<?=$myServerResponse ?>";
parent.myCallBackFunction(data);
</script>

In this case I did it with PHP, this is going to be called within the iframe.

Download code here

Tagged as: , , , 1 Comment
   

Twitter: ramonlechuga

Sites

Categories