This article explains the few basic steps to create a String program on Java NetBean and showing a background image in the frame. There are two approaches to generate this feature, one is by heavy coding, second is to simply use drag and drop actions from the Jpanel of the Jframe windows.

                           Steps to create a new Program Swing Application Project:

1. Choose a File as  ‘New Project’. This can be done alternately by clicking the New Project icon in the IDE toolbar.
2. Select the Java node in the Categories pane, and in the Projects pane choose Java application.(Click Next)
3. Enter Project Name as ProgramSwing and Specify the project location.
4. Leave the check box for Use Dedicated Folder unchecked, for Storing Libraries.
5. Make sure that the check box for set as Main Project is checked and clear the Create Main Class field.
6. Click Finish.

    The IDE Swing Application creates the ProgramSwing folder in the designated location in your system. This folder contains all of the project’s associated files, including scripts, folders for storing source and tests as well as folders for project-specific metadata. To view the project structure, use the IDE’s File window.

Creating a Jframe Container

After creating the new application, you may have noticed that the source packages folder in the projects window contains an empty <ProgramSwing Package> node. To proceed with build our interface, we need to create a java container in which we will place the other required GUI components. In this step, we create a container using the Jframe component and place the container in a new package.

The IDE Swing Application creates the ProgramSwingUI form and also creates the ProgramSwing class with in the ProgramSwingUI.java application and opens the ProgramSwingUI form in the GUI Builder.

                          The following shows how the Default package is replaced by my.ProgramSwing package:

1. In the project window, right-click on the ProgramSwing node and choose New>JFrame Form. Alternately, you will find a Jframe form by choosing New>JFrame Form.
2. Enter ProgramSwingUI as the Class Name.
3. Enter my.ProgramSwing as the package.
4. Click Finish.

How to Add the BackGround Images for Jframe

Adding the Background image is just the matter of few drags and drops. Open the Jframe windows, drag the Panel from the Palette which is located in the upper right corner to the Design area.

1. Add a Jlabel

Drag a Jlabel into the Design Area. Place it on the left of the JtextField, again look for visual cues that suggest an appropriate amount of spacing. Make sure that text base for this component is aligned with that of the JtextField. Go to the Jlable Properties, click the font option than select as Font Design, font size, bold as per your choice. Set the height and width, go to text option and write the name ‘Subscribe Us’ and select foreground color.

2. Add a JtextField

Now, Drag a JtextField from the Palette to the upper right corner of the Design Area. As you approach the upper right corner, the GUI builder provides visual cues (dashed lines) that suggest the appropriate spacing. Using these cues as a guide, drop a JtextField into the upper Right hand corner. Go to the JtextField Properties click the font option than select FontDesign, fontsize, Bold as per your choice. Set the height and width.

3. Add a Jbutton

Next, drag a Jbutton form the Palette and drop it in to the left side and underneath the JtextField. Go to the Jbutton properties select the button images, Button size, Height, Width.

4. Add an another Jlable

And last, drag a Jlabel into the Design Area. Place it to the top of the Jpanel Field, again looking for visual cues that suggest an appropriate amount of spacing. Make sure that text base for this component is aligned with that of the Jform. Go to the Navigator window and drag the all three fields. Jlable, Jtextfield, Jbutton above the last Jlable3[Jlable].

Go to the Jlable Properties and select the Icon option, open the Jlable-icon window select the External image radio button and then choose the image in ProgramSwing/Src/programSwing and select images.

Click OK, and Finish up.

Image.java source code

To view the code for creating Swing Application, which is generated automatically, click on the source option.

package programswing;

public class Image extends javax.swing.JFrame
{

/**
* Creates new form Image
*/

	public Image()
	{

		initComponents();

	}

/*** This method is called from within the constructor to initialize the form.
* WARNING: Do NOT modify this code. The content of this method is always
* regenerated by the Form Editor
*/

	@SuppressWarnings("unchecked")

// <editor-fold defaultstate="collapsed" desc="Generated Code">

	private void initComponents()
	{

		jPanel1 = new javax.swing.JPanel();
		jLabel3 = new javax.swing.JLabel();
		jTextField1 = new javax.swing.JTextField();
		jButton1 = new javax.swing.JButton();
		jLabel1 = new javax.swing.JLabel();

		setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
		setMaximumSize(new java.awt.Dimension(600, 600));
		jPanel1.setBackground(new java.awt.Color(205, 219, 232));
		jPanel1.setMinimumSize(new java.awt.Dimension(280, 280));
		jPanel1.setLayout(new org.netbeans.lib.awtextra.AbsoluteLayout());
		jLabel3.setFont(new java.awt.Font("Lucida Sans", 0, 24)); // NOI18N
		jLabel3.setForeground(java.awt.Color.white);
		jLabel3.setText("SUBSCRIBE US");
		jLabel3.setCursor(new java.awt.Cursor(java.awt.Cursor.DEFAULT_CURSOR));
		jPanel1.add(jLabel3, new org.netbeans.lib.awtextra.AbsoluteConstraints(50, 90, 180, 28));
		jPanel1.add(jTextField1, new org.netbeans.lib.awtextra.AbsoluteConstraints(40, 130, 200, 40));
		jButton1.setFont(new java.awt.Font("Ubuntu", 1, 14)); // NOI18N
		jButton1.setForeground(new java.awt.Color(59, 4, 4));
		jButton1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/programswing/buttonimg.png"))); // NOI18N
		jButton1.setMaximumSize(new java.awt.Dimension(64, 64));
		jButton1.setMinimumSize(new java.awt.Dimension(32, 32));
		jButton1.addActionListener(new java.awt.event.ActionListener()
		{
			public void actionPerformed(java.awt.event.ActionEvent evt) 
			{
				jButton1ActionPerformed(evt);
			}
		});

		jPanel1.add(jButton1, new org.netbeans.lib.awtextra.AbsoluteConstraints(250, 20, 50, 50));
		jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/programswing/1606264.jpg"))); // NOI18N
		jPanel1.add(jLabel1, new org.netbeans.lib.awtextra.AbsoluteConstraints(-10, -10, 330, 260));
		javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
		getContentPane().setLayout(layout);
		layout.setHorizontalGroup(
			layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
			.addComponent(jPanel1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
		);

		layout.setVerticalGroup(
			layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
			.addComponent(jPanel1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
		);

		pack();
	}
	// </editor-fold>

	private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
		// TODO add your handling code here:
	}

	/**
	* @param args the command line arguments
	*/

	public static void main(String args[])
	{
		/* Set the Nimbus look and feel 
		*/

		//<editor-fold defaultstate="collapsed" desc=" Look and feel setting code (optional) ">

		/* If Nimbus (introduced in Java SE 6) is not available, stay with the default look and feel.
		* For details see http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html
		*/

		try{

			for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) {
				if ("Nimbus".equals(info.getName())) {
					javax.swing.UIManager.setLookAndFeel(info.getClassName());
					break;
				}
			}
		} 
		catch (ClassNotFoundException ex) {
			java.util.logging.Logger.getLogger(Image.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
		} 
		catch (InstantiationException ex) {
			java.util.logging.Logger.getLogger(Image.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
		}
	 	catch (IllegalAccessException ex) {
			java.util.logging.Logger.getLogger(Image.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
		} 
		catch (javax.swing.UnsupportedLookAndFeelException ex) {
			java.util.logging.Logger.getLogger(Image.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
		}

		//</editor-fold>
		/* Create and display the form 
		*/

		java.awt.EventQueue.invokeLater(new Runnable() {
			public void run() {
				new Image().setVisible(true);
			}
		});
	}

	// Variables declaration - do not modify

	private javax.swing.JButton jButton1;
	private javax.swing.JLabel jLabel1;
	private javax.swing.JLabel jLabel3;
	private javax.swing.JPanel jPanel1;
	private javax.swing.JTextField jTextField1;

	// End of variables declaration
}

Show the output box message:BUILD SUCCESSFUL(total time: 0 seconds)

Press Shift+F6 to run the programSwing.java

Do subscribe to our newsletter if you think this tutorial was worth your time. Please share, and happy reading.

Cheers!

FOR MORE AWESOME TUTORIALS:

The post How To Create A Swing Application Using NetBeans Swing Builder appeared first on Webmuch.

So, take a look at how we customize a file upload button.
Here, we are creating a new file upload button on image icon which behaves consistently in pure “css cross browser”.
 
And here we begin with:

Step 1: index.html

The only HTML5 feature is the “multiple” attribute which allows the user to select any number of files.

The HTML markup is pretty simple, we just want to create a button which can be placed anywhere in the form:

<div class="fileUpload">
<span class="custom-span">+</span>
<p class="custom-para">Add Images</p>
<input id="uploadBtn" type="file" class="upload" />
</div>
<input id="uploadFile" placeholder="0 files selected" disabled="disabled" />

In the code above, at first we make two input tags with id. One of them will be “uploadBtn” which is used to upload the file, and other will be “uploadFile” which is actually used to display the name of the image being uploaded.

Step 2: CSS included

While we are in the CSS, let’s just style our custom file upload button:

.fileUpload {
	position: relative;
	overflow: hidden;
	margin: 10px;
	background-color: #BDBDBD;
	height: 200px;
	width: 200px;
	text-align: center;
}
.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	height: 100%;
	text-align: center;
}
.custom-span{ font-family: Arial; font-weight: bold;font-size: 100px; color: #FE57A1}
#uploadFile{border: none;margin-left: 10px; width: 200px;}
.custom-para{font-family: arial;font-weight: bold;font-size: 24px; color:#585858;}

Now, you can use any type of a styling without worrying how to change default styles. In the CSS part, we need to define the dimensions-width and height-of the button as well as background and style the button text. In the above code, we have to used a class named “fileUpload” which actually sets the position of the “div” to “relative” (means it’ll work within the entire div section and not at the position where the file upload tag is used ). So, use this one to build your custom file upload button.

Step 3: Javascript

<script type="text/javascript">
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
</script>

Using this script, we display the name of the images being uploaded by user in the textbox. Make sure you add the appropriate javascript in with the button to make it call the function.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our newsletter. Do share the tutorial if you think it’s worth it.

Happy Reading!

FOR MORE AWESOME TUTORIALS:

The post How To Customize A File Upload Button Using CSS3, HTML5 and Javascript appeared first on Webmuch.

It isn’t a hard job to add Symfony2 Captcha to the login panel.

Adding Symfony2 Captcha To A Login Panel

FOSUserBundle is concerned with user management and user security. It is not able to differentiate between a human and a robot and to put  this functionality in our “Symfony” application we have to add Symfony2 captcha in FOS Bundle’s login and registration page. Adding Symfony2 captcha in registration is easy, as we can add it simply in the “RegistrationType” file of FOSUserBundle but adding Symfony2 captcha in a login page is not as simple as on the registration page.

To go further, follow the steps below:

• Download the CodeConsortium Bundle
  This is a private messaging system Bundle for Symfony projects for sending and receiving private messages.
• Add the Bundle in your project by adding the following code in the Appkernel.php file.

Webmuch/Acme/App/Appkernel.php :
“new CCDNUser\SecurityBundle\CCDNUserSecurityBundle(),”

• Add the following configuration in your config.yml file.

Webmuch/Acme/Config/Config.yml :
ccdn_user_security:
route_referer:
route_ignore_list:
- { bundle: 'fosuserbundle', route: 'fos_user_security_login' }
- { bundle: 'fosuserbundle', route: 'fos_user_security_check' }
- { bundle: 'fosuserbundle', route: 'fos_user_security_logout' }
- { bundle: 'fosuserbundle', route: 'fos_user_registration_register' }
- { bundle: 'fosuserbundle', route: 'fos_user_registration_check_email' }
- { bundle: 'fosuserbundle', route: 'fos_user_registration_confirm' }
- { bundle: 'fosuserbundle', route: 'fos_user_registration_confirmed' }
- { bundle: 'fosuserbundle', route: 'fos_user_resetting_request' }
- { bundle: 'fosuserbundle', route: 'fos_user_resetting_send_email' }
- { bundle: 'fosuserbundle', route: 'fos_user_resetting_check_email' }
- { bundle: 'fosuserbundle', route: 'fos_user_resetting_reset' }
- { bundle: 'fosuserbundle', route: 'fos_user_change_password' }
- { bundle: 'UserBundle', route: 'fos_user_captcha_login' }
- { bundle: 'UserBundle', route: 'fos_user_captcha_login_check' }
login_shield:
enable_shield: true
block_for_minutes: 5
limit_failed_login_attempts:
before_recover_account: 3
before_return_http_500: 25
primary_login_route:
name: fos_user_security_login
recover_account_route:
name: fos_user_captcha_login
block_routes_when_denied:
- fos_user_security_login
- fos_user_security_check
- fos_user_security_logout

Below you’ll find the Pseudocode for the code above.

The code below will cause the captcha image to be inserted on the login page if the first two attempts of login fail.

before_recover_account: 3:

This code below will cause the user to be blocked if it fails to login for 25 times in a row.

before_return_http_500: 25

The primary login route is defined for the default login page of the FOS UserBundle.
The secondary or recover route is defined for the new login page including captcha which will be build later.

primary_login_route:
name: fos_user_security_login
recover_account_route:
name: fos_user_captcha_login

All the statements below will cause the login, logout and email check functionalities to be blocked if the user is not able to login.

block_routes_when_denied:
- fos_user_security_login
- fos_user_security_check
- fos_user_security_logout

• After setting all the configurations properly, the forth step is to create “usercaptchalogin” which will be built inside the UserController.php file :

Webmuch/UserBundle/Controller/UserController

For this, we need to import the following statements on the top of the file “UserController.php” :

use Gregwar\Captcha\CaptchaBuilder;
use Symfony\Component\Security\Core\Authentication\Token\UsernamePasswordToken;
use Symfony\Component\Security\Http\Event\InteractiveLoginEvent;

. use Gregwar\Captcha\CaptchaBuilder;

All of the code above is to build the Captcha image dynamically on the login page and to authenticate the user credentials on the basis of username and password and for the interaction of user with various events.

Now, we define the following function inside the controller for creating the “usercaptchalogin” which will build the login page including Symfony2 captcha:

public function fosUserCaptchaLoginAction(){
$builtCaptcha = new CaptchaBuilder();
$builtCaptcha->build();
$builtCaptcha->save('captcha.jpg');
return $this-
>render('UserBundle:CustomizedSecurity:fosUserCaptchaLogin.html.twig',array
('captcha' => $builtCaptcha)) }

The code above is explained well in the steps below:

1. The first statement will build a Symfony2 captcha image using the function CaptchaBuilder()
2. The next two statements will save the build image inside the variable “builtCaptcha” in a jpg format.
3. This image will then be rendered to CaptchaLogin.html.twig file which will be created later.

We define another function inside the controller which will check or validate the value of Symfony2 captcha inserted :

public function fosUserCaptchaLoginCheckAction($builtCaptcha){
$em = $this->getDoctrine()->getEntityManager();
$username = $this->getRequest()->get('_username');
$password = $this->getRequest()->get('_password');
$captcha = $this->getRequest()->get('_captcha');
$email = $this->getRequest()->get('email');
$session = $this->get('session');
$result = $em->getRepository('UserBundle:User')->findOneBy(array('email' => $username));
if(!$result){
$this->get('session')->getFlashBag()->add('error','Username is wrong');
return $this->redirect($this->generateUrl('fos_user_captcha_login'));
}
if (isset($result)) {
$encoder_service = $this->get('security.encoder_factory');
$encoder = $encoder_service->getEncoder($result);
$encoded_pass = $encoder->encodePassword($password, $result->getSalt());
if($result->getPassword() !== $encoded_pass){
$this->get('session')->getFlashBag()->add('error','Password is wrong');
return $this->redirect($this->generateUrl('fos_user_captcha_login'));
}else{
if($builtCaptcha !== $captcha){
$this->get('session')->getFlashBag()->add('error','Captcha code is wrong');
return $this->redirect($this->generateUrl('fos_user_captcha_login'));
}else{
$firewall = "user_secured_area";
$token = new UsernamePasswordToken($result,$password, $firewall, $result- >getRoles());
$this->get('security.context')->setToken($token);
$session = $this->get('session');
$session->set('_security_'.$firewall,serialize($token));
$event = new InteractiveLoginEvent($this->getRequest(), $token);
$this->get("event_dispatcher")->dispatch("security.interactive_login", $event);
$router = $this->get('router');
$url = $router->generate('video');
return $this->redirect($url);
}
}
}
$this->get('session')->getFlashBag()->add('error','Your entered value is wrong');
return $this->redirect($this->generateUrl('fos_user_captcha_login'));
}

The steps for the above mentioned code can be explained below:

1. First we will get the values of various fields such as email, username, password and Symfony2 captcha.
2. After storing these values inside the result variable we will check for the username and if the username doesn’t match, the user will be renedred to the fos_user_captcha_login’.
3. If the values of username matches then it will proceed further to validate the password and the same will be done for validating Symfony2 captcha.

The entire code of the UserController.php is given as follows :

get('fos_facebook.user.login');
//todo: check if service is successfully connected.
$fbService->connectExistingAccount();
return $this->redirect($this->generateUrl('sonata_user_profile_visit'));
}
public function loginFbAction(){
return $this->redirect($this->generateUrl("fos_user_security_login"));
}
public function logoutFbAction(){
return $this->redirect($this->generateUrl("fos_user_security_logout"));
}
private function getToken(){
return new Response($this->container->get('form.csrf_provider')
->generateCsrfToken('authenticate'));
}
public function fosUserCaptchaLoginAction(){
$builtCaptcha = new CaptchaBuilder();
$builtCaptcha->build();
$builtCaptcha->save('captcha.jpg');
return $this- >render('UserBundle:CustomizedSecurity:fosUserCaptchaLogin.html.twig',array('captcha' => $builtCaptcha));
}
public function fosUserCaptchaLoginCheckAction($builtCaptcha){
$em = $this->getDoctrine()->getEntityManager();
$username = $this->getRequest()->get('_username');
$password = $this->getRequest()->get('_password');
$captcha = $this->getRequest()->get('_captcha');
$email = $this->getRequest()->get('email');
$session = $this->get('session');
$result = $em->getRepository('UserBundle:User')->findOneBy(array('email' => $username));
if(!$result){
$this->get('session')->getFlashBag()->add('error','Username is wrong');
return $this->redirect($this->generateUrl('fos_user_captcha_login'));
}
if (isset($result)) {
$encoder_service = $this->get('security.encoder_factory');
$encoder = $encoder_service->getEncoder($result);
$encoded_pass = $encoder->encodePassword($password, $result->getSalt());
if($result->getPassword() !== $encoded_pass){
$this->get('session')->getFlashBag()->add('error','Password is wrong');
return $this->redirect($this->generateUrl('fos_user_captcha_login'));
}else{
if($builtCaptcha !== $captcha){
$this->get('session')->getFlashBag()->add('error','Captcha code is wrong');
return $this->redirect($this->generateUrl('fos_user_captcha_login'));
}else{
$firewall = "user_secured_area";
$token = new UsernamePasswordToken($result,$password, $firewall, $result- >getRoles());
$this->get('security.context')->setToken($token);
$session = $this->get('session');
$session->set('_security_'.$firewall,serialize($token));
$event = new InteractiveLoginEvent($this->getRequest(), $token);
$this->get("event_dispatcher")->dispatch("security.interactive_login", $event);
$router = $this->get('router');
$url = $router->generate('video');
return $this->redirect($url);
}
}
}
$this->get('session')->getFlashBag()->add('error','Your entered value is wrong');
return $this->redirect($this->generateUrl('fos_user_captcha_login'));
}
public function emailAuthenticateAction(Request $request, $token){
$em = $this->getDoctrine()->getEntityManager();
$user = $em->getRepository('UserBundle:User')->findOneBy(array('token' => $token));
if(isset($user)) {
if($user->isEnabled() == false) {
// Enabling The Account
$user->setEnabled(true);
$user->setToken(null);
$em->persist($user);
$em->flush();
$this->authenticateUser($user);
$this->get('session')->getFlashBag()->add('success','Congratulation you are authenticated member of Candulife Style.');
return $this->redirect($this->generateUrl('home'));
}
}
$this->get('session')->getFlashBag()->add('error','This link is invalid or has been already used');
return $this->redirect($this->generateUrl('home'));
}
private function authenticateUser(UserInterface $user){
$provideKey = 'user_secured_area';
$token = new UsernamePasswordToken($user,$user->getPassword(),$provideKey,$user->getRoles());
$this->get('security.context')->setToken($token);
}
private function generateToken(){
$key = '#}~*$/"$?&*(."*/[!%]/${"/}';
$unique = uniqid();
return $token = $unique.substr(hash('sha512',$unique.$key.microtime()), 0, 19);
}
}

• Fifth Step is to create “usercaptchalogin”  and then we will create “fosUserCaptchaLogin.html.twig” file where the user will be rendered for login purpose inside which captcha will be introduced after login will be failed two times continously.

The code for the same is given as follows :

UserBundle/Resources/Views/Email/fosUserCaptchaLogin.html.twig :

{% extends "::base1.html.twig" %}

{% block userProfile %}
<h2 class="gradWellHead">Login here {# count #}</h2>
<div class="row-fluid marginBottom10">
<div class="span6 well"><form action="{{ path(" method="post" novalidate="" data-validate="parsley">
<div class="control-group">

<label class="control-label" for="username">Username</label>
<div class="controls"><input name="_username" required="required" type="text" placeholder="Username" data-error-message="Enter your Username" data-required="true" /></div>
</div>
<div class="control-group">

<label class="control-label" for="password">Password</label>
<div class="controls"><input name="_password" required="required" type="password" placeholder="Password" data-error-message="Enter the Password" data-required="true" /></div>
</div>
<div class="control-group">

<label class="control-label" for="captcha">Captcha</label>
<div class="controls"><img src="{{ asset('captcha.jpg') }}" alt="" />
<input name="_captcha" required="required" type="text" placeholder="Captcha" data-error-message="Enter the Captcha code" data-required="true" /></div>
</div>
<div class="control-group">
<div class="controls"><label class="checkbox">
<input id="remember_me" name="_remember_me" type="checkbox" value="on" />{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}
</label>
<input id="_submit" class="btn" name="_submit" type="submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
<a href="{{ path('fos_user_resetting_request') }}">Forget Password ?</a>
{{ facebook_login_button({'autologoutlink': true}) }}</div>
</div>
</form></div>
<div class="span6 well"><img src="{{asset('img/candu_manifesto_starburst.jpg')}}" alt="" /></div>
</div>
{% endblock %}

I got my Symfony2 Captcha correct, hope you get yours too.

Feel free to comment for any queries or doubts. Do subscribe to our newsletter if you appreciate the tutorial.

FOR MORE AWESOME TUTORIALS:

The post How To Insert Symfony2 Captcha To Login Page In FOSUserBundle appeared first on Webmuch.

The  Twitter Bootstrap 3 framework is an awesome and  powerful tool to develop frontend user interfaces for web applications.  Twitter Bootstrap 3 is a simple and flexible HTML, CSS, JavaScript and jQuery plugins framework for popular user interface components. Bootstrap makes it easy to create good-looking web pages and web-apps, plus it has a ‘responsive grid’ built-in automatically to make designs compatible with mobile browsers (both tablets and smartphones).

A couple weeks  ago the developers of Bootstrap made a major update moving from 2.3.2 to version 3.32

Twitter Bootstrap 3 has major changes from all it’s past versions. It is a mobile-first framework  and makes your site “always responsive” by default, whatever you design or create will be mobile compatible or responsive.

Twitter Bootstrap 3 is one of the best CSS frameworks for building responsive website designs..

So now, take a look at the major difference between Bootstrap 2 vs Twitter Bootstrap 3.

Bootstrap 2
Span method is used to create columns.
It does not support mobile-first.
Container and Container-fluid class are used.
Bootstrap 2 meta tag:<meta name=”viewport” content =”width =device-width,initial-scale=1.0″>

Twitter Bootstrap 3
Col method is used to create columns.
It support mobile first framework.
They used container class.
Bootstrap 3 meta tag :<meta name =”viewport” content=width=device-width, initial- scale= “1.0”>

Note
If we want to update the legacy bootstrap build to  Twitter Bootstrap 3, we need to change the HTML code from span to col (columns) methodology. And for updating the legacy bootstrap build, we are going to update it as per “mobile first framework” by using bootstrap 3 mobile class (xs and sm).

Different versions of Ajax Library are used to enable the jQuery functionality in Bootstrap

***Ajax library update for bootstrap 2:

JQuery v1.7.1 jquery.co

Ajax library update for bootstrap 3: 

JQuery v1.9.0+ jquery.com (see: #2245299: minimum jQuery version is 1.9.0 for Bootstrap 3.1.1)

Note
The project page should be updated to point users to find the current minimum version of jQuery needed for the latest Bootstrap.

In legacy bootstrap 2, we use live or delegate method, and then we change the method to “ON” because after jQuery 1.9.1 the ‘live’ or” delegate” method is deprecated by “ON’ method.

GLYPHICONS

“Glyphicons ” is a library of properly prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.

So, now these are the certain changes that have been made in the Glyphicons

In bootstrap 2, you have 140 icon glyphs in spirit form, available in dark gray (default) and white provided by Glyphicons.

In order to upgrade Bootstrap build you have to change the “glyphicon”. While the Twitter Bootstrap 3 has included 260 glyphs in font format from the Glyphicon Halfing Set.

For running Bootstrap website in IE

<!–[if lt IE 8]>

<link href=”css/bootstrap-ie7fix.min.css” rel=”stylesheet”>

<![endif]–>

Updating process:

1. Adding bootstrap-responsive.css in your application.
2. Twitter Bootstrap 3: The .container & .row classes are now fluid by default, so it does not use -row fluid or container fluid anymore in your 3x. markup.

Grid Migration

How to convert from a 2.x to 3.0 grid without any responsive changes.

• replace .container-fluidwith .container.
• replace .row-fluidwith .row.
• replace .span*with .col-md-*

While the Twitter Bootstrap 3 large grid (.col-md) are similar to the 2.x (span) grid, non form containers do not utilise the new responsive improvements in Bootstrap 3. If you want to “get more responsive” use the col-xs (tiny),col sm-(small) and col-lg(large) classes for better scaling on smartphones and tablets. Now you can use 3 different grid sizes, to exclude the vertical stack on smaller sizes.

Navbar Migration

How to convert from a 2.x to 3.0 navbar

• remove .navbar-inner
• replace .brandwith .navbar-brand
• wrap .navbar-brandand .navbar-toggle inside .navbar-header
• add .navbar-navto .nav

So there are also some changes in Navbar migration. The “.brand” is replacing with the “navbar-brand”. It is used to define the links.

Modal Migration

How to convert from a 2.x to 3.0 modal

• remove.hide from the .modal (it’s now hidden by default)
• wrap.modal-header .modal-body .modal-footer inside .modal-content
• wrap.modal-content inside .modal-dialog

Twitter Bootstrap 3 Migration Guide

You can use this block as a general migration guide to upgrading from v2.x to v3.0.

Major CSS Class Changes

A consistent design in  Twitter Bootstrap 3 is the use of “base” CSS class names that provide a default for elements. The following  table shows the CSS style changes between v2.x and v3.0.

You can see the above table, “container-fluid ” and “row-fluid”  classes are now container and row. There is no more “span”. There is now base column unit named “col-md” that is sized using “col-lg-“. So instead of span2, you’d now use col-lg-2. This also works for offsets, so offset is now col- md-offset and so on.
 

The elements in  Twitter bootstrap 3 which are removed by bootstrap 2

Below are those elements which have been released or changed in v3. For example, hero unit is removed from 2.x and added in 3.0 with its new name called jumbotron.

 Twitter bootstrap 3 Additional Information

• Notes & Caveats
• .input-*are 100% width. Wrap inputs inside <div class=’col-md-*’></div> to control input widths.
• .badgeno longer has contextual (-success,-primary,etc..) classes
• .btnmust also use .btn-default to get the ‘default’ button
• .containerand .row are now fluid (percentage-based)
• Images are not responsive by default. Use.img-responsive for fluid IMG size
• Include.glyphicon base class in all icons (ie: .glyphicon .glyphicon-asterisk).

For updating to Twitter Bootstrap 3 and running a responsive website successfully in IE, we need to add the “Respond.js” to enable media query.

Major CSS Changes

Lightweight

Unlike version 2, all the icons are now contained in a separate CSS file. The CSS has been increased for performance as its size is approx 79kb. In CSS terms, the new Twitter Bootstrap 3 allows for easier customization by improving on inheritance and specificity. We don’t need to understand the fore mentioned, but realise that Twitter Bootstrap 3 does require more mark up in our HTML. In the end, it will means less customisation and CSS overrides to achieve what we want. Also, all the CSS classes for Twitter Bootstrap 3 are included in a single file.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our newsletter. Do share the tutorial if you think it’s worth it.

Cheers!

MORE AWESOME TUTORIALS

The post How To Upgrade Bootstrap 2 To Twitter Bootstrap 3 Build appeared first on Webmuch.

The above explained feature of Symfony2 was used to create dynamic generation & removal of specific form fields through collections for one of our client’s projection. In Symfony2 Collection Form, you must specify the type of the field and notify the form that it is the collection of the particular field.

This is done when you want to customize the Collection Form to the particular data that was submitted by the user.

There is a requirement that on selecting a particular category form (add products) button, the list of all subcategories defined in the category should be displayed. So that the user can select one or multiple subcategory(s) form list of a particular category. Doctrine2 helps generate model classes from already existing databases.

One category can be mapped with many subcategories. For the form registration, the user can select as many categories and its corresponding subcategories.

For using Doctrine2 ORM, you’ll need to add the Doctrine2 metadata like using the One-To-Many relationship annotation, many subcategories can be mapped into one category. The user selects his choice of category and hence, it’s subcategories while filling up the form.

Yeah! EAV Model can be quite confusing, but it’s not that hard. You’ll get it right!

Concept:

First of all, we created three entities namely TrademarkQuestionnaire, Category, Subcategory. Here “TrademarkQuestionnaire”  -> “Entity”, “Category” ->  “Attribute”  and “SubCategory” -> “Value”.

We create a Category.php and SubCategory.php. Category and SubCategory has one-to-many relationship. Then we combine both of these Category and SubCategory in another entity class called CategorySubCategory.php. In this CategorySubCategory class Category and CategorySubCategory is mapped by one-to-many bidirectional relationship and CategorySubCategory and SubCategory class has one-to-many bidirectional relationship. Now in our main Entity class Trademarkquesionnaire.php we map Trademarkquesionnaire class with combined class entity CategorySubCategory class with many-to-many bidirectional relationship. Thus, we are able to embed EAV system using Symfony2 Collection Form.

Description

Entities

Steps for creating the category entity and mapping of different fields of this entity with others:

Create a category entity as follows: Category.php

1. We declared field such as name in this class.
2. Further we did the mapping of this entity with another entity SubCategory in one-to -many relationship.
3. Again, we did the mapping of this entity with another entity named as CategorySubCategories in one-to-many relationship.
4. This entity is further mapped with another entity Trademarkquesionnaire in many-to-one relationship.
5. We define two function _toString() and _construct() for converting object into string and to initialize the components respectively.

/*** @var string
** @ORM\Column(name="name", type="string", length=255)
*/
private $name;

/**
** @ORM\OneToMany(targetEntity="Subcategory", mappedBy="category", cascade={"persist", "remove"})
**/

private $subcategory;

/**
* @ORM\OneToMany(targetEntity="Webmuch\TrademarkBundle\Entity\CategorySubCategory", mappedBy="category")
**/
private $categorySubCategories;

/**
* @ORM\ManyToMany(targetEntity="Webmuch\TrademarkBundle\Entity\TrademarkQuestionnaire", mappedBy="categories")
**/

private $trademarks;public function __toString(){return (string)$this->name;}

/**
* Constructor
*/

public function __construct(){

	$this->subcategory = new ArrayCollection();

}

We then generated the getter and setter method for the above fields by running the given commands on the Symfony2 console:

$ php app/console doctrine:generate:entities /webmuch/trademarkBundle/Entity/Category
$ php app/console doctrine:schema:update --force

Create the subcategory entity as follows: Subcategory.php.

1. We declared the field ‘productName’ which is of type string.
2. Then we map the SubCategory entity with the previously created entity category in many-to-one relationship.
3. SubCategory entity is further mapped with CategorySubCategories entity in many-to-many relationship.
4. We define  function _toString() function to convert objects into string.

   /**
   * @var string** @ORM\Column(name="productName", type="string", length=255)
   */
   private $productName;
   
   /**
   * @ORM\ManyToOne(targetEntity="Category", inversedBy="subcategory")
   * @ORM\JoinColumn(name="category_id", referencedColumnName="id")
   **/
   private $category;
   
   /**
   * @ORM\ManyToMany(targetEntity="Webmuch\TrademarkBundle\Entity\CategorySubCategory", mappedBy="subCategories")
   **/
   private $categorySubCategories;
   
   public function __toString(){
   	return (String)$this->productName;
   }

5. Now generate the get() and set() methods for the above defined fields by compiling the following commands

   $ php app/console doctrine:generate:entities /webmuch/TrademarkBundle/Entity/SubCategory
   $ php app/console doctrine:schema:update --force

    

Create the subcategory entity as follows: CategorySubCategory.php

First, we map this entity with category entity in many-to-one relationship. Again, we map this entity with subcategories entity in many-to-many relationship. This particular entity is mapped again with Trademarkquesionnaire entity in many-to-many relationship. Now,define the two function _toString() function to convert objects into string .

/**
* @ORM\ManyToOne(targetEntity="Webmuch\TrademarkBundle\Entity\Category", inversedBy="categorySubCategories")
* @ORM\JoinColumn(name="category_id", referencedColumnName="id")
**/
private $category;

/**
* @ORM\ManyToMany(targetEntity="Webmuch\TrademarkBundle\Entity\Subcategory", inversedBy="categorySubCategories",cascade={"persist"})
* @ORM\JoinTable(name="categorySubCategories_subcategories")
**/
private $subCategories;

/**
* @ORM\ManyToMany(targetEntity="Webmuch\TrademarkBundle\Entity\TrademarkQuestionnaire", mappedBy="categorySubCategories")
**/
private $trademarks;

public function __toString(){
    return (String)$this->id;
}

//Here we generate the get() and set() methods for the above define field by running the following commands on console.

$ php app/console doctrine:generate:entities /webmuch/TrademarkBundle/Entity/ CategorySubCategory
$ php app/console doctrine:schema:update –force

Create the subcategory entity as follows: trademarkQuestionnaire.php

We map the Trademarkquestionnaire entity with another entity CategorySubategory in many-to-many relationship. We define two function _toString() function to convert objects into string.

After defining the functions we generated the get() and set() methods for the above defined field by running the following commands on console.

Symfony2 Collection Form is to manage a group of similar items. In this file various actions were created through CRUD generation among which we modified the CreateAction() and UpdateAction() methods.

/**
* @ORM\ManyToMany(targetEntity="Webmuch\TrademarkBundle\Entity\CategorySubCategory", inversedBy="trademarks", cascade={ "persist", "remove" })
* @ORM\JoinTable(name="trademarks_categorySubCategories")
**/
private $categorySubCategories;

Both the methods, before final submissions of data, the Subcategory entity’s fields were called to enter the values of subcategory for each category. As we have done one to many mapping of category entity with subcategory entity.

$ php app/console doctrine:generate:entities /webmuch/TrademarkBundle/Entity/TrademarkQuestionnaire

$ php app/console doctrine:schema:update --force

Forms

1. CategoryType.php
   We import the following statement on the top of file to inherit SubcategoryType form in this file

   use Webmuch\TrademarkBundle\Form\SubcategoryType;
   
       ->add('subcategory','collection',array('type' => new SubcategoryType(),
        'allow_add' => true,
        'allow_delete' => true,
        'options' => array('label' => false),
        ))

   In build form function we add collection of subcategory and allow the add and delete functionality to be true, which is by default false.

2. SubcategoryType.php

   SubcategoryType.php->add('productName')

    

3. CategorySubCategoryType.php
   It is the most important part of the blog, because it is the actual form by which we are able to combine the Category(attribute) and SubCategory(value) in  Trademarkquesionnaire(entity) form where we select a category(attribute), the relevant subcategories(values) are displayed.
   First we import the following statement on top of the file to use the fields of subcategory entity. In bulidform function we add two EventListners for PRE_SET_DATA and PRE_SUBMIT . We define two functions onPreSubmit() and onPreSetData() to get the values to be stored for different categories and subcategories. Also, we define a function Addelements() to various subcategories to single category.
   This function also arrange various subcategories into ascending order.
   

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;
use Symfony\Component\Form\FormEvent;
use Symfony\Component\Form\FormEvents;
use Symfony\Component\Form\FormInterface;

use Webmuch\TrademarkBundleBundle\Entity\Category;
use Webmuch\TrademarkBundle\Entity\SubCategory;

public function buildForm(FormBuilderInterface $builder, array $options)
{
	$builder->addEventListener(FormEvents::PRE_SET_DATA, array($this, 'onPreSetData'));
	$builder->addEventListener(FormEvents::PRE_SUBMIT, array($this, 'onPreSubmit'));
}

protected function addElements(FormInterface $form, Category $category = null) {
	$em = $this->getEntityManager();
	
	// Add the Category element
	$form->add('Category', 'entity', array(
		'data' => $category,
		'empty_value' => '-- Select a Category first --',
		'class' => 'WebmuchTrademarkBundle:Category',
		'mapped' => true)
	);

	// SubCategorys are empty, unless we actually supplied a Category
	$subCagories = array();
	if ($category) {
		// Fetch the SubCategorys from specified Category
		$repo = $em->getRepository('WebmuchTrademarkBundle:SubCategory');
		$subCagories = $repo->findByCategory($category, array('productName' => 'asc'));
	}

	// Add the SubCategorys element
	$form->add('subCategories', 'entity', array(
		'empty_value' => '-- Select a Category first --',
		'class' => 'WebmuchTrademarkBundle:SubCategory',
		'choices' => $subCagories,
		'multiple' => true,
	));
}

function onPreSubmit(FormEvent $event) {
	$em = $this->getEntityManager();
	$form = $event->getForm();
	$data = $event->getData();

	// Note that the data is not yet hydrated into the entity.
	if(isset($data['Category'])){
	$category = $em->getRepository('WebmuchTrademarkBundle:Category')->find($data['Category']);
	$this->addElements($form, $category);
	}
}

function onPreSetData(FormEvent $event) {
	$em = $this->getEntityManager();
	$data = $event->getData();
	if($data instanceof \Webmuch\TrademarkBundle\Entity\CategorySubCategory ) {
	$category = $data->getCategory(); 
	}
	else { 
		$category = $event->getData();
	}
	$this->addElements($event->getForm(), $category); 
}

Then after we will have to manage to make a system such that after selecting a category, the relevant subcategories are displayed. This can be achieved by writing the Ajax function and passing the Ajax url to the controller method.

We have need to create a controller method to fetch the subcategories by category in AJAX call .

/**
* Displays a form to create a ajaxCall Product entity.
*
* @Route("/subCategoriesAjaxCall", name="category_subCategories_ajax_call")
* @Method("GET")
* @Template()
*/

public function ajaxAction(Request $request) {

/*if (! $request->isXmlHttpRequest()) {
    throw new NotFoundHttpException();
}*/

$em = $this->getDoctrine()->getManager();

// Get the province ID

$id = $request->query->get('category');
$category = $em->getRepository("WebmuchTrademarkBundle:Category")->findOneBy(array('id' => $id));
$result = array();

// Return a list of vendors, based on the selected province

$repo = $em->getRepository('WebmuchTrademarkBundle:SubCategory');
$subCategories = $repo->findBy(array('category' => $category));

// Fetching the title of each feature values

foreach ($subCategories as $subCategory) {
$result[$subCategory->getProductName()] = $subCategory->getId();
}

//print_r($vendors);die();
return new JsonResponse($result);
}
}

4. TrademarkQuestionnaireType.php
   In these form type, we import the following statement on the top of file. In bulidform() function, we add Collection Form of categorySubCategory so that the User can select many Subcategory for a single Category.

use Webmuch\TrademarkBundle\Form\CategorySubCategoryType;
->add('categorySubCategories','collection',array(
    'type' => new CategorySubCategoryType(),
    'allow_add' => true,
    'allow_delete' => true,
))

Controller

After creating the above mentioned entities we write the controllers of these entities.

$php app/console doctrine:generate:crud

1. CategoryController.php

In this Controller we have to import the following statement on the top of the file :

use Doctrine\Common\Collections\ArrayCollection;

// create action
public function Create Action(Request $request){
	if ($form->isValid()) {
			$subcategories = $form->getData()->getSubCategory();
			$em = $this->getDoctrine()->getManager();
			foreach($subcategories as $subcategory){
				$subcategory->setCategory($entity);
		}

	$em->persist($entity);
	$em->flush();
	return $this->redirect($this->generateUrl('category_show', array('id' => $entity->getId(       ))));
    }
}
// Update Action
public function updateAction(Request $request, $id)
{
	$em = $this->getDoctrine()->getManager();
	$entity = $em->getRepository('WebmuchTrademarkBundle:Category')->find($id);
	$originalSubCategories = new ArrayCollection();
	foreach($entity->getSubCategory() as $subcategory){
		$originalSubCategories->add($subcategory);
	}
	
	if (!$entity) {
		throw $this->createNotFoundException('Unable to find Category entity.');
	}

	$deleteForm = $this->createDeleteForm($id);
	$editForm = $this->createEditForm($entity);
	$editForm->handleRequest($request);
	if($editForm->isValid()){
		foreach ($originalSubCategories as $subcategory) {
			if (false === $entity->getSubCategory()->contains($subcategory)) {
				$em->remove($subcategory);
			}
		}

	$subcategories = $editForm->getData()->getSubCategory();
	$em = $this->getDoctrine()->getManager();
	foreach($subcategories as $subcategory){
	$subcategory->setCategory($entity);

	$em->persist($subcategory);
	$em->flush();
	}

	$em->persist($entity);
	$em->flush();

	return $this->redirect($this->generateUrl('category_edit', array('id' => $id)));
}

HTML TWIG FILES

1. Category

//index.html.twig (No modifications were made to the default code)

//new.html.twig

We called a class of type subcategory.
Created a Subcategory collectionHolder to store various Subcategories of a particular category into this Collection Form.
Create a link for adding many Subcategories for a particular category. This is achived through addTagForm() method.
Create a link for deleting Subcategories for a particular category. This is achived through addTagForm Delete link() method.

Css Block

{{ form_start(form) }}

    {{ form_widget(form.name) }}
    <ul class="subcategory" data-prototype="{{ form_widget(form.subcategory.vars.prototype)|e }}"></ul>

{{ form_rest(form) }}

Javascript Block

{% block javascripts %}
	{{ parent() }}
	//call the parent class

	<script type="text/javascript">
		var $subCategoryCollectionHolder = $('ul.subcategory');
		//set the all data object in bundle
		// setup an "add a tag" link
		var $addSubCategoryLink = $('<a href="#" class="add_tag_link">Add Subcategory</a>');
		var $newSubCategoryLink = $('<li></li>').append($addSubCategoryLink);
		var childFormLength = '{{ form.subcategory|length }}';
		
		jQuery(document).ready(function() {
			// Get the ul that holds the collection of subcategory
				$subCategoryCollectionHolder = $('ul.subcategory');
				// add a delete link to all of the existing tag form li elements
				$subCategoryCollectionHolder.find('li').each(function() {
				addTagFormDeleteLink($(this));
			});

			// add the "add a tag" anchor and li to the subcategory ul
			$subCategoryCollectionHolder.append($newSubCategoryLink);

			// add new form on click on add new link
			$addSubCategoryLink.on('click', function(e) {

				// prevent the link from creating a "#" on the URL
				e.preventDefault();

				// add a new tag form (see the next code block)
				addTagForm($subCategoryCollectionHolder, $newSubCategoryLink);
				childFormLength++;
				// call the subcagories in use childFormLength++
			});
		});

		function addTagForm($subCategoryCollectionHolder, $newSubCategoryLink) {
			// Get the data-prototype explained earlier
			var prototype = $subCategoryCollectionHolder.data('prototype');

			// Replace '__name__' in the prototype's HTML to
			// instead be a number based on how many items we have

			var newForm = prototype.replace(/__name__/g, childFormLength);
			//childFormLength++;
			// Display the form in the page in an li, before the "Add a tag" link li
			var $newFormLi = $('<li></li>').append(newForm);
			$newSubCategoryLink.before($newFormLi);
			addTagFormDeleteLink($newFormLi);
		}

		function addTagFormDeleteLink($tagFormLi) {

			var $removeFormA = $('<a href="#">delete this Subcategory</a>');
			$tagFormLi.append($removeFormA);
			$removeFormA.on('click', function(e) {
				// prevent the link from creating a "#" on the URL
				e.preventDefault();
				// remove the li for the tag form
				$tagFormLi.remove();
			});
		}
	</script>

Show.html.twig(No modifications were made to the default code.)

Edit.html.Twig (New file is added in the new.html.twig file)

2. CategorySubCategory

Index.html.twig(No modifications were mode to the default code.)

In this file, inside the javascript tags, document ready() function is called for enabling the Subcategories to be added to the Category for every loading of the page.

Css block

{% block body -%}
    <h1>CategorySubCategory creation</h1>
    {{ form(form) }}
    <ul class="record_actions">
        <li><a href="{{ path('categorysubcategory') }}">Back to the list<</a></li>
    </ul>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $(document).ready(function () {
        $('#webmuch_trademarkbundle_categorysubcategory_Category').change        (function(){
            var val = $(this).val();
            $.ajax({type: "get",
            url: "{{ url('category_subCategories_ajax_call') }}?category=            " + val,
            success: function(data) {
                // Remove current options
                $('#webmuch_trademarkbundle_categorysubcategory_subCategories').html('');
                //Rendor new options
                $.each(data, function(k, v) {
                    alert($('#webmuch_trademarkbundle_categorysubcategory_subCategories').append('<option value="' + v + '">' + k + '</option>'));
                });
            }
        });
        return false;
    });
});
</script>
{% endblock %}

Show.html.twig (No modifications were made to the default code)
Edit.html.Twig (No modifications were made to the default code)

3. TrademarkQuestionnaire

In new.html.twig file, we add a new button loaded as add + to select categories and its respective Subcategories. For this purpose inside the javascript tags. We created a collectionHolder variable and added to it, CategorySubCategoryAddValueLink. Also, we added a delete link to the collectionHolder to delete any existing SubCategory and Categories. For both these functionalities, we defined two separate functions categorySubCategories AddValueForm and CategorySubCategory AddTagFormDeleteLink().

<script type="text/javascript">
    var collectionHolder = $('ul.categorySubCategories');
    var valueCount = '{{ form.categorySubCategories|length }}';

    // setup an "add a value" link
    var $addValueLink = $('<a href="#" class="btn btn-primary btn-small">add+</a>');
    var $newLinkLi = $('<li></li>').append($addValueLink);

    jQuery(document).ready(function()
    {
        $collectionHolder = $('ul.value');

        // add a delete link to all of the existing value form li elements
        $collectionHolder.find('li').each(function()
        {
            addTagFormDeleteLink($(this));
        });

        // add the "add a value" anchor and li to the categorySubCategories ul
        collectionHolder.append($newLinkLi);
        
        // action performed on clicked
        $addValueLink.on('click', function(e) {

            // prevent the link from creating a "#" on the URL
            e.preventDefault();

            // add a new value form (see next code block)
            addValueForm(collectionHolder, $newLinkLi);
            valueCount++;
        });
    });

    function addValueForm(collectionHolder, $newLinkLi) {
        //Get the exixting count of value
        // Get the data-prototype we explained earlier
        var prototype = collectionHolder.attr('data-prototype-categorySubCategories');
        // Replace '__name__' in the prototype's HTML to
        // instead be a number based on the current collection's length.
        var newForm = prototype.replace(/__name__/g, valueCount);
        // Display the form in the page in an li, before the "Add a value" link li
        var $newFormLi = $('<li></li>').append(newForm);
        $newLinkLi.before($newFormLi);

        // add a delete link to the new form
        addTagFormDeleteLink($newFormLi);
    }

    function addTagFormDeleteLink($valueFormLi) {
        var $removeFormA = $('<a href="#" class="btn btn-danger btn-small">del-</a>');
        $valueFormLi.append($removeFormA);
        $removeFormA.on('click', function(e) {
            // prevent the link from creating a "#" on the URL
            e.preventDefault();
            // remove the li for the value form
            $valueFormLi.remove();
        });
    }
</script>

<script type="text/javascript">
    $('#select').on('change', 'select:not(select[multiple=multiple])', function() {
        var $cSelect = $(this);
        var $nextMultiSel = $("#"+$cSelect.attr('id').slice(0,-8)+"subCategories").css("height","100");
        console.log("clicked at ?");
        $.ajax({
            type: "get",
            url: "{{ url('category_subCategories_ajax_call') }}?category=" + $cSelect.val(),
            success: function(data) {
                // Remove current options
                console.log("fetched");
                $nextMultiSel.html('');
                //Rendor new options
                $.each(data, function(k, v) {
                   $nextMultiSel.append('<option value="' + v + '">' + k + '</option>');
                });
            }
        });
        return false;
    });
</script>
{% endblock %}

Well, I hope you’ve embeded your EAV model in Symfony2 Collection Form. Hope this helped!

Please do share the tutorial if you appreciate it at all. And for any doubts, please mention your query in the comments section below.

Happy Reading!

MORE AWESOME TUTORIALS

1. How To Override FOSUserBundle – TUTORIAL
   
2. How To Create A Multi Column Design Layout Using Wookmark jQuery – TUTORIAL
   
3. How To Create A Business Application In Data Grid – ORO Platform – TUTORIAL
   
4. Image Flip Using jQuery
   

The post How To Embed EAV Model In Symfony2 Collection Form appeared first on Webmuch.