Ext JS 4

Currently applications are using more of JQuery and plugins, but developers are finding difficult to find plugins or modifying them as per the need. To resolve these issues, here is Ext JS by Sencha.

EXT JS 4 is a major step towards enhanced scripting. It brings a lot of controls and data packages when building web apps. The extension is built on MVC (model-view-controller) architecture which will encourage developers to use more layered scripting in an object oriented fashion.

All the default controls are already available (Web Desktop, grids, menus, trees, containers and much more). Developers can create MVC model/ View/ Controller and apply object oriented concepts there. All the communication is happening in the JSON format. We need not to find JQuery Plugins or create custom controls for our applications. This a new step towards making the application rich, faster and layered application at client side.

SASS (Synthetically Awesome Style Sheets)

SASS is the extension of CSS3 with variables, inheritance, rules and much more. It is much formatted style which reduces the effort for the developer to write different CSS for different elements.

Keep developing rich scripting and styling..

Hello friends getting lightbox/modalbox in to the application is really an addon to the site.

Here are few simple steps to get  lightbox/modalbox working on your cakephp site.

1. Download ModalBox (you also need a prototype + script.aculo.us files there.) extract them all and place the files in webroot folder. (files you should see after extraction are “js/cakemodalbox.js” , “js/modalbox.js”, “css/modalbox.css”, “css/spinner.gif”).
2. Include  4 javascripts i.e prototype.js, scriptaculos.js, modalbox.js and cakemodalbox.js in your default template file in the same order mentioned here. (Note for cakemodalbox.js coming below modalbox.js)
3. In your controller include 2 lines of code
   1. var $components = array(’RequestHandler’);   // note for ‘RequestHandler’
   2. var $helpers    = array(’Html’,'Javascript’, ’Ajax’);
4. There are no changes in model specifically.
5. Now for example you want to show a view file say your login page with lightbox then just follow the simple steps.
   1. Include var $components = array(’RequestHandler’); and var $helpers    = array(’Html’,'Javascript’, ’Ajax’); in your controller. In my case it is user controller.
   2. Now for example you want to show a view file say your login page with lightbox then just follow the simple steps.echo $html->link(’Login’,array(’action’ => ‘ControllerName/login‘),array(’title’ => ‘Customer details’,'onclick’ => “Modalbox.show(this.href, {title: this.title, width: 400}); return false;”));

change the ‘ControllerName’ as per your need.

Likeways you can show any page in a light box or modalbox.

Do let us know in case of any issue.

Algoworks

Some times we get stuck that, our JS code submitting the form is not working, so here is a small trial solution to your problem.
if your code have any form element named “submit”, than just rename it to anything else.
and see the magic.

Trivial problem while making Ajax call across domains.

I had just started understanding Ajax through jQuery using JSON. jQuery support to Ajax and JSON is awesome. I was stuck at a point where I had to make ajax call from my php application to java application. JSON seems to be the ideal solution for this, however a normal $.getJSON() method does not work as expected in case of cross domains calls.

Over the net, you will find that you need to write your own jquery function in such scenario. You may find sample codes as well. Forget it!!! JSON-P (’P’ stands for padding) does the magic.

In my next posts, I will discuss more about JSON and JSON-P, and how to make cross domain ajax calls!!!

Use this to get today’s date:

<code>var today = new Date();</code>

Date has several functions which can be called to get the today’s date, month and year.

Use the following to get the -

<code>Month: today.getMonth();
Date: today.getDate();
Year: today.getYear();</code>

There are two important things here to note -

1. getMonth() return values from 0-11, so always add ‘1′ to get the current month
2. getYear() function is not Y2K compliant. e.g. for year 2008, it returns 108 instead of 2008. So when you are using getYear() function, you would need to add 1900. Otherwise, you can safely use getFullYear() function to get the correct year.

One can even find current “time” using the following functions:

<code>Hours: today.getHours();
Minutes: today.getMinutes();</code>

Running Jquery with other JS frameworks, like mootools

Generally, people face problem running mootools and jquery simultaneously.
Here is a simple way to perform the task:

SCRIPT CODE:
<code>
jQuery.noConflict();
jQuery.(’#ids’).hide(’slow’);
</code>

HTML CODE:
<code>
&lt;div id=’ids’&gt;Algoworks&lt;/div&gt;
</code>

If you think, that you didn’t faced error.
Just to see, in which condition moootools stops working
1. include mootools.js
2. jquery.js
And, check for JS Errors.

Why does occurs?
This all happens due to naming.
Both the JS Frameworks uses same Object named ‘<strong>$</strong>’ to Refer.
Now our script will get ambiguity in referring the object.

AJAX stands for Asynchronous JavaScript And XML.
AJAX is based on JavaScript and HTTP requests.
AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
AJAX is a browser technology independent of web server software.
AJAX Uses HTTP Requests
In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the “Submit” button to send/get the information, wait for the server to respond, then a new page will load with the results.

Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.

With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object

With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.
The XMLHttpRequest Object

By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded!

AJAX - Browser Support

The keystone of AJAX is the XMLHttpRequest object.

Different browsers use different methods to create the XMLHttpRequest object.

Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.
Source: W3Schools

JSON (JavaScript Object Notation) is a lightweight data-interchange format.
JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

Area of use:Sending and Fetching AJAX request and response.

Advantage over XMLResponse Object: JSON doesn’t need a bit extra code to be manipulated by JavaScript on Client side, while manipulation of XML objects need minimum 4kb of script. As the number of browser in compatibility issue increases the size of script increases.

Sample PHP code:

$arr = array (’a'=>1,’b'=>2,’c'=>3,’d'=>4,’e'=>5);
echo json_encode($arr); // encode array to JSON string

Output:

{”a”:1,”b”:2,”c”:3,”d”:4,”e”:5}

Decode:

$json = ‘{”a”:1,”b”:2,”c”:3,”d”:4,”e”:5}’;
json_decode($json);

For further ref: JSON

CODE

function jsonRun(){
var myFirstJSON = eval({’myname’: ‘nirbhab’, ‘myfrnd’: ‘ankesh’});
var x;
for (x in myFirstJSON)
{
document.writeln(myFirstJSON[x]);
}
}

NOTE: Some servers doesn’t have json_encode() and json_decode functionality.
You can also use PEAR Service_JSON Class instead.
PEAR

Refer URL for advance Learning on JSON : http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)