Saturday, September 7, 2013

How to handle select and option tag in jquery?

1. Set and get value to single selection select - We can set value of single selection select using val() function.
Example1 -
<Select id="number">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

<script>
    $("#number").val(2);

        var value = $("#number").val();
</script>

In above example in number list selected option is 2(Two). If we pass parameter to val() fucntion. That set value to element. First element set value and second statement get current selected value.

2. Handle multiple selection - In multiple selection list, user can select multiple optin for that need to add (multiple="multiple") attribute. To get all selected value, need to pass optin:selected selector. See folowing example
Example2 -
<Select id="number" multiple="multiple">
    <option value="1">One</option>
    <option value="2" selected="selected">Two</option>
    <option value="3">Three</option>
    <option value="4" selected="selected">Four</option>
    <option value="5">Five</option>
</select>

<script>
    //Get all selected optin
    var selectedOption = $("#number option:selected);

    //Loop for all selected optin
        $("#number option:selected").each(function() {
        //get option object
        var option = $(this);

        //Get option value
         var value = $(this).val();

        //Get optin text
        var text = $(this).text();
        //Write your code here
    }
</script>

In above example we can use optin:selector to get all selected option. In loop we can get optin object, its value and text.

3. Shift all selected optin into ne select list to another - loop all selected optin for first select and push into another.
Example3 -
<Select id="numberList1" multiple="multiple">
    <option value="1">One</option>
    <option value="2" selected="selected">Two</option>
    <option value="3">Three</option>
    <option value="4" selected="selected">Four</option>
    <option value="5">Five</option>
</select>

<Select id="numberList2" multiple="multiple">
    <option value="10">Ten</option>
    <option value="12" selected="selected">Twel</option>
    <option value="13">Thirteen</option>
    <option value="14" selected="selected">Fourtheen</option>
    <option value="15">Fifteen</option>
</select>

<script>
    //Get all selected optin
    var selectedOption = $("#number option:selected);

    //Loop for all selected optin
        $("#numberList1 option:selected").each(function() {
        //Create new option for second list
        $("#numberList2").append($('<option>', {
                    value: $(this).val(),
                    text : $(this).text()
                })
        );

        //Remove first optin from list1
        $(this).remove();       
    }
</script>

In above example, All selected optins and move into another.

Friday, August 30, 2013

How to configure Symfony2

I have started to develop my web application in symfony in last November, I have faced lots of issues with configuring Symfony framework, Actually it is essay to setup and configure. See the following deals about Symfony. The goal of this blog is to setup and configure the symfony application.

What is Symfony? 
Symfony  is PHP based web application development framework. That having power to scall your big application with security.

Download - Download symfony from http://symfony.com/download

Directory Structure OF Symfony2
Symfony2.3 durectory structure include following six directories,
path/to/webroot/ <- your web server directory (sometimes named htdocs or public)
    Symfony/ <- the new directory
        app/
            cache/
            config/
            logs/
        src/
            ...
        vendor/
            ...
        web/
            app.php
            ...

app - App directory contain AppKernel.php . This class is used to register the bundle. For registering the bundle,  just need to create object of bundle class.

Als app directory contain cache, config, logs, and also resourses directory. Cache directory creates a framework readable code as per dev/prod environment. Logs directory contain log file. Symfony framewor logs each event, info, or exception in log file. Config directory contain all application configuration. And Resources directory contain all global resources like base twig or base layout, Some time we can add a common macro.

src - This directory contain the actual development classes. In symfony2.3 download backup contain default "Demo bundle". As per requirement user can define single bundle application or multiple bundle for as per functionality or requirement.

vendor - This directory contain the all necessary library for the project, We can call this as bundles. Symfony basic bundle provides the lots of bundles, like Swift Mailer, Doctrine, Form, Twig etc.

User can also configure custom bundles, Actually that is the power of symfony to use third part bundles as a components.

web- This directory contain all public resources. app.php is the start up file.

After coping Symfony into your web directory, start apache and run following URL

http://localhost/app_dev.php/

 After running this URL, Sye mfony welcome page will show as the result of your hardwork.

Symfony Welcome Page
First time, We need to configure the PHP extension and configuration. Click on configuration button on welcome screen to check required extension and packages. Configuration page will automatically check s and give you report what is require.

If any missing extension then install that extension first.

If you already setup all extension and dependency then click on  Run the Demo button.

How to add my first page?
The basic componenets for creating your first hello page is,

Controller - Controller is class, in that we can define all action in framework, Any userdefine controller class must be extends from "Symfony\Bundle\FrameworkBundle\Controller\Controller" class.

To create your own controller class, Click on controller directory and create new class named HelloController and extend from Symfony Controller class.

Action - Each action function contain postfix Action. e.g, HelloAction

class HelloController extends Controller { 

    public function helloAction(Request $request) {
         new $this->render('DemoBundle:hello:hello.html.twig', array());;
    }
}

Route - To execute the logic from web we need to create route.  See following sample route,

_hello:
    pattern:  /hello
    defaults: { _controller: DemoBundle:Hello:hello }

pattern - Pattern conten the actual URL the will append after app.php or apps_dev.php.
defaults - Its path of action,

Twig -To design view, Symfony used twig as a default template engine, But We can setup smarty also with symfony by changing default template engine. add hello.twig in "Resources->views->hello" directory.

Add Hello message in twig page. Save project and run following url.

http://localhost/app_dev.php/hello

Your Hello page will be display.

If you want to learn more about Symfony then go to http://symfony.com for more information. Enjoy this steps and run your first Symfony2.3 application.

Monday, October 15, 2012

How to add loader while page load

How to add loader while page load
Some time page is taking time to load, Generally this happened because adding lots of big images or lots of logic behind the page. Then some time user may not understood this, So better way is add loading image or put some text on page so user can easily understood something is loading behind the page.

I will explain you how to add loading image with jQery.

Step1. First we need to take image on page, For this we can choose two way
1. Add div tag add set loading image to background using css
2. Add image tag directly.

e.g <div class="loader"></div>

Step2: Add some CSS to show loader image in div

.loader {
      position: absolute;
   margin: 0 auto;
   z-index: 9999;
   background: url('icon-loader.gif') no-repeat;
      top: 50 px;
   cursor: wait;
}

This css will keep loading image to middle, But if you want lo do something liek gmail or google, then you can make position to fixed and set left to 0 and set background color to yellow.

Step 3 - For displaying some effect we can go through jQuery. In jQuery implement page load event and use fadeout function.

e.g

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        $(window).load(function(){
            $('div.loading').fadeOut(1000);
        });
</script>

If you want to submit form and page and then after click on some action page will take time to load then we can use same code for that also. But for that you need to create a function  with fadeout statement, And call this function after calling your action or submit page.

jQuery html() Method

How to set and get inner HTML using jQuery

In jQuery we can get inner HTML using html(0 method, This method will return inner HTML only first element in document.

i.e if jQuery found more than one selector then its consider only first selector.

Syntax -
1. For get use .html() - To get inner HTML of selector use this method.
2. For set use - .html(string) - To set inner HTML, with one string parameter, this parameter consider as HTML.

Example 1 - You can see following simple example to see how html() funciton work.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        function setText() {
            $('message').html('This is testing message');
        }

        function getText() {
            var text = $('message').html();
            alert(text);
        }
    </script>
</head>
<body>
    <div id="message">This is demo message</div>
    <input type="button" onclick="setText();"/>
    <input type="button" onclick="getText();"/>
</body>
</html>
 

Thursday, October 11, 2012

How to swap variables values?

Swapping is to change values of each other.
e.g I have two variables

int a = 5;
int b = 7;

I want to swap both  values like

a = 7l and
b = 5

1. Using third variable - We can swap values taking third variable.

e.g

int a = 5.;
int b = 7;

int temp;

//Assign value to temp variable
temp = a;

//Change the value of a to b
a = b;

//Last set value of b
b = temp;

So now output is a = 7 and b = 5

2. Using addition and Subtraction method -
int a = 5;
int b = 7;

//Make addition of both numbers
a = a + b;

//To find out value of b
 b = a - b;

//To find the value of a by new b value
a = a - b;

3. Using Multiplication and Division method -
int a = 5;
int b = 7;


//Make addition of both numbers
a = a * b;


//To find out value of b
 b = a / b;

//To find the value of a by new b value

a = a / b;
 
 

Total Pageviews