jQuery Form Clone Plugin – Form Cloning in 6 easy steps

jquery form clone

For this tutorial, we will be using SheepIt jQuery Form Clone Plugin. We will create a form and will then add the necessary JavaScript. Here are the steps:

1. Adding jQuery Form Clone Plugin:

First of all download the sheepIt Form Clone Plugin from here . Include it in your HTML after including jQuery as follow.

After adding the plugin, we will create the form template.

2. Creating Form Template:

Form template consists of 3 main parts identified by id attribute. All these parts are wrapped inside a main div.

  1. Form Template
  2. No Form Template
  3. Form Controls

First of all create your <form> tag and add all those elements which need not to be cloned.

Now add a <div> inside that form tag. Remember, your form clone template needs to be inside the <form> tag else it will not get submitted.If the form element is wrapped in the template div then whole form will be cloned which can result in multiple form clones instead of single form with cloned elements. After creating the div, identify it by id=form_clone“.

3. Form Template

Form template will resides inside the form_clone (Our main wrapper div). It consist of a wrapper div identified by an id suffixed with _template which in our case will be form_clone_template. All the form elements which are required to be cloned will reside inside this div. After adding a single <input> tag and its <label>, your code will become like this.

On inspecting the above code, you can see multiple id’s inside the form_clone_template associated with different tags. These id’s are used by SheepIt jQuery Form Clone Plugin to index them. So that when we clone the form, the plugin will auto increment the index and will add them dynamically to the page. Let’s explain the id STUFF.

Index Format

#index# is the default index format of the plugin. When page is loaded, it will be replaced by 0 (zero) for the first row of input element and as we continue to add forms, it will get incremented and will be added anywhere where the index format is specified.

Label

Looking at the first tag viz label, we have for attribute as “form_clone_#index#_websites”. If you look at the input tag, you will find that its id follow the same pattern. With index format (#index#) inside it, the label is made sure to work only for its own input field.

Inside the <label> tag you will see an empty <span> tag. This tag is intended to show the index number as the form is cloned. E.g in our case it will be URL 1, URL 2, URL 3 and so on…

Input

Input field holds two important attributes. Id and Name. Id has already been explained. The name pattern is important. As the cloned input field will bear same name for all row, we need to submit the data to server as an array. For that array to work, we use name attribute like name=”someName[ ]” which in our case is name=”websites[#index#]”. Name of the input field followed by a square bracket will turn the field to be submitted as array. Index format inside the brackets will give a unique key to every array element and hence will prevent loss of data by input fields sharing same key. Data submitted by such input fields looks somewhat like this.

4. No Form Template:

This template is shown when there are no input fields. It can happen if the user deletes all the cloned form elements or if you ask the form clone plugin to not show any form on page load initially. It is wrapped inside a div bearing an id=”form_clone_noforms_template”. You can add any customized message inside it and can use normal HTML and CSS to decorate it. Add it after the form template.

5. Form Controls:

These are sets of controls which can be used to clone/delete any number of input fields. For Sake of simplicity, I’ll just explain 3 of them. Create a div wrapper for the controls. Give it an id=”form_clone_controls”.  Now add three tags of any type inside it. You can use either buttons or div or any other tag as long as it bears the required ids. Here is your complete form with form clone template.

Control ids are pretty self explanatory. Now as we have completed the form clone template, let’s power up the jQuery Form Clone Plugin.

6. Powering Up The Form Clone Plugin:

Just include the  following JavaScript code snippet to your page. You can add them after you include the required jQuery core file and SheepIt jQuery Form Clone Plugin.

That’s it. You can find a working DEMO HERE. Besides to avoid any error when cloning the form, follow these tips:

  1. Watch for ids very carefully as this jQuery form clone plugin is totally dependent on it
  2. Avoid mistakes in index format. e.g #index, #INDEX#, index etc are neither same nor gonna work unless you specify them.
  3. This form clone plugin clone the form after DOM has loaded. So any validation on the cloned input fields will not work unless specified after their creation.

This was just a quick and brief tutorial about sheepIt jQuery Form Clone plugin. More posts will be coming soon explaining the api and nested form techniques . So stay tuned. For any suggestion or comments please let me know by comments.

CSS3 Animated Text Field – Quick and Easy

Animating different parts of a webpage has nearly became a trend. Modern websites tend to be more responsive in sense of giving beautiful visual feedback. There are some Jquery based animated text field libraries out there, but doing it with CSS is more cooler. Specially when CSS3 offers more robust and powerful APIs.

I recently went through a CSS inspirational library of animated text field at codrops. This library is experimental but if you know that majority of your visitors are using modern web browsers, then you can rely on it. Making your text fields animated will make your next project even more eye catchy.Animated Text Field - Yoko

The Markup:

Html markup of the input field is simple. In order to make a simple text field animated, you will have to go through following modifications:

  1. Wrap your text field in <span> with class name of the desired CSS effect.
  2. Then add your <input> text field tag. Again with the a specific class name.
  3. After <input> add a <label> tag. Its is used for the animation of text field on focus.
  4. Inside the <label> add a <span> tag to decorate and position the label of the text field.

Now you are done with the HTML. A typical markup for the above GIF of YOKO animated text field will be as follow.

Be sure, that you will have to use the default HTML attributes for <input> and <label>. Like id and for.

The CSS:

There is not much to do with CSS. It is already well written with proper class names. All you have to do is to include the file in your HTML page. And then add the proper class names to <span>,<input>,<label> and again to the child <span>. Some GIF demos which I have captured are as follow along with the class names:

 1. Haruki

Animated Text Field - Haruki

  • <span>: input input–haruki
    • <input>: input__field input__field–haruki
    • <label>: input__label input__label–haruki
      • <span>: input__label-content input__label-content–haruki
2. Hoshi

Hoshi has following animation for text fields

Animated Text Field - HoshiJust replace haruki with hoshi at the end of all class names.

3. Kuro

Animated Text Field Kuro

Same as hoshi,replace with kuro

The best thing about these animated text fields is that you can easily implement them. They are easy to switch and are more dependent on CSS. Though if you are using some jQuery library like Live Search Plugins then there are chances that things can get messy.

Also, if you don’t have adequate space to accommodate the animated text field in width and height as coded by the developer then there is probability of poor readability and animations. So try to use them on roomy pages like Login Page.

You can download the library from GitHub. If you are interested in more technical details then you can read the article on the author website above. There are about 26 animated text field effects to choose from. So download the library, experiment with it, use it and let me know if it helps : )

 

Laravel Ajax 500 Internal Server error – 5+ Reasons – Quick Fix

Recently I started working on project using Laravel. I kinda started loving it. The first problem I encountered was with AJAX. I was submitting a form using Ajax. When the form was submitted, the console was logged with 500 Internal Server Error. I dig the problem.I searched the Google for few hours and then I found the solution. Following are the reasons:

Laravel ajax 500 internal server error

500 internal Server Error from Zurb

CSRF:

The  commonest reason for laravel ajax 500 internal server error is missing CSRF token. Specially in Laravel 5. In laravel 5, CSRF token is required on all forms. People usually forget submitting the token with ajax request. Submitting token-less ajax request results in Internal Server Error.

To fix missing CSRF token,  just add a hidden field in the form and BOOM!! .Here is the code for you to add to your form:

1. For Blade Template Users:

2. For non Blade Users:

3. Directly as ajax data:

That’s it, it will solve your problem most of the time. Other reasons that can give you Laravel 500 Internal Server Error problem might be:

Wrong Route:

You may be submitting ajax data to wrong route type and even wrong url (404). So first double check the path you are submitting to. Second, check whether the route accepts “Post” or “Get” data type. Because submitting post data via Get method or vice versa will results in Laravel ajax giving 500 Internal Server Error.

Data Type Returned:

If you are returning Boolean and your ajax code is set for Json or any other data type then chances are that you will stumble up on the internal server error. Try to set data type for all ajax response to json. If you are using jQuery then set dataType to xml, json, script, or html like this:

Cross Domain Configuration:

If you are using ajax for cross domain requests then be sure that you are sending proper headers. In case of jQuery, just set the crossDomain variable to true.Alternatively set dataType to “jsonp”

.htaccess

To be honest, .htaccess contributes to 80% of the web’s 500 internal server errors. Regardless of laravel and ajax. Check your .htaccess file for any error specially after you have edited it.

Syntax Error

If your php file has some error and your hosting provider has configured there servers to give 500 internal server error on all php errors. Then examine your file line by line and find the little bug troubling you.

The most important thing in fixing your error is to find the cause. If your ajax request gives you 500 internal server error then log the response to console. Alternatively, you can submit a regular form and can see the response of the files. Laravel has good error handling library and it show in details the causative agent.

If your Laravel ajax internal server error still persists, then please let me know in the comments. I will be more than happy to help

Dress Color Mystery Finally Resolved

So I have been saying that the dress is gold and blue like very few people and no one was believing. Well, eyes can be deceived but when it comes to Photoshop then i don’t think computers are color blind. I will prove that the dress is gold and blue in following steps:

1. First pick the colors from the dress in Photoshop or using any color picker tool.

I added the picture of the dress to Photoshop and first picked the color from the blue area aka white.dress-color-is-blue

If you look at the bottom of the color panel in the photo, u will see a hex code of the color. its #8693c0Now let’s get to the gold area which people think as black.

dress-color-is-gold

Now check the color is the second screenshot, showing a brownish color with a hex code of #7e6e4a. Visually, from screenshots, its proved that the dress is gold and blue now let’s prove it mathematically.

2. Comparing the color codes with that of black and white.

So you still think the dress is black and blue or gold and white. Let’s compare the color codes:

1. Color Code for black is #000000

When u want to give black color to anything in computer, your software uses the code #000000. Now if the dress was of black color then Photoshop would have given me black color code which is #000000 but it gives me brownish gold which is #7e6e4a 

2. Color Code for White is #ffffff

As said above, when u want to color something white, your software will use the color code #ffffff like this #ffffff. But using the color picker on the so called white area gave me the color code #8693c0 . This is definitely bluish or lavender Like, for your sake of convenience,  I have applied the color codes to themselves. Hence proved that majority of world needs some special glasses, specially guys like waheed sohail, iftikhar shinwari and asim ali 😀 Don’t worry no one knows them so don’t bother. Happy commenting :)

dddwdasdsaddsd

What is the real color of the dress that broke the internet?

Update:

The mystery is finally resolved. Click here to know


 

Tonight, I was setting with some idiotic friends (no offence to Waheed Sohail :P) and he showed me a dress and asked for its color. The dress probably looks Gold and blue but majority says that its either gold and white or blue and black. Well after doing some research, I found that its the angle of your screen which gives You a different color. Not sure about this? Here is the picture:

1425008415925855Now just tilt your screen and You will see the different type of color which your friends are reporting.

Taking the advantage of this, some people gave lame scientific explanations for this while other said that it is a new type of color blindness. Interesting fact is that this is just a normal dress wearing a price tag of $77 and there is nothing special in it. Its just a bad photography and the excitement of peoples which led to its virility.   Let me know if tilting the screen give u some strange color like green and orange 😀

How to store Site Configuration in Database

I am glad that after initial launch of my blog, I stumbled upon a code in my project which is worth sharing. I created function which will use database to store site configurations.

Recently, I got an email from my one of my client on whose project I am currently working. She enlisted a number of site settings which she wanted to be able to manage through the admin panel of the site. It would have been easy if it was one or two settings. But there were dozens of them. Now I had two options:

1. Create a php function which will edit php files and alter the variables in them
2. Manage it by storing the site configurations in database.

Well, I went with the second option because the first one was not feasible and will create a mess in long run. Because the php function will be utilized by pointing it to line number of the variable in a specific file. But what if another developer changes that php file and so does the line number of that variable?
So I went with the second option as follow.

1. Creation of a table in database:

Creating a table with columns named after all those settings variable was not an option because these settings are expected to expand in future and adding more columns to the table after that will not only make the table structure very big but will also effect performance as this table is expected to be queried on every page load.
So first of all, I created a table named “settings” which will store the site’s configuration in database. This table had three columns:

 

As its obvious from the table, the name field will store the name of the settings variable while the value column will store the value of that name field.

You can see that there are a number of variables and their values shown in the sample table. After this, I was put into the thought that how to retrieve a specific setting’s value from the database because there was no column for the setting named variables and using a foreach() loop and comparing the variable name with that of the retrieved data was not an option.

2. Custom Function to turn the data into array

To solve this problem, I created a function which will turn the whole data of the settings table into an array. With name as key and value as value of that key.

 

I have used simple mysql functions but its not appreciated to be used. I just used them to simplify the function. I was developing the code in Codeignitor and I used framework specific functions.

So let’s explain it. First of all, I retrieved all the data from the settings table and stored it in a variable $results. Then I created an empty array named $settings. Then I used the $results in the foreach() loop and created keys by using $key[‘name’] and then sat the value of that specific key by using $key[‘value’].

As foreach() loop reads one array at a time, so it ensured that the value of every $key[‘name’] will be set to the corresponding value from the value column of database. On completion of the loop, we had an array named $settings.

Now to simply use the settings for site configuration, I will do the following:

Using this array, you can easily use an if elseif statement to check the settings and do perform appropriate actions in your code. You can easily update the above settings using a mysql query from admin panel. Some points to be note:

  • Use Human Readable data in name and value columns.
  • Use lower case for all the stored data so that your script do not output unexpected error
  • Use Boolean values if possible

I hope that this might help you in your projects. I saw it once in WordPress. A table store the site configuration in database and use something similar to the above function to utilize that data. If you have a better idea to utilize site’s configuration stored in database, then please share it with us in your comments below. Also if you have any question you can ask, Happy commenting : )

CSS Hacks for Internet Explorer

Internet Explorer is a curse to web developers. I wonder when will Microsoft close that franchise. As a developer its always a headache to fix the CSS proprieties whether its IE5,6,7,8 or 10 and so on. A simple CSS code which will work in every other browser will refuse to show its effects when it enters the Kingdom of IE. You always have to use CSS hacks for Internet Explorer.

CSS hacks for internet explorer

Lately, I have been searching for a lot of Fixes for CSS in IE and i will like to share them all with you here.

1. Include a CSS file only for IE:

Its the most common way, include a separate CSS file in your page just for Internet Explorer. You can even specify the Version for which you want to include the CSS file.

Use this code in your HTML page, the <!–[if IE]–> makes sure that the code is loaded only when the user is using IE. If you want to load a specific CSS file for a specific version of internet explorer then use this code in the following way.

Another amazing idea is to use the IE conditional comment to add specific class to the body tag, referring to that class, you can then select any child element and add CSS properties to it in just one file.

Now after adding that to your HTML page, you can easily control the proprieties for IE as follow:

2. Hack For inline CSS or for few CSS proprieties:

Sometimes, you might want to adjust a few properties or have to adjust an inline CSS. You may not want to increase the requests to your server by creating additional CSS files. So here is the hack for writing Internet Explorer specific CSS properties without loading the a new file.

Now that CSS looks pretty ugly and will not even get validated by W3C CSS validator, it will work.But honestly speaking, Who Cares?

3. Using Media Queries as CSS Hack for Internet Explorer:

Well, I will totally do not recommend these methods because it uses flaws in internet Explorer. IE will run an invalid media query as valid while other browsers will simply discard it. Thanks to Microsoft, there are different flaws in different versions and using them, you can target specific versions of Internet Explorer. Here we Go.
Target the older Versions i.e 6 and 7

So that was about fixing the Crap created by Microsoft. No offense intended (some should be taken though). But whenever I create a wonderful site and then see it on internet explorer, I get a mini heart attack. Fixing them is sometimes like creating some parts of the site from the scratch. Using CSS hacks for internet explorer is not a good practice which we all do because there is no other way. My last wish will be to see IE closed officially. According to the stats from w3schools, which are reliable in no way but are good to make your self apparently happy, Internet explorer’s market share are going down day by day.

Browsers-market-share

If you haven’t used Internet Explorer yet which I bet You would have then don’t be so lucky and download it here.

If you have any questions or want to share your thoughts, please let me know in comments. Alternatively, ask me on twitter or Facebook.