I am using the <a href="https://wordpress.org/plugins/wp-polls/" rel="nofollow">WP-Polls</a> plugin for WordPress which is an AJAX polling system and I'm trying to append an initially hidden div (
) to a new div (
) which will be dynamically inserted into the DOM by the WP-Polls plugin upon AJAX success. Once the user has voted and clicked on the vote button (
), the DOM updates to reflect the addition of the new (empty) div with a class of
. I put up a similar question earlier but thought I'd open a new more relevant thread.
<blockquote>
Note: The
div was created through the templates that WP-Polls
offers in the dashboard. The plugin offers templates for "before
the user has voted" and "after the user has voted" and what I did was
insert a div into the latter like this:
. The reason why I can't just add content inside that div directly is because the content in the div to be appended (
) is a contact form created by the plugin Contact Form 7 and it requires a PHP statement. Only HTML is allowed in the templates.
</blockquote>
Among other various failed attempts, I have tried to use
so that clicking on
would activate the function. However, nothing was changed in the DOM.
Below is the HTML. This is before the user has voted:
And this is how I want it to look after the user has voted:
If anyone can show me the way, I'd appreciate it. I've been racking my brain with this one for hours.
Edit: I am not up to speed with AJAX so I'm unable to provide exactly the code that is needed, but here is a list of the files for the plugin: <a href="https://github.com/lesterchan/wp-polls" rel="nofollow">https://github.com/lesterchan/wp-polls</a>
Code:
.comment-block
Code:
.voted
Code:
.Buttons
Code:
.voted
<blockquote>
Note: The
Code:
.voted
offers in the dashboard. The plugin offers templates for "before
the user has voted" and "after the user has voted" and what I did was
insert a div into the latter like this:
Code:
<div class="voted"></div>
Code:
.comment-block
</blockquote>
Among other various failed attempts, I have tried to use
Code:
.on
Code:
.Buttons
Code:
$(document).on('click', '.Buttons', function() {
$('.comment-block').appendTo('.voted');
});
Below is the HTML. This is before the user has voted:
Code:
<div id="poll">
(poll here) + .Buttons vote button <-- in here----------|
</div> |
<div class="comment-block" style="display:none"> <-- I want this div |
<?php echo do_shortcode('[contact-form-7]'); ?>
</div>
And this is how I want it to look after the user has voted:
Code:
<div id="poll">
<div class="voted"> <-- dynamically created div
<div class="comment-block" style="display:block">
<?php echo do_shortcode('[contact-form-7]'); ?>
</div>
</div>
</div>
If anyone can show me the way, I'd appreciate it. I've been racking my brain with this one for hours.
Edit: I am not up to speed with AJAX so I'm unable to provide exactly the code that is needed, but here is a list of the files for the plugin: <a href="https://github.com/lesterchan/wp-polls" rel="nofollow">https://github.com/lesterchan/wp-polls</a>