Develop Reference

OnClick event that adds text to a div, removes it if it exists, and groups by description name

I'm using FullCalendar that's filled with events that's populated from a mysql database. I'm using the eventClick function of FullCalendar to send the contents of the event to a separate div so I'll be able to print out the events that I've clicked.
Using this code below, I'm able to click on the event and it adds the lines that I need to the div, but it'll add duplicates because there's nothing stopping it from doing so as I'm just appending each event when I click on one.
// FullCalendar eventClick function
eventClick:function(event){
$(document).ready(function(){
document.getElementById("event_info").innerHTML += event.description + "<br>" + event.start + "<br>" + event.end;
});
}
// div where the information will print
<div class="col-sm-3" id="event_info"></div>
So I want to be able to click on a calendar event & send it to the div, but also check to see if the event has already been added and if it has, remove it. Finally, I'm looking to group the events by the description name when clicked.
I'm not sure where to start with adding those so any help or direction would be much appreciated. Thanks for your time and feel free to yell at me if I didn't explain something very well.

Why not simply include something like a class or data-attribute once you first add the event to the div, and then check if that is present, before adding another event?
var target = document.getElementById("event_info");
var isAlreadySet = target.getAttribute('data-eventAlreadySet');
var newHTML = event.description + "<br>" + event.start + "<br>" + event.end";
if (!isAlreadySet) {
target.innerHTML += newHTML;
target.setAttribute('data-eventAlreadySet', "true");
} else {
// your code here if the event is already set
// to replace the former event, use something like :
target.innerHTML = newHTML; // replaces the HTML
//instead of :
target.innerHTML += newHTML; // adds to the existing HTML
};

you need to check the div innerHtml before appending a new text. Please try the following code:
// FullCalendar eventClick function
eventClick:function(event){
$(document).ready(function(){
if($("div#event_info:contains("+event.description+")").length <=0)
{
document.getElementById("event_info").innerHTML += event.description + "<br>" + event.start + "<br>" + event.end";
}
});
}

Jquery: Getting the id of an html element: why one solution works and the other don't

I am referencing one element on an index page hidden initially and then showed with jquery on an index.html page. Can't explain why the first ones doesn't work, even if it should, but the last one does. I am getting the id of a pressed button "id='edit1'...2...3..etc" Thank you!
//why this doesn't work and the next one does???
/*$('.edit-btn').click(function(){
var id = $(this).attr('id');
console.log("btn1:", id);
});
$('.edit-btn').on('click', function(){
var id = $(this).attr('id');
console.log("btn1:", id);
});
*/
var id;
$("body").on("click",".edit-btn",function(){
id = (this.id).replace("edit","");
UPDATE:
The containers are hidden and shown using this function:
function hideWindowsAndShowOneWindow(sWindowId) {
$('.wdw').hide(); //fadeout 500
$('#' + sWindowId).show(); // fade in 500
}
So the div container, I am trying to reference by id was hidden after the page was loaded or maybe before the page is loaded. My guess is after the page is loaded...
The HTML:
<div class="wdw" id="wdw-events">
<h4>Events text</h4></br>
<div id="content"></div>
<h4>Edit Events</h4></br>
<div>
</div>
It is added/injected after the page was loaded with this js script, but still what has the last method special, just referencing through the document down to the id attribute of the button:
finalEventsLS.forEach(function (item) {
var date = item.date.day + "/" +item.date.month + "/" + item.date.year;
$('#content').append("<ul><li>" +
"Event nr.: " + item.id + " " +
"Name: " + item.name + " " +
"Topic: "+ item.topic + " " +
"Speaker: "+ item.speaker + " " +
"Date: " + date + " " +
"</li><button class='edit-btn' id='edit" + item.id + "'>Edit</button>
</ul>");
})

It's hard to tell, since you've only shared your jQuery. Update with your HTML please.
If you are referencing an element which was added to the DOM after the initial page load, .click will not work, because it only looks for elements initially loaded into the DOM. Instead, you would use the .on method, which looks for elements added to the DOM both before and after initial load.
UPDATE:
I should have looked closer. The second snippet of code that didn't work, but used the .on method, most likely didn't work because you are still trying to access the .edit-btn element, which at this point I'm assuming was added after page load. The code snippet that does work, is accessing the body element first. I will try to find and update with a better explanation, but the .on method still needs to find a element that existed in the DOM initially. From there, it can climb down the tree to find .edit-btn element.

How to copy elements into a div after an on click action?

Using JavaScript and JQuery and underscore
Currently I have the following
<div id="select"></div>
which is populated by the following code
$(document).ready(function () {
$('.go img').css('cursor', 'pointer');
$('.go').on('click', 'img', function (e) {
$(this).width(100).height(100).appendTo('#select');
So at the moment only the img is taken and placed inside #select, but I would also like for it to include item.A item.C and item.C
But I'm not sure how to change the $(document).ready(function () { code block to achieve this?
I thought I might need to give the div an id and reference that?
I've been able to take the whole lot by concatenating the code block, but thats not how I want it to work, I'd like each element seperate so that I can target it with CSS.
_.each(Badges, function (item) {
var wrapper = $('<div class="wrapper"></div>');
wrapper.append('<img class="images BadgeImgOutline responsive-image" src="' + item.imageURL + '" />');
wrapper.append('<div>' + item.A + '</div>');
wrapper.append('<div>' + item.B + '</div>');
wrapper.append('<div>' + item.C + '</div>');
$('#container').append(wrapper);
});

You could use jQuerys ".parent()" method to get the parent of the img tag - in this case your wrapper div and add this to your select.
The code could look like so:
$(this).width(100).height(100);
$(this).parent().appendTo('#select');
for shrinking the image and appending the whole wrapper including img and items to your select.
Hope this helps

Jquery mouse over adding css

I have a p tag inside an anchor, there many be a variable number of instances of this during the loop. My goal is to on hover make the p tag expand and show more information. I have this so far in terms of mouseover.
however this is not working for me. does anyone have any ideas how to achieve this? someonehow i need to use the passed parameter 'e' to change the height
boxOPToneplustwo : this is an a tag as well.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$(e.target).next('p').addClass("popupHighlight");
});
element creation:
anchorElement = "<a id='anchor" + countWide + "' class=\"boxOPToneplustwo\" alt=\'"+ image_website +"' style=\"cursor:pointer;width:"+ itemWidth + "px"+";height:"+anchorHeight+";position:absolute;left:"+ locationLeft + "px"+";top:0.3%;\" ><p id=\"test\" class=\"popupDynamic\"> " + popupImageTitles[i] + "</p>";
anchorElement += '</a>';

with jQuery you can use this to refer to the handled element.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$(this).next('p').addClass("popupHighlight");
});
http://api.jquery.com/mouseover/
Console play
e.g: trying putting the following code in the console (F12) and see what it does to SO :P
$("p, span").mouseover(function(){ $(this).css("display", "none"); } );

remove a dialog is not removing its inner contents

I have made a dialog and a UI Tab in that dialog. In that tab i am showing some contents as a table. When i close the dialog by remove() method it closes the dialog but when i reopen it the contents are still showing in the tab, is there any method that contents will also reomve when dialog closes. below is my code.
this.formOrderList = null;
this.orderListDialogObject = $('<div id="mainDiv"></div>');
this.orderListTable = $('<div>'
+ '<table class="ui-widget" width="100%" border="0" cellspacing="1" cellpadding="2">'
+ '<thead class="ui-widget-header" id="orderListHead">' + '<tr>'
+ '<th><strong> Order# </strong></th>'
+ '<th><strong> Ref # </strong></th>' + '</tr>' + '</thead>'
+ '<tbody id="orderListBody">' + '</tbody>' + '</table>' + '</div>');
this.orderListTabs = $('<div>' + '<ul>'
+ '<li>Pending</li>' + '</ul>'
+ '<div id="pendingOrderList">' + '</div>' + '</div>');
this.show = function() {
this.orderListDialogObject.dialog({
title : 'Order List',
width : 1000,
height : 150,
close : function(ev, ui) {
$(this).remove();
return false;
}
});
this.orderListTabs.tabs();
this.orderListTabs.appendTo(this.orderListDialogObject);
$("#pendingOrderList", this.orderListTabs).append(this.orderListTable);

You're creating your divs once, and then reusing those same instances repeatedly. Your remove call just removes that div (along with all of its contents) from the DOM tree -- you're not doing anything that will clear the div's contents.
You should probably either:
Create a new set of divs each time you show the dialog -- i.e., re-run all of the above code each time you want to show the dialog, rather than doing some of it once up-front. That way, you're starting with a clean slate each time. Or,
Clear the contents of one or more of the divs before you start adding new stuff to it, by calling empty().
Option #1 would probably be cleaner and easier to maintain in most cases.

You need to make a call to .dialog( "destroy" ) to remove it completely

You need to call destroy on the window (Which then places your content back as it was) and then empty/delete the content using something like $("#main").remove().