Simple Calculator in javascriptMVC

Hi friends, last week we make a simple calculator in notepad++. Which is very interesting but in larger projects we need to use some framework for development so that our code will become more modulus. Ok so now we try to code the same calculator in JMVC.We are working in xampp so it will provide us beautiful feature such as controllers in jmvc.
So before going through this please have a look in Notepad Calculator

Steps for using JMVC: 

1. Download JMVC framework from http://javascriptmvc.com/
2.We got following files which we need to put in our calculator file address.:

3. Now go to command Prompt(cmd) and write:C:\xampp\htdocs\jmvc >  js jquery\generate\app calculator , here is our cmd for generation of an app calculator.

 4.you got a file structure such as consisting all files with controllers,models,js,css and html.

 Our script create an application folder consisting above files.
5. now click on calculator.html than you get JMVC welcome screen such as:

Till now we completed with configure our application resources.Now its time to provide some functionality to our application.

6. Go to command line console and and run following:

          C:\xampp\htdocs\jmvc >  js jquery\generate\scaffold Calculator.Models.Calculate

 7.one more thing be careful with naming in html and js files.put the name in calculator.js as 'calculate' and it calculator.html put that as ID of form as shown in picture .

8.Now put your functionality code in controllers such as for calculation,event handling etc. But we careful in writing code because here we are adding our class and events and writing function for those such as in simple notepad we write as $(".but").click() but in JMVC framework we simply write it as function '.but click' : function().for more information refer  http://firstemission.blogspot.in/2012/10/benefits-of-jmvc.html
One more thing  in JMVC for event handling we must pass variable such as function(el,ev )from our functions.

9.write html as we write in our notepad.no changes here.
10. put our beautiful Myplugin.js in same place where our calculator files are present.
11. so now we have our calculator in JMVC framework here:

Simple Calculator by using jQuery

So, We are going to make our first application by using jQuery. Its too easy...
we need to maintain following things.
1. first we write the css for the user interface.
2. jQuery plugin for calculator functionality.
3.Scripting.
4.HTML for the calculator.

CSS is quite easy for a button, so we are leaving this on you.

jQuery Plugin for calculation:

 

Scripting:

We start our scripting by ready function , so that our application become more accurate.  

 

           

HTML:

HTML consist of two table within a form.we are using form for getting extra fuctionality such as reset button .

Now, Here can see our example.

FirstEmission Calculator

Anshul Your mail are welcomed at java.ansh@gmail.com.

Difference between jQuery.extend and jQuery.fn.extend

During my learning I got some problem in  understanding that what is the difference between $.extend and $.fn.extend and here is what I find,First of all these are two different things.we can understand by an Example :

Use of $.extend :

 

                     var MyObject = {  f1 : function( ) { } }

                    $.extend( MyObject , { f2 : function( ) { }} );

we can see initially MyObject have only one function f1. but by using $.extend we add function f2 with MyObject.

Now MyObject is a object with two function f1 and f2.So we understand that the use of $.extends but what's about $.fn.extends, ok now take another example:

Use of $.fn.extend:

 

                      $.fn.extend({

                                        f1 :  function( ) { },

                                        f2 :  function( ) { }

                    });

Here we have a plugin having two functions f1 and f2. It is very effective when we write multiple functions within a plugin because by using $.fn.extend we doesn't need assign each function separately.  

Anshul.

Benefits of JMVC

Currently I started working on JMVC , so after some R&D, I got the following points that really makes JMVC a better framework . It have many features like Controllers, Models, Testing, fixtures but here we will discuss only about the controllers of JMVC framework later on we will discuss other points. controllers are nothing but are simple plugin provided by JMVC, you can compare it with the 'fn' provided for jQuery plugin development. Now the most important part of controller is that It 'controls' a particular DOM element(It may be a simple 'span' or a 50 lines 'div'). We simply add our controller to  a DOM element  and from there our controller 'controls' the element. All methods on your controller which match a jQuery event , will be registered automatically on your DOM element.So what !!! what  we get by doing this???, Ya I know you have this question in your mind so lets play with some coding  to understand the benefits. Here I am presenting a code comparison without JMVC and with JMVC :

Without JMVC :

 

With JMVC:

       

Ok , now what our JMVC do? It simply register the DOM element with our controller and delete the tweets.
so we don't need to worry about finding the DOM element we simply right our functions and forget all other things. Thats make our code more easy.One more thing in JMVC we also provide new syntax of function defining which make automatic registration possible. 

Anshul.

Your mail are always welcomed at  java.ansh@gmail.com.

Disable submit button after clicked with jQuery

In Web development, the most common issue is the double same form submission. Often times, users like to press few time on the submit button to make sure the button is surely clicked, and causing the double form submission issue.
The common solution is disabled the submit button after user clicked on it, and display a loading or submitting message to show user the form is on the progress. 

Disable Submit Button:

To disable the submit button with jQuery, you just need to add a “disabled” attribute to the submit button.

 $('input:submit').click(function(){
 $('p').text("Form submiting.....");
 $('input:submit').attr("disabled", true); 
});

Enable submit button

To enable back the disabled submit button, set the “disabled” attribute to false, or remove the “disabled” attribute.

$('input:submit').attr("disabled", false); 
or
$('input:submit').removeAttr("disabled");

Please refer following link for further information....

Click Here

Anshul.