DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Reversing an Array: An Exploration of Array Manipulation
  • Low Code/No Code Testing Approach for Salesforce Testing
  • HTML5 < time > element: returned!
  • Red-Black Trees in C#: A Guide to Efficient Self-Balancing Binary Search Trees

Trending

  • Building Real-Time Applications to Process Wikimedia Streams Using Kafka and Hazelcast
  • Next.js vs. Gatsby: A Comprehensive Comparison
  • Debugging Tips and Tricks: A Comprehensive Guide
  • The Stairway to Apache Kafka® Tiered Storage

Advanced Cloning in UI Development

We generally use HTML element cloning in some web applications, but the default jQuery cloning method does not remove data in the newly cloned element. Hence, we came up with this solution called Advanced Cloning—the cloning of HTML elements without duplication of data.

Sree Tejaswi user avatar by
Sree Tejaswi
·
Apr. 18, 16 · Analysis
Like (1)
Save
Tweet
Share
4.29K Views

Join the DZone community and get the full member experience.

Join For Free

User Interface (UI) development is one of the most important activities that influences the visual appearance of a web application and is usually associated with certain hurdles while adding content on a page.

Building the most appropriate UI with suitable characteristics such as fast loading, minimum space utilization, minimized scrolling, responsiveness, etc. is imperative for any organization. We usually try different solutions to overcome such hurdles to finally fulfil the requirement.

While working on one such project, I found it necessary to create dynamic form fields. 

What Does Advanced Cloning Mean?

We generally use HTML element cloning in some web applications, but the default jQuery cloning method does not remove data in the newly cloned element. Hence, we came up with this solution called Advanced Cloning. It involves cloning a parent element to a child element and removing data or content from the child element.

In short, Advanced Cloning can also be defined as the cloning of HTML elements without duplication of data. 

Where Can We Use Advanced Cloning?

If we consider a job portal, users need to update their skills while registering their details. For this process, the portal requires an option to add multiple skills in a form. In this scenario, we can implement Advanced Cloning concept and fulfil the requirements of the user. Please refer to the snapshot below to get a better idea of Advanced Cloning usage.

Image title

Implementation of "Advanced Cloning" Using Jquery

Here are the steps to be followed while implementing this concept in HTML pages:

Step 1

Add jQuery library in your code as:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Step 2

Add the following code into a JS file such as jQuery-advanced-cloning.js:

jQuery(function(){
var addmorehelper = function (match, capture){
return '__' + ((+capture + 1) || '');
};
jQuery(document).on("click",".add-more",function(){
var wrapper_name = '.add-more-wrapper';
var wrapper = jQuery(this).closest(wrapper_name);
var cur_num = wrapper.children('.clone-content').size();
var clone = wrapper.clone().children('.clone-content:last')
.find('input[type="text"],input[type="file"]').val('').end()
.find('textarea').val('').end()
.find('.remove_unwanted').remove().end()
.find('.add-more').val('Remove').removeClass('plus_icon add-more')
.addClass('remove_icon remove-more').end()
.find('select option[value=""]').attr("selected",true).end()
.find("*").each(function(index, element) {
if(element.id){
var matches = element.id.match(/(.+)__\d+/);
if(matches && matches.length >= 1){
element.id = element.id.replace(/__(\d+)?/, addmorehelper)
}
if(element.name){
var matches = element.name.match(/\[([^}]+)\]/);
if(matches && matches.length >= 1){
var st =element.name;
element.name = [].map.call(st,
function(s,i){
return (!isNaN(+s)&&st[i-1]==='['&&st[i+1]===']')?++s:s;
}).join('');
}
}
}
}
).end();
wrapper.append(clone);
});
/*Remove more button */
jQuery(document).on("click",".remove-more",function(){
var wrapper = jQuery(this).closest('.clone-content').remove();
});
});

Step 3

If you need to upload multiple images, you can use the HTML code as shown below:

<ul>
<li>Add Images</li>
<li>
<div class = "row">
<div class = "col-md-6 pad-10">
<input type="file" name="product_image[]" />
<input type="button" name="add_field" value="Add More" class="add-more”/>
</div>
</div>
</li>
</ul>

This code basically has three important elements with a specific class:

Wrapper Element that contains "add-more-wrapper" class. It is an HTML element to append all clone elements.

Clone Content Element that contains "clone-content" class. It contains content and HTML that need to be cloned.

Add More Button Element that contains "add-more" class. It is the element that calls a JavaScript code and does the magic when the user clicks on the button.

For more information pls visit : http://vmokshagroup.com/

Cloning Element

Opinions expressed by DZone contributors are their own.

Related

  • Reversing an Array: An Exploration of Array Manipulation
  • Low Code/No Code Testing Approach for Salesforce Testing
  • HTML5 < time > element: returned!
  • Red-Black Trees in C#: A Guide to Efficient Self-Balancing Binary Search Trees

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: