We Keep Coding

Using jQuery to append a div to a dynamically created div after AJAX success

I am using the WP-Polls plugin for WordPress which is an AJAX polling system and I'm trying to append an initially hidden div (.comment-block) to a new div (.voted) 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 (.Buttons), the DOM updates to reflect the addition of the new (empty) div with a class of .voted. I put up a similar question earlier but thought I'd open a new more relevant thread.
Note: The .voted 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: <div class="voted"></div>. The reason why I can't just add content inside that div directly is because the content in the div to be appended (.comment-block) is a contact form created by the plugin Contact Form 7 and it requires a PHP statement. Only HTML is allowed in the templates.
Among other various failed attempts, I have tried to use .on so that clicking on .Buttons would activate the function. However, nothing was changed in the DOM.
$(document).on('click', '.Buttons', function() {
$('.comment-block').appendTo('.voted');
});
Below is the HTML. This is before the user has voted:
<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:
<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: https://github.com/lesterchan/wp-polls

$('button.Buttons').click(function ()
{
$('#poll').empty().append('<div class="voted"></div>');
$('.comment-block').show().appendTo('.voted');
$(this).unbind('click');
});
You can also change the '.show()' to actually set the style specifically to display:block if you need to.

If I understand your question correctly, this should work:
$('.Buttons').on('click', function () {
setTimeout(function () {
var commentBlock = $('.comment-block'),
cloneComment = commentBlock.clone();
commentBlock.remove();
$('#poll').append(cloneComment);
cloneComment.wrap('<div class="voted">').show();
}, 1000);
});
First, bind the 'click' to the '.Buttons' element. Then, create a clone of the '.comment-block' element so you can .remove() the original '.comment-block' and .append() or .prepend() the cloned element to the '#poll' element. Lastly, .wrap() the clone with a <div class="voted"> and call .show() to display the clone.

You need to trigger an event from the ajax call:
The button onclick function fires the ajax call.
The ajax success fires event(s) on the targeted elements to be changed and passes it's response as a parameter.
example:
html
<div id="foo">bar</div>
<button onclick="ajaxCall();" />
javascript
var ajaxCall = function() {
$.ajax({
success: function(response) {
$("#foo").trigger("ajsuccess", response);
}
});
};
$("#foo").on({
"ajsuccess" : function(e, response) {
$(this).append(response);
}
});

Can't load HTML code into a div when an image button is clicked

So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.
Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.
After trying to google the problem I was told to do this with the following JavaScript code:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.
TL/DR: trying to load HTML code in a div when an image button is clicked.
Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.

I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.
Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.
If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.
For that you can use
$('#dynamicElement').on('click', function() {
$(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});
The above code works if the element is nested in the button. If it's an external element then use.
$('#dynamicElement').on('click',function() {
$('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});

You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:
Your main page should have 2 sections:
<div id='myButtons'>
<input type='radio' data-url='/includes/about-info.html' />
<...>
</div>
<div id='myContent'></div>
<script>
$(function() { //jquery syntax - waits for the page to load before running
$('#myButtons').on('click', 'input', function() { // jquery: any click from an input inside of myButtons will be caught)
var button = $(this),
url = button.data('url'),
content = $('#myContent');
content.load(url);
});
</script>
Jquery: http://api.jquery.com/

you can try this
$('#myButtons').on('click', 'input', function() {
$.get("about-info.html", function(data) {
$("#div3").html(data);
});
});
or
$(document).ready(function(){
$(function(){
$(".radio538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
})

$(document).ready(function(){
$('#radio1').on('click',function(){
#('#loadradiohere').load('/includes/about-info.html');
});
});
Try that code in your .js file. I am still working for a similar project man.

jquery .load() function only working the first time

So I have a website I am working on just as a personal website that uses jQuery and jQuery UI
Previously I have been using hidden html code and just using jquery to show it.
But its making my html file messy so I wanted to use jquery's .load() to do the same thing but from an external file.
Right now, its set to a .click function.
For my hidden html it shows it every time when I click a particular element.When you click on a different element it. It hides the first one. I am doing it by having a div with 2 classes. The problem is when I tried to load html into a hidden div, and then show it and hide it, it only worked the first time.
Enough talk, here is my code. #1 works , #2 only works on the first click. And leaves imagearea blank every time after.
$(".jquery").click(function(){
clearImageArea();
hideThumbnails(5);
showThumbnails();
$("#1").click(function(){
$(".imagearea").html(js);
$(".jscode").show(1000);
$(".title").text("Extending jQuery");
});
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html");
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
now my hidden stuff in my html file
First my html and js code is loaded into here from jqueryEx.html and is being hidden elsewhere in my javascript via $(".hidden").hide(); and loaded then into into imagearea via .html() and shown via .show()
<div class="jquery2 hidden">
</div>
My other div looks like this which is put into imagearea by clicking on #1
<div class="jscode hidden">
<div class="block">
//lots of js code escaped out into html
</div> <!-- end of block-->
</div>
elsewhere in my JS code at the beginning I have var js=$(".jscode"); to load it into the js variable you saw earlier.
if you want to see an out of date example of what I am working on
go to www.3realsoft.com (only cs and js work on skills)
if you want to see any additional parts of my code, just ask. Most of it is there on my website though.

I got to this item in my search results, when I was trying to have a button both load and refresh the content, and the load was working but the refresh was not working.
Here's a shorter version of the solution, setting Cache to false was the key. Solution found over at this other link, but I'm posting this concept here because if Google dropped me in this item, others looking for the same will also probably find themselves here. Props to John Millikin, make sure to go over to his answer and upvote him: Stop jQuery .load response from being cached
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$('.detail-expand').click(function () {
var detailRowElement = $(this).closest('.session-row-tr').next();
var detailElement = detailRowElement.find('.detail-row-div');
var sessionId = detailElement.data("sessionId");
detailElement.empty();
detailElement.load('/Admin/WebLogPartial/' + sessionId, function () {
$.bootstrapSortable(true, 'reversed');
});
detailRowElement.show();
});
});
</script>

Anything that depends on the HTML being loaded must be done in the callback function, because the first A in AJAX stands for asynchronous.
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html", function() {
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
I'm not really sure what you're trying to do with .html(jquery2), since the argument to .html() is supposed to be a string, not a jQuery object. Maybe you meant:
var jquery2 = $(".jquery2").html();

How create a user interactive popup kind of form

I am looking for something which comes up as a popup on click of a link or button but It must be more than just a popup. It must be a Interactive form which asks for inputs and when Inputs are provided it takes The input back to the parent window. I am not asking for the code. I just don't know which kind of technology it is. Do you know what I am Talking about?

1, Include jQuery into your HTML via <script src=..>
2, See this tutorial on how to create modal overlays via jQuery:
http://jquerytools.org/demos/overlay/modal-dialog.html
http://www.jacklmoore.com/notes/jquery-modal-tutorial

With jQuery, in the child window (popup) you can call your parent window (the opener) and target a field therein with something like this:
$("#fieldInParent", opener.window.document).val("new value");
opener.window.document tells jquery that the ID is in the window that opened the popup.

I can suggest doing something like the following.
In JS:
$container = $("#container");
$("<div class=\"popup\" id=\"popup-id\"><!--html code of form here--><div>").hide().appendTo($container);
....
function showPopup() {
$("#popup-id").show().offset({
left : yourX,
top : yourY
});
}
in HTML:
<!-- container of popup -->
<div id="container">
...
<div>
...
<a onclick="showPopup()">Show Pop Up</a>
in CSS
div.popup {
display: inline-block
}
That should work.
UPD. And even more. Instead of creating div with $("<div class=\"popup\" id=\"popup-id\"><!--html code of form here--><div>"). You can use jquery.tmpl() function.

How can I generate a click on a certain part of the page when the page loads?

Basically I want a certain spot on my page to be clicked when the visitor loads the page. I want this one click to happen without the user even clicking. Is it possible?

<script type="text/javascript">
$(document).ready( function() {
// target represents the id of the element you are wanting to be clicked.
$('#target').click(function() {
// your click handler logic goes here
});
// click the element for the user...
$('#target').click();
});
</script>
<div id="target">This is the element on the page that will be clicked on pageload</div>
UPDATE: This is using JQuery, which is a JavaScript library. Here is a script tag you can use to import JQuery in your HEAD section, if you're not already using it:
<head>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
...
</head>
http://jquery.com/
Using a JavaScript library, such as JQuery, will ensure that this functionality works cross-browser.

If you want to achieve the same purpose without using a javascript library you can use the following code:
<script type="text/javascript">
window.onload=function(){ //when the window loads
var paragraph = document.getElementById("google"); //store the object into a
// variable
//set the functions that will fireup when click happens - not necessary -
//for example purposes
paragraph.onclick = function(){
this.style.background="red";
}
paragraph.onclick(); //simulate click
}
</script>
<p id="google">Google text</p>
demo here: http://jsfiddle.net/9azTR/2/

You can fire specified event on DOM ready. You can to that using jQuery...
$(document).ready(function(){
$('#clickme').bind('click', function() {
alert('Here goes code you would like to perform');
alert('And another pieco of code, if you wish');
});
$('#clickme').trigger('click');
});

Agreed with #Felix Kling. If you are trying to simulate a click from a user on an object you can just invoke the function.
But from the way the question was worded it sounds like you want to simulate a click on an ad to generate revenue on your site? If so the DOM will not allow you to access another containing frame (e.g. an iframe) - that's a security violation.
If you want to that you would have to somehow hijack the user's mouse though an ActiveX control or other malicious means, which of course is unscrupulous.