etech0
asked on
JQuery code to move one element before another
Hi!
I'm VERY new to jquery, so please bear with me.
I need to move an element in my wordpress blog. The element is created by a plugin I use (called mailpoet), and the plugin author told me to use jquery to move it.
Here's the jquery I have:
I also enqueued the .js file (and can see it in the page source), but for some reason, the element is not getting moved. I have no clue how to debug this to find the problem.
Here's the page: http://dev.goinspire.com/men-demand-equal-rights-jwrp/
The element to be moved is the "Post Comment" button, it should be after the checkbox where they can click to subscribe.
If anyone can help me I'd REALLY appreciate it.
I'm VERY new to jquery, so please bear with me.
I need to move an element in my wordpress blog. The element is created by a plugin I use (called mailpoet), and the plugin author told me to use jquery to move it.
Here's the jquery I have:
$('p.form-submit').each(function() {
$(this).insertAfter($(this).parent().find('p.wysija-after-comment'));
});
I also enqueued the .js file (and can see it in the page source), but for some reason, the element is not getting moved. I have no clue how to debug this to find the problem.
Here's the page: http://dev.goinspire.com/men-demand-equal-rights-jwrp/
The element to be moved is the "Post Comment" button, it should be after the checkbox where they can click to subscribe.
If anyone can help me I'd REALLY appreciate it.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Your page is showing a 404 error (file not found) for this file:
http://dev.goinspire.com/wp-content/themes/goinspire/js/submitbutton.js
Check it exists and is in the right place.
http://dev.goinspire.com/wp-content/themes/goinspire/js/submitbutton.js
Check it exists and is in the right place.
Once you've got your files sorted, this is the jQuery you'll need:
jQuery('#commentform .form-submit').appendTo('#commentform');
ASKER
That's where it is.
Except that dev.goinspire.com points to goinspire.com/dev, so the file is really at goinspire.com/dev/wp-conte nt-themes/ goinspire/ js/submitb utton.js
Do you think that would make a difference?
Except that dev.goinspire.com points to goinspire.com/dev, so the file is really at goinspire.com/dev/wp-conte
Do you think that would make a difference?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You're right! So strange, because I'm using Sublime SFTP and it said the file was there, but when I looked in FileZilla I didn't see it, so I uploaded it from there.
Now the button is in the right place. Thanks!
Question: I'm using the third code option you gave. Any reason to try the others? (speed or something?)
Just curious...
Now the button is in the right place. Thanks!
Question: I'm using the third code option you gave. Any reason to try the others? (speed or something?)
Just curious...
It was leakim that provided the first set of examples, not me, but fundamentally all three of his suggestions are the same.
When you use any jQuery that operates on the DOM it's common practice to make sure the DOM is ready before firing the function - the standard way to do that is to use the document ready block - the second example.
As you're putting the code in it's own file, then I would suggest using the document ready method.
For the actual function that moves the button - doesn't really matter whether you use my method (append) or leakims (insertAfter) - just wrap either in jQuery(document).ready()
When you use any jQuery that operates on the DOM it's common practice to make sure the DOM is ready before firing the function - the standard way to do that is to use the document ready block - the second example.
As you're putting the code in it's own file, then I would suggest using the document ready method.
For the actual function that moves the button - doesn't really matter whether you use my method (append) or leakims (insertAfter) - just wrap either in jQuery(document).ready()
ASKER
Got it. Tremendous thanks to both of you for such clear, quick explanations!
ASKER
For some odd reason, none of them are working.
Note: I'm putting the jquery code into a file called submitbutton.js, and i'm enqueueing it via this:
Open in new window