Hi,
Today i will show very easy way to read POST variables from Javascript using PHP.
1 2 3 | <script type="text/javascript">// <![CDATA[ var post_json = "<?php echo json_encode($_POST); ?>"; // ]]></script> |
We encode all POST vars with php to javascript JSON.
Now we can access the vars in simple way:
1 | post_json.var_name; |
Have a nice day,
Garry
Sometimes custom events can make the life more easy.
If you want to communicate between classes and other object on the page you can simply
trigger a custom event with data.
First of all we create data exchange div:
1 | <div id="data_exchange"></div> |
Now we need to listen the “data exchange” div to receive the events.
1 2 3 | $('#data_exchange').bind('event_name', function(event, data) { alert(event + ": " + data); }); |
We show alert popup when we receive the event “event_name”.
The next step is dispatch the event to the “data exchange”:
1 | $('#data_exchange').trigger('event_name', 'our data'); |
Have a nice day 
Garry Lachman
From Wikipedia: “The factory method pattern is an object-oriented design pattern to implement the concept of factories. Like other creational patterns, it deals with the problem of creating objects (products) without specifying the exact class of object that will be created. The creation of an object often requires complex processes not appropriate to include within a composing object. The object’s creation may lead to a significant duplication of code, may require information not accessible to the composing object, may not provide a sufficient level of abstraction, or may otherwise not be part of the composing object’s concerns. The factory method design pattern handles these problems by defining a separate method for creating the objects, which subclasses can then override to specify the derived type of product that will be created.”
2 Classes:
1 2 3 4 5 6 7 8 9 10 11 | <script language="javascript" type="text/javascript"> // Class 1 function class_one() { this.init = function() {} } // Class 1 function class_two() { this.init = function() {} } </script> |
Factory Method:
1 2 3 4 5 6 7 8 9 10 11 12 | <script language="javascript" type="text/javascript"> function factory_method(){ } // now add static function to get the instance factory_method.get = function(_type){ if (_type == 1) { return new class_one(); } else { return new class_two(); } } </script> |
Usage:
1 2 3 4 | <script language="javascript" type="text/javascript"> var _instance = factory_method.get(1); _instance.init(); </script> |
Have fun
Hi….
When using Javascript as OOP mode deep functions (function in function) lose the “this” scope.
I found some solution for this problem…
Same problem i found when you call other class with callback, the callback function returns without “this” scope.
how the problem looks:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function scope_experiment() { this.test_var = "test"; this.level_one = function() { alert("Level One: " + this.test_var); function level_two() { alert("Level Two: " + this.test_var); } level_two(); } } var test_scope = new scope_experiment(); test_scope.level_one(); |
The output will be:
1) Level One: test
2) Level Two: undefined
And now…. The solution:
All what you need is to pass “this” to the deep function…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function scope_experiment() { this.test_var = "test"; this.level_one = function() { alert("Level One: " + this.test_var); function level_two(_this_scope) { // we use _this_scope as this alert("Level Two: " + _this_scope.test_var); } level_two(this); // we pass this to the function } } var test_scope = new scope_experiment(); test_scope.level_one(); |
The output will be:
1) Level One: test
2) Level Two: test
Mission Accomplished
I open Requirements Specification for Advance One Time URL script.
You can see and help with ideas.
Hi,
I wrote little script + lib for one time url.
this script make MD5 hash string for one time using and redirect file.
the links looks like: http://garry-lachman.com/link/ce75f50f55bcedf0a72098a01764548b and can be used one time only.
The url storing is based on PHP Sessions and link redirection on MOD_REWRITE but there is example
for non MOD_REWRITE using
Example of create of the link:
1 2 3 4 5 | <?php require_once("libs/one_time_url.lib.php"); $one_time_url = new one_time_url(); ?> <a href="<?php echo $one_time_url->make_url("http://www.garry-lachman.com"); ?>">This is one time URL to http://www.garry-lachman.com</a> |
The code & example can be downloaded form here.
License: GNU/GPL (open source)
Hi,
Here is a list of 5 best jQuery tooltips i found.
Simple & professional, full customized & working from box, positionings, effects, dynamic html code in tooltip.
As far i found, this is the most powerful tooltip i found.
Replacing standard tooltips is easy: Just include the script on the page, add a stylesheet, select the elements to tooltip and call the tooltip plugin.
qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework.
Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!
Inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window’s edges.
BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event. These balloons are drawn dynamically using the canvas HTML 5 element, and options include corner radius, spike length and width, stroke width. The balloons can auto-position based on the most available area in the current display window or they can be positioned according to an array of preferences (just left or right for instance).
Have fun with the scripts
Garry Lachman
Very useful widget from jQuery package is the Dialog windows.
its the best replacement for alert command and its very easy to use.
How its work:
First of all we need to load the jQuery js files & the default UI Widgets css file (you can download the css file and customize it).
put the code in header (
1 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script> |
Than add the div with the title and the content
1 2 3 4 5 | <div id="dialog" title="Basic dialog"> This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </div> |
Init the jQuery dialog:
1 2 3 | <script type="text/javascript">// <![CDATA[ $(function() { $( "#dialog" ).dialog(); }); // ]]></script> |
The complete code:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ $(function() { $( "#dialog" ).dialog(); }); // ]]></script> <div id="dialog" title="Basic dialog"> This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </div> |
Screenshot of jQuery Dialog UI Widget:
jQuery UI Dialog widget
Have fun,
Garry Lachman
The world of jQuery
As you read at my last post only before few weeks i discover the power of
PHP Frameworks (i know, i`m 25 years old and feels like 60, lol) and now
the next step.
But before that, i always hate windows, i`m Linux user over 10 years but
in my last job i develop in ActionScript 3 (Flash).
after i leave there i never search tools that can replace the old and shitty
Flash.
jQuery to me new world of web development. now all looks so easy and stable
and i can remove the Windows install from the secound Hard Drive and say
bye bye to Adobe & Microsoft and work on Open Souce frameworks.
Some examples of jQuery, just look how easy it..
Adding Click Listener to div:
1 2 3 4 5 | $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); }); |
Animation:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function() { $("#clickhere").click(function() { $("#animate1").animate({ height: "20px", width: "50%", padding: "5em", marginLeft: "40px", borderWidth: "5px" }, 1000); }); }); <input id="clickhere" type="button" value="Click Me!" /> |
Add/Remove css class to div:
1 2 3 4 | $(document).ready(function() { $("#orderedlist").addClass("red"); $("#orderedlist").removeClass("blue"); }); |
This examples is the the start of the world of jQuery.
Try it !!!
Have a nice day,
Garry Lachman
I really never used frameworks, i always build my system without any frameworks.
but no more… after few days with CodeIgniter i`m in Love…
“CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you’re a developer who lives in the real world of shared hosting accounts and clients with deadlines, and if you’re tired of ponderously large and thoroughly undocumented frameworks”
Have a nice day
Garry Lachman
6 PHP Template Engines
I think i don`t need to explain what is “Template Engine”, if this is the first time you hear about it
look at this link (Wikipedia)
Here is a list of some PHP Template Engines:
Smarty
Smarty is a template engine for PHP, facilitating the separation of presentation (HTML/CSS) from application logic. This implies that PHP code is application logic, and is separated from the presentation.
Simple Template Parser (STP)
This parser has been developed 5 years ago with the aim to produce a tool that allows to separate code from HTML. It started out as a simple php function. Meanwhile it has been rewritten by Stefan Reich and turned into a class file.
In larger projects there are usually designers and developers involved.
PHP XTemplate
XTemplate allows you to store your HTML code separately from your PHP code (as opposed to compiling your template into PHP as per Smarty etc.). It has many useful features such as nested blocks and various kinds of variable interpolation, and yet the code is very short and very optimized.
Layout Solution
Layout Solution is a set of open source PHP classes to simplify website development and maintenance. It holds commonly used variables and page elements, allowing you to focus on designing your pages rather than worrying about correctly duplicating common layouts over and over.
Dwoo
Dwoo is a PHP5 template engine which is (almost) fully compatible with Smarty templates and plugins, but is written from scratch for PHP5, and adds many features.
Open Power Template
Open Power Template is a template engine for PHP5. Its task is to produce a full HTML code from the script data and ”code templates” that show, how and where put them. OPT has many features not only for programmers, but also for template writers that make this process nice and easy.