Archive

March 2016

Browsing

Dynamic dependent dropdown select list using jquery and php

Dynamic dependent dropdown select list using jquery and php

In this tutorial we are going to see how to change states drop down list ans city drop down list option based on the dropdown select country name. we are going use jquery and mysql database for select country and retrieve state data. means Loading records from database dynamically and display it in select box without refreshing the whole page with the help of Ajax and jQuery and PHP code.  country state city Dropdown, using ajax and jqurey fill country state city dropdown.  Ajax country state city dropdown php, onchange in jquery, dynamic dropdown.

Step 1:  Create database and database table With content. Create database name “Country_db” and table with Country, state and city

Country table:

CREATE TABLE IF NOT EXISTS `countries` (
  `country_id` int(11) NOT NULL,
  `country_name` varchar(30) CHARACTER SET utf8 NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active'
) ENGINE=InnoDB AUTO_INCREMENT=240 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Cities Table

CREATE TABLE IF NOT EXISTS `cities` (
  `city_id` int(11) NOT NULL,
  `city_name` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `state_id` int(11) NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active'
) ENGINE=InnoDB AUTO_INCREMENT=6178 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

States Table

CREATE TABLE IF NOT EXISTS `states` (
  `state_id` int(11) NOT NULL,
  `state_name` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `country_id` int(11) NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '0:Blocked, 1:Active'
) ENGINE=InnoDB AUTO_INCREMENT=1652 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Step 2: Database Config

<?php
//db details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'country';

//Connect and select the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

Step 2: Create the index page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>
    <div class="select-boxes">
    <?php
    //Include database configuration file
    include('dbConfig.php');
    
    //Get all country data
    $query = $db->query("SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC");
    
    //Count total number of rows
    $rowCount = $query->num_rows;
    ?>
    <select name="country" id="country">
        <option value="">Select Country</option>
        <?php
        if($rowCount > 0){
            while($row = $query->fetch_assoc()){ 
                echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
            }
        }else{
            echo '<option value="">Country not available</option>';
        }
        ?>
    </select>
    
    <select name="state" id="state">
        <option value="">Select country first</option>
    </select>
    
    <select name="city" id="city">
        <option value="">Select state first</option>
    </select>
    </div>
</body>
</html>

Step 3: create jquery with ajax function to pass country id into next page and select state and cities form the database table

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#country').on('change',function(){
        var countryID = $(this).val();
        if(countryID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'country_id='+countryID,
                success:function(html){
                    $('#state').html(html);
                    $('#city').html('<option value="">Select state first</option>'); 
                }
            }); 
        }else{
            $('#state').html('<option value="">Select country first</option>');
            $('#city').html('<option value="">Select state first</option>'); 
        }
    });
    
    $('#state').on('change',function(){
        var stateID = $(this).val();
        if(stateID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'state_id='+stateID,
                success:function(html){
                    $('#city').html(html);
                }
            }); 
        }else{
            $('#city').html('<option value="">Select state first</option>'); 
        }
    });
});
</script>

Ajax page for select database of cities and states

<?php
//Include database configuration file
include('dbConfig.php');

if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
    //Get all state data
    $query = $db->query("SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC");
    
    //Count total number of rows
    $rowCount = $query->num_rows;
    
    //Display states list
    if($rowCount > 0){
        echo '<option value="">Select state</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>';
        }
    }else{
        echo '<option value="">State not available</option>';
    }
}

if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){
    //Get all city data
    $query = $db->query("SELECT * FROM cities WHERE state_id = ".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC");
    
    //Count total number of rows
    $rowCount = $query->num_rows;
    
    //Display cities list
    if($rowCount > 0){
        echo '<option value="">Select city</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
        }
    }else{
        echo '<option value="">City not available</option>';
    }
}
?>

That’s it enjoy the code. demo and download the script and use it easily. Feel free to comment your suggestions regarding this tutorial. Subscribe me. 

WordPress Plugin For multilingual WordPress website

How To make a multilingual  Wordpress website using Plugin

Do you want to translate your WordPress site in multiple languages? Wondering where to start? In this article, we will show you how to easily create a multilingual WordPress Website.  WordPress by default is not multilingual. This means that you need to add multilingual functionality through a translation plugin, creating a WordPress Multisite using installation of twp website and access each other or need to install plugin for translation.

Adding multilingual functionality to your WordPress website is Very simple you have to install plugin and use the website as multiple languages . Two steps to add plugin first thing is u need to approach translator and write content and add to page another thing is simple plugin can change the content easily. Let’s start by looking into building a multilingual WordPress site with manual translations.

Let us discuss the Types of plugin for multilingual websites.

WPML – WordPress Multilingual Plugin(Premium)

WordPress Plugin For multilingual WordPress website

WPML makes it easy to run a multilingual website with a single WordPress installation. Choose languages for your site and start translating content.

WPML comes with over 40 languages. You can also add your own language variants (like Canadian French or Mexican Spanish) using WPML’s languages editor.

multilangual plugin

WordPress Plugin For multilingual WordPress

WordPress Plugin For multilingual WordPress website - Wpml

Polylang

WordPress Website Multi Lingual Polylang

Polylang allows you to create a bilingual or multilingual WordPress site. You write posts, pages and create categories and post tags as usual, and then define the language for each of them. The translation of a post, whether it is in the default language or not, is optional.

WordPress Website Multi Lingual Polylang demo

WordPress Website Multi Lingual Polylang demo2

WordPress Website Multi Lingual Polylang demo3

qTranslate

qtranslate plugin module

The plugin offers a way to maintain dynamic multilingual content on a WordPress site. While static localization is already excellently implemented and offered by WordPress framework through po/mo file framework, it is still impossible to maintain dynamic multilingual content without an additional specialized plugin, a kind of which qTranslate-X belongs to. For example, what if you need to make title, content and excerpt of a page to be multilingual? In theory, it could be handled by po/mo files, but in an insanely inconvenient way.

 

qtranslate module plugin screenIt includes a language chooser widget. Your readers can select the language they want and it changes your content (or at least the content that was created after the install) to that language. It also changes your menus.

How-To-Make-Your-WordPress-Website-Multi-Lingual-qTranslate-Plus

Xili-Language

How-To-Make-Your-WordPress-Website xili

xili-language provides for a bilingual (or multilingual) website an automatic selection of language (.mo) in theme according to the language of current post(s) or page. Theme’s behavior can be fully personalized through settings, hooks and api. Ready for CMS developers and designers.

WordPress Plugin For multilingual WordPress xili

How-To-Make-Your-WordPress-Website-Multi-Lingual-xili part 2

How-To-Make-Your-WordPress-Website-Multi-Lingual-xili part 3

A quick scan of the Xili site reveals that the plugin developers are clearly not fluent English speakers. Instructions provided by the developers can be tricky to understand.

WordPress Plugin For multilingual WordPress xili part 4

Installation is not easy and requires some preparation of the site’s theme and framework. Furthermore, set up is much more hands-on than other plugins we’ve reviewed here.

Google Language Translator

WordPress Plugin For multilingual WordPress website - google translator

This free plugin connects to the Google Translate external translation service. It provides translations for 81 languages. It places a small box on your site that users can click on to perform the translation. You can also post the button in pages, posts, and in the sidebar with a short code.

Settings include: inline or vertical layout, show/hide specific languages, hide/show Google toolbar, and hide/show Google branding. Add the short code to pages, posts, and widgets.

WordPress Plugin For multilingual WordPress website - google translator demo 1

Multilingual Press

WordPress Plugin For multilingual WordPress website - multipress

Multilingual Press allows you connect multiple sites as language alternatives in a multisite and use a customizable widget to link to all sites.

You can set a main language for each site, create relationships, and start translating. You get a new field to create a linked post on all the connected sites automatically. They are accessible via the post/page editor – you can switch back and forth to translate them.

It’s a free version and very easy to use
You can set up unlimited site relationships in the site manager.
Language Manager with 174 editable languages.
It will allow you to view the translations for each post (or page) underneath the post editor.
You can edit all translations for a post from the original post editor without the need to switch sites.

Transposh

WordPress Plugin For multilingual WordPress website - transpoash

Transposh translation filter for WordPress offers a unique approach to blog translation. It allows your blog to combine automatic translation with human translation aided by your users with an easy to use in-context interface.

This free plugin is extremely easy to set up and use. One thing that I like about this one is you don’t have to create content in each language. Also, all of your previous content gets translated. This is a major improvement over some of the other plugins. They will only translate posts that were created with the plugin installed.

WordPress Plugin For multilingual WordPress website - transpoash demo1

Multisite Language Switcher

WordPress Plugin For multilingual WordPress website - Multisite-Language-Switcher

A simple, powerful and easy to use plugin that will add multilingual support to a WordPress multisite installation, i.e. multiple subdomains or folders (if you need to set up multiple sites across multiple domains, you’ll also want to use the WordPress MU Domain Mapping plugin as well – as long as the domains are all hosted on the same server.).

The Multisite Language Switcher enables you to manage translations of posts, pages, custom post types, categories, tags and custom taxonomies.

Conclusoin :

How you choose to add multi-language functionality to your site is a big decision that you should consider carefully. You will want a solution that is user friendly for you in order to allow you stay focused on your content.

No matter which method you choose, one thing is certain: manual translation, whether from the onset or after automatic translation, is still a necessity. Doing this will help you gain and maintain credibility with visitors and also help you avoid penalties from Google for having duplicate content