jQuery .insertAfter not working, trying to move element in DOM

Question

I have tried the following jQuery code to move a <select> element (that I can only see within the DOM) after a <form> element but it does not work:

<script type="text/javascript">
jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change]');
</script>

I have also tried:

<script type="text/javascript">
jQuery('select[id^=lc_currency]').insertAfter('form[id^=lc_change]');
</script>

Any coding suggestions? I am using a wildcard selector because on every page the ID changes, 1c_currency1, 1c_currency2, etc.

Live site is at http://thehungrygeek.com/2015/11/17/australia-dairy-company/

I want to move specifically a select dropdown box, from one place to another on a webpage. Unfortunately the element code is only located in the DOM.

This select dropdown box is located at the bottom of the page at http://thehungrygeek.com/2015/11/17/australia-dairy-company/

The code, only located in the DOM, is as follows:

<select style="width:200px" name="lc_currency1" id="lc_currency1" onchange="localCurrencyChange('SGD',lcValues1,1)">...</select>

The select dropdown box is supposed to be moved here:

The relevant code at the area is as follows:

<form name="lc_change1" id="lc_change1" action="http://thehungrygeek.com/2015/11/17/australia-dairy-company/" method="post"> 
Show currencies in
<noscript>[Please enable JavaScript to change the currency used on this page]</noscript> 
<br>
<small>Powered by LocalCurrency. Rates from <a href="http://finance.yahoo.com" title="Visit Yahoo! Finance" target="_blank">Yahoo! Finance</a></small>
</form>

Thanks for any help!

Mohamed-Yousef · Answer 1 · 2016-01-02T11:30:41.910

1

1st: Be sure you include jquery

2nd: Wrap your code in

$(document).ready(function(){
    // your code here   
});

3rd: Try to use .each()

$(document).ready(function(){
     jQuery('select[id^=lc_currency]').each(function(){
          var getformId = $(this).attr('id').replace('currency','change');
          //alert(getformId);
          $(this).insertAfter('form#'+ getformId);
     });
 });

Working Demo

edited Jan 02 '16 at 11:30

answered Jan 02 '16 at 10:47

Mohamed-Yousef

23,946
3
19
28

the issue might be that the relevant code targeted is implemented in the DOM, and thus not working - if you want to use jsfiddle my own solutions in the question that I said that I tried do work there – David Z Jan 02 '16 at 11:00
@David What does "implemented in the DOM" even mean? – Tomalak Jan 02 '16 at 11:12
`` can't be seen in the regular 'view source', code is present within DOM - well I have no idea why it isn't working then – David Z Jan 02 '16 at 11:15
@DavidZ please copy/paste my 3rd step in my answer in your code and let me see it live – Mohamed-Yousef Jan 02 '16 at 11:20
the 3rd answer code has been there live since you put it up 20+mins ago, and its still there. obviously I had to change the $ signs to jQuery, safe mode issues – David Z Jan 02 '16 at 11:24
@DavidZ Ok just to check...please alert(getformId) – Mohamed-Yousef Jan 02 '16 at 11:30
Not sure what you mean? Please let me know what code you want changed – David Z Jan 02 '16 at 11:34
I updated my answer with //alert(getformId); just uncomment it and let me see the alert in your website ... I meant remove // to be just alert(getformId); – Mohamed-Yousef Jan 02 '16 at 11:35
done, its possible that I may have to move the jQuery code right to the bottom of the site, but its quite difficult as I'm using a Wordpress child theme – David Z Jan 02 '16 at 11:53

Scarecrow · Accepted Answer · 2016-01-02T11:38:37.873

0

I guess your id strings should be inside quote , Try this

$(function(){
    jQuery("select[id^='lc_currency']").insertAfter("form[id^='lc_change']");
});

Edit:

Try to move the select element after 1 sec after window load. this might works for you as your select element coming from javascript code.

$(window).load(function(){
   setTimeout(function(){    
      jQuery("form[id^='lc_change']").prepend( "select[id^='lc_currency']");
   },1000);
});

edited Jan 02 '16 at 11:38

answered Jan 02 '16 at 10:50

Scarecrow

4,057
3
30
56

I did try that and it did not work - also not the optimum solution as I require wildcard selectors – David Z Jan 02 '16 at 11:02
Does not work, probably an issue because the code is only found in the DOM, the quotations do not affect it, code is live now – David Z Jan 02 '16 at 11:04
@DavidZ please confirm if your select drop down is coming dynamically using some javascript. – Scarecrow Jan 02 '16 at 11:11
the .prepend code is not working either - the select drop down is coming down from an installed Wordpress plugin, which is from some javascript, you can find the full code here, ctrl-f for localcurrency http://thehungrygeek.com/wp-content/cache/autoptimize/js/autoptimize_c68e4e2d017800dc4bb8142d4b35278f.js – David Z Jan 02 '16 at 11:18
@DavidZ this script is creating the select element, so you need to fire your code after the script adds the select element . – Scarecrow Jan 02 '16 at 11:33
Ah that makes sense, unfortunately that won't be easy as I'm working with a Wordpress child theme. I'll try and figure out something to put on the functions.php – David Z Jan 02 '16 at 11:46
Do you have any idea how to make the code work if it is placed before the script? I've seen an implementation before on another issue that I had: `` That was for inserting a css class into an element – David Z Jan 02 '16 at 11:50
@DavidZ your currency select box loading before window load event fires, Use my updated code where I've fired the script on window load event. I think you don't need to add callback for 'DOMSubtreeModified' event , adding callback for 'DOMSubtreeModified' event will make your app very slow – Scarecrow Jan 02 '16 at 12:19
Alright I've solved it by using the Wordpress functions.php to call the script at the end of the footer. As to which script worked well since I did that step 90% of the scripts suggested on this page would probably have worked. I think you had the closest answer to it without using that functions.php hack, thank you very much for the help and I'm giving you the check mark – David Z Jan 02 '16 at 12:46

score 0 · Answer 3 · answered Jan 02 '16 at 10:51

0

From the screenshots you added, it seems like you want to insert the select inside the form, not after, this is what I used:

jQuery('[id^=lc_currency]').insertAfter('[id^=lc_change] noscript');

answered Jan 02 '16 at 10:51

Nora

3,093
2
20
22

thanks, you are right... unfortunately I can't get any of the code to work, the box still stays in the original position – David Z Jan 02 '16 at 11:01
When do you try to move the select? – Nora Jan 02 '16 at 11:08
You can have a look at the page live, the code is there but the select button does not move – David Z Jan 02 '16 at 11:10
I noticed that instead if text/javascript you have text/rocketscript. Here is a related issue: http://stackoverflow.com/questions/9681032/why-is-wordpress-placing-text-rocketscript-instead-of-text-javascript-when-u – Nora Jan 02 '16 at 11:21
rocketscript is an implementation by Rocket Loader on Cloudflare, it does not affect how jQuery functions on my site - I have many other jQuery scripts and tweaks working fine, issue is specific to this particular plugin – David Z Jan 02 '16 at 11:22

jQuery .insertAfter not working, trying to move element in DOM

3 Answers3