Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery to copy an element on the page

Posted on 2016-08-03
8
Medium Priority
?
84 Views
Last Modified: 2016-09-08
I use a hosted e-commerce solution to sell products online.  The site is pre-designed with a button that fires a JavaScript event. I'm fine with this button and the way it works.

At the bottom of each product page, there is an editable region where I can insert my own content (including code).

In this section of the page, I want a COPY of the button to appear. So I view the source code, copy this block of code:

<span style="margin-left:30px;"><a id="ctl00_content_CtlAddToCart_x12" class="pbtn btn-s btn-s-green ButtonRefreshPreview" onclick="return PreviewSubmitCrossPost(23152,295);" href="javascript:void(0);"><span><span class="pbtn-icon img-refresh"></span>Generate Proof</span></a></span>

... and paste it into the editable content region at the bottom of the page.
Doing this creates a second copy of the button.
It works fine.

The problem is, since this block of code calls a function, and the parameter of the function is the Product ID, and the product ID is different for every product ... I can't simply copy/paste this same block of code into every product page.  

Instead I have to paste the code. Then view the source code, grab the product ID, then go back into my copy and update the parameter. Because the ID is unique for each product, I have to manage these codes manually.

Using jQuery, is there a way that I can just say "Find the button on this page and make a copy of it here"?

This way I am copying/pasting the same block of code for every product, and it automatically grabs the product ID without me having to manually update it?
0
Comment
Question by:ecarbone
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41741832
This is definitely possible. But how would you describe the element you wish to clone? In the code you've included, the outer span element does not have an id or class value to target. Is the id of the <a> tag always "ctl00_content_CtlAddToCart_x12"? If so, you could select that <a> tag, then select its parent element to clone.
0
 
LVL 10

Author Comment

by:ecarbone
ID: 41742211
Hi Kim,
I supposed I would have to target the id of the <a> tag. I believe it is always the same. I am new to jquery. How would I write the function to clone this element?

Thanks.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 41742528
Replace your current click event handler by this one :

// watch all click on any Anchor having ID ctl00_content_CtlAddToCart_x12
// best is to you use a class instead an ID on your button, so use the following instead :
// jQuery("body").on("click", ".george", function(evt) {
jQuery("body").on("click", "a[id=ctl00_content_CtlAddToCart_x12]", function(evt) {
    var clone = jQuery(this).closest("span").clone(); // we clone the span with the button inside
    // append the clone to the product listing
    clone.appendTo(".productList");
});

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 22

Expert Comment

by:Kim Walker
ID: 41742540
One thing to beware of, the ids of the elements in the cloned version will be the same as the ids of the original elements. This could cause problems if there is other code that targets these elements. Usually, only the last element with a duplicate id will be targeted. It may be necessary to find the elements with ids in the clone and modify them before inserting the clone elsewhere on the page.
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 1000 total points
ID: 41742652
greetings ecarbone, , You have a couple of potential problems by copying an element (button) in javascript, one is the identical ID of two elements, that Kim Walker mentioned, and the other is pulling associated styles, functions, and placements from that element. I think what you need is  to duplicate the Click event function, on the buttons, not necessarily  the entire button HTML elements, you can simply assign click functions in javascript with an equal =

you might have your added button with a unique ID like -
<span style="margin-left:30px;">
<a id="copiedButton" class="pbtn btn-s btn-s-green ButtonRefreshPreview"  href="javascript:void(0);">
<span><span class="pbtn-icon img-refresh"></span>Generate Proof</span>
</a></span>

Open in new window

and no click event, , then at the bottom of the page, you have code simalr to -
document.getElementById("copiedButton").onclick = document.getElementById("ctl00_content_CtlAddToCart_x12" ).onclick;

Open in new window

0
 
LVL 10

Author Comment

by:ecarbone
ID: 41759238
Sorry for the delay everyone. I agree that the duplicate "id" is not ideal. Slick, you are correct - I really want the click event, not necessarily the entire button.

I am going to try out the proposed solutions today and report back asap.

Thanks.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41778242
Any news ?
0
 
LVL 10

Author Comment

by:ecarbone
ID: 41789968
leakim and Slick both presented solutions. I ended up going with Slick's and it worked perfectly. Thank you. JavaScript is great. I need to learn more!
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question