Using Selectric Js with Jquery Validator Js

I have using normal form. And I want to change the select box style. So I have found Selectric Js Plugin javascript.

And I thought that the validation of the form will happen in the client side means that will looks much easier. So I have downloaded Jquery Validator Plugin. Both are working fine.

After that I have found a problem with form validation. When I try to use selectric js with jquery validator means the selectric will hide the default selectbox. So the error message of the select box won’t appear in the frond end. I have searched through the internet. And I have found an solution from selectric issues page.

Here is the Selectric Issue 32. In that lcdsantos has give a solution for the problem.

Here is the solution I got.

$('form').validate({
    ignore: ':hidden:not(select)',
    errorPlacement: function(error, element) {
        // check if element has Selectric initialized on it
        var data = element.data('selectric');
        error.appendTo( data ? element.closest( '.' + data.classes.wrapper ).parent() : element.parent() );
    },
    name: {
      required: true,
    },
    email: {
      required: true,
      email: true
    },
    country: {
      required: true
    }
});

Wow, This will get the error for the select box.

This will trigger manual error placement and place the error after the selectric list box.

But this also has problem. The problem is when we change the selectric box value the error is not hiding. After searching related this problem I have found another solution.

The solution is,
jQuery Selectric (select replacement) validation.

In this solution Sparky saying that to write a custom handler that will trigger validation on the hidden element programmatically whenever its value changes.

(e.g)

$('select[name="mySelect"]').on('change', function() { // fires when the value changes
    $(this).valid(); // trigger validation on hidden select
});

So the final solution would be like this

$('form').validate({
    ignore: ':hidden:not(select)',
    errorPlacement: function(error, element) {
        // check if element has Selectric initialized on it
        var data = element.data('selectric');
        error.appendTo( data ? element.closest( '.' + data.classes.wrapper ).parent() : element.parent() );
    },
    name: {
      required: true,
    },
    email: {
      required: true,
      email: true
    },
    country: {
      required: true
    }
});
$('select[name="country"]').on('change', function() { // fires when the value changes
    $(this).valid(); // trigger validation on hidden select
});

Now my code working fine. 🙂

Laravel 5 Basic CRUD Application – Part 2 (Setup)

Laravel 5 Basic CRUD Application – Part 1

In part 1 we have seen that how to install laravel.

Now we have mycrud directory in ‘/var/www/html/’ directory.

Now we are going to setup database for laravel. To do this you have to setup the db name and user name, password in the env file. This env file located in laravel root directory. In our example the file is in ‘/var/www/html/mycrud/.env’

“Note: the .env file is hidden. So make sure that you have viewing hidden files. If no means just press

“CTRS + H” to view hidden files. And if you don’t have hidden files means just simply copy and paste .env.example file and rename it to .env.

Now edit the .env file, you can see the following lines in the file.

DB_HOST=localhost //Host 
DB_DATABASE=mycrud //DB name 
DB_USERNAME=root //Username 
DB_PASSWORD=root //Password 

The Default database for Larvel is MySql. If you are not using mysql means just mycrud/config/database.php file and find the below line

'default' => 'mysql',

Change mysql into whatever you want. If you don’t know about the database list means you can scroll down the database.php file, now you can see ‘connections‘ array. Inside of connections array you can see databases list with configuration.

That’s all. The basic setup for laravel is completed. See you in Part 3.

With Regards,
Praveen Srinivasan

Laravel 5 Basic CRUD Application – Part 1 (Installation)

Laravel is the very powerful framework for php web application.

Installation

Before starting new project you need Composer to install required dependencies. This helps you to download laravel dependencies.
To install Composer you need php5-curl. To install curl simply run the following command.

$ sudo apt-get install php5 git php5-curl

After successful installation of curl you can simply run the following command to download the composer.

$ curl -sS https://getcomposer.org/installer | php

Now you need to set path environment variable for composer. So that you can simply access composer by simply typing composer

Run the following command to set environment variable for composer

$ export PATH="$PATH:~/.composer/vendor/bin"

Now you can download laravel installer using composer. The below command will download the laravel installer.

composer global require "laravel/installer=~1.1"

That’s all..! All are set.

Now create a basic project by simply typing the following command

laravel new mycrud

now the new project mycrud was created in the directory. Be sure your project directory is in ‘/var/www/html’

Laravel 5 Basic CRUD Application – Part 2 (Setup)

Scrap web content using Python Beautifulsoup

Hello to all,

Now I am sharing about Python BeautifulSoup package which helps to scrap html content from the web.
You can install BeautifulSoup by pip using the following command.

$ sudo pip install beautifulsoup4


the following simple program will scraps all links from index.html file

index.html

<html>
<headl>
<title> Simple BeautifulSoup <title>
<body>
<a href="http://google.com">Click</a>
</html>



test.py

from bs4 import BeautifulSoup
 
soup = BeautifulSoup(open("./index.html"))
 
for anchor in soup.find_all('a'):
    print(anchor.get('href', '/'))


Save the both file into a single folder. Then run the python command “python test.py“. The Beautifulsoup will open the index.html file and finds all a (anchor) tags in the html file. Then it’ll get the href in the anchor tag, after that it’ll print the href’s text.
The output will look like this.

$ python test.py
http://google.com

And you can also scrap content from the web. The following is my code which gets all link from a website.


flipkart_href.py

from bs4 import BeautifulSoup
import urllib2

url = "http://flipkart.com"
page = urllib2.urlopen(url)
soup = BeautifulSoup(page)
links = soup.find_all("a")

for link in links:
    address = "flipkart.com"+link.get('href')
    print address+ '\n'



Explanation->

  • url = http://flipkart.com -> This line stores the url.
  • page = urllib2.urlopen(url) -> The urllib2 will open the url from the web and stores it into page variable
  • soup = BeautifulSoup(page) -> The BeautifulSoup function will stores the content of the webpage into soup variable
  • links = soup.find_all(“a”) -> The soup.find_all function will get all “a” anchor tags into links varible
  • for link in links: -> This for loop will stores all the links variable into link variable for looping process.
  • address = “flipkart.com”+link.get(‘href’) -> The link.get(‘href’) function will get links from the anchor tag, and stores it into address variable.
  • print address -> This will prints the address finally.
  • Similarly we can scrap anything from web with the use of python BeautifulSoup.

    Any queries with BeautifulSoup, please comment.

    With Regards,
    S. Praveen

    Create a Repository in GitHub

    Hello to all,

    Now I am going to share how to create a Repository in GitHub account, and how to add an initial commit into that.
    First we need to create an new account in GitHub
    Then you have to install Git on your Linux Desktop using the following command.

    $ sudo apt-get install git-core

    Create a new repository and push data using command line


    Just do the following commands

    $ touch README.md
    $ git init
    $ git add README.md
    $ git commit -m "first commit"
    $ git remote add origin https://github.com/Your-User-Name/Your-Repository-Name.git
    $ git push -u origin master


  • The first “touch README.md” command is used to create an README file for your Repository.
  • And the second “git init” command is used to initialize an empty Repository in the current working directory of your local computer.
  • The third “git commig -m ‘first commit'” command is used to changes records to the repository.
  • The fourth “git remote add origin ”’github.com/Your-User-Name/Your-Repository-Name.git”'” command adds a new remote repository of your project
  • The final “git push -u origin master” commands pushes your new branches and data to a remote repository

    If you have any doubts means got the the Try GitHub link. It has a live demo about github.com

    With Regards,
    S. Praveen

  • Convert Tamil Unicode values into Tamil strings

    Hi here I shared How to convert Tamil Unicode values into Tamil strings in python.

    Just we need to store the values in Array as follows. Here i am created an array variable which stores my all the Unicode Tamil values.

    Run the following code in Python interactive shell

    >>>mystring = [u'\u0bb5', u'\u0ba3' u'\u0b95' u'\u0bcd' u'\u0b95' u'\u0bae' u'\u0bcd']


    This will stores all the Unicode values into the “mystring” array variable.

    And now just do the following code

    >>>print u''.join(mystring)
    வணக்கம்


    This will prints the converted Unicode Tamil characters.

    With Regards
    S. Praveen