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";
}
});
}

JS/JQUERY How to give priority to a button click in the same DIV

My whole div is clickable and will change the page. However, inside my div, I have an element that is also clickable, but it should be prioritized sincee it stays on the page.
Basicly, i'm working on a webshop. clicking on a div will go to a new page with the requested data. However, the div includes a clickable image that adds the item to the wishlist.
In the code below, child refers to my whole clickable div, whereas my wishElement is the clickable image to refer to my wishlist.
$('#' + wishElement).click(function() {
window.location.href = "http://website.com/index.php?wish=" + child;
});
$('#' + child).click(function(){
window.location = "http://website.com/item.php?item=" + child + '&name=' + itemname + '&link=' + link;
});

Use event.stopPropagation(); to stop your child event from bubbling up:
$('#' + child).click(function(ev){
ev.stopPropagation();
window.location = "http://website.com/item.php?item=" + child + '&name=' + itemname + '&link=' + link;
});

My problem has been solved by the post coded above, however, the
ev.stopPropagation();
has to be inside my wishElement in order to work.
So thanks for the help!

How to change Jquery selector based on an param passed through a function

I have a function:
function factCheck(index) {
if (arrayOfSites[index].indexOf("pdf") > -1) {
$('#20').attr('style', 'color: red');
$('#' + index).attr('style', 'color: red');
console.log('index: ' + index);
console.log($("#" + index).text());
}
}
So my question is. The text color of the element changes color when I use $('#20') but when I use, $('#' + index) it doesn't work.
Funny thing is, I with console.log.. it logs the text of the element but I can't effect the css of it.
Why is this happening?
// after a three hour meeting.. I came back with some really great answers!! Thank you!!
edit:
the code below shows how I'm snagging all the links on the page and add the id equal to the index of that item. So that's why I'm trying to grab that link, and effect it in some way. I appreciate all you guys.. I think I'm going to take the string and add a letter to it as they come in through the function and then manipulate the anchor from that point. I just wonder if there's a more efficient way of doing this.
$(".lpage a").each(function (index) {
// console.log(index + ": " + $(this).text());
str = $(this).attr('href');
arrayOfSites.push(str);
str = arrayOfSites[index];
title = $(this).attr('title');
parseURL(str);
$('.colContent2').append(cellOpen + '<a onclick="whichFunction(' + index + ');" id= "' + index + '"style="cursor:pointer;" class="injectedLinkCol2" >' + str + '</a>' + cellClose).prop("id", index);
});

Maybe it has something to do with the name of your id attribute. Take a look at this answer.

Try to use the toString() function:
function factCheck(index) {
if (arrayOfSites[index].indexOf("pdf") > -1) {
$('#20').attr('style', 'color: red');
$('#' + index.toString()).attr('style', 'color: red');
console.log('index: ' + index);
console.log($( "#" + index.toString() ).text());
}
}

An id name or class name must begin with a name must begin with an underscore (_), a hyphen (-), or a letter(a–z).
So something like
'#d20'
would work.
See this: Valid CSS Selectors.

I couldn't reproduce the exact problem. I made a pen (link) and tried what you asked but it works well. So it must be some error in the remaining code.
on a related note
In CSS id's are not allowed to start with a number(classes are allowed). So writing something like
#20{
color: red;
}
won't work, but the rule only applies to css. JQuery will still work, which means your only option's are to write inline styles or use JQuery's .attr or .css, but jQuery.attr() will reset all your inline styles. you are left with using .css(). So, it's better to not start your id's with numbers.
try using .css instead of .attr and see if it works.

$('.exampleClass:eq(' + index + ')').css("color", "yellow");
for some reason works
$('.exampleClas').eq(index).css("color", "yellow");
does not work.

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 html function isn't working

I am tring to show twitter user information on my web page. I have created a div tag which is will contain user information using jquery. I want to show user information when the cursor is over this div tag. Below is my code in jquery:
var hideDelay = 500;
var currentID;
var hideTimer = null;
var container;
$(function () {
container = $('<div id="personPopupContainer" style=\"max-width:400px;\">'
+ '<table border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
+ '<tr>'
+ ' <td class="corner topLeft"><div style="position:absolute;top:15px;left:-16px;"><img src="images/balloon_tail.png" /></div></td>'
+ ' <td class="top"></td>'
+ ' <td class="corner topRight"></td>'
+ '</tr>'
+ '<tr>'
+ ' <td class="left"></td>'
+ ' <td><div id="personPopupContent"></div></td>' //the div tag is here
+ ' <td class="right"></td>'
+ '</tr>'
+ '<tr>'
+ ' <td class="corner bottomLeft"> </td>'
+ ' <td class="bottom"></td>'
+ ' <td class="corner bottomRight"></td>'
+ '</tr>'
+ '</table>'
+ '</div>');
$('body').append(container);
$('#personPopupContainer').mouseover(function () {
if (hideTimer)
clearTimeout(hideTimer);
});
$('#personPopupContainer').mouseout(function () {
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function () {
container.css('display', 'none');
}, hideDelay);
});
});
That is working well. But the below code that is
$('#personPopupContent').html('<center><img src="images/loading_sm.gif" /></center>');
isn't working.
function UserMouseOver(o) {
var obj = $("#" + o);
var Settings = obj.attr('rel').split(',');
var UserID = Settings[0];
var ScreenName = Settings[1];
if (hideTimer)
clearTimeout(hideTimer);
var pos = obj.offset();
var width = obj.width();
if (pos != null && width != null) {
container.css({
left: (pos.left + width) + 20 + 'px',
top: pos.top - 23 + 'px'
});
}
$('#personPopupContent').html('<center><img src="images/loading_sm.gif" /></center>');
}
what I am doing wrong? Can someone please help me?

Note: in the actual code there is no typo ( the image tag isn't closed early ) but in the code you focus on, there is a typo, as Stian points out.
Longshot.. Is the image even available? You can use this plugin:
https://github.com/desandro/imagesloaded
..then change the HTML once the image is known to be in the DOM.

Your question does not entirely explain what you are trying to do. However, I can at least explain why your image isn't showing.
First, you need to call your function UserMouseOver(o) from inside $('#personPopupContainer').mouseover(function () {. . .}. The way you coded it, UserMouseOver(o) will never get called, and none of the logic in the function will get executed.
Second, in your $('#personPopupContainer').mouseout(function () {. . .}, the line container.css('display', 'none') is hiding your entire container object (ALL your HTML!) on mouseout. That will cause your "loading" gif to never display, because the div you are trying to display (personPopupContent) resides within the container object you just set to display: none! You should set the display to none only on the particular element you are trying to hide; for example, you could add id="balloon_tail" to your balloon image and change the Javascript line to $('#balloon_tail).css('display', 'none').
Third, you will get an error on the line var Settings = obj.attr('rel').split(','); because you did not include a rel attribute in your outermost element personPopupContainer. You will need to add a rel attribute of comma separated strings to this element for this line to work. (However, according to W3C, the only official element that uses the rel attribute is <a>, the anchor tag.)
Finally, I would add an image tag to #personPopupContent to make it something like <div id="personPopupContent"><img src="" id="loading_sm" /></div>. Then you can change
$('#personPopupContent').html('<center><img src="images/loading_sm.gif" /></center>');
to
$('#loading_sm').attr("src", "images/loading_sm.gif");
but that's just me.
I hope this helps!

If the code is working as you stated (I can't see where you are calling your mouse over method) and it's only the image that isnt showing.
Use a Web Debugger to check for any 404 errors e.g. http://www.fiddler2.com/fiddler2/ or even your browser's F12 web debugger.
Make sure your path to the image is correct.
UPDATE
Okay, now that we know it works. Try the following : Add a class to #personPopupContent e.g. class="popupContent" . Change the line of code where you set the html to call the class selector instead of the ID selector. Then to make sure that jQuery is getting the html element to add the content to, add some text to it.
//All the other code
+ ' <td><div id="personPopupContent" class="popupContent"></div></td>'
//All the other code
Change the selector in UserMouseOver() method :
$('.popupContent').html('<center><img src="images/loading_sm.gif" /></center>');
PLEASE MAKE SURE
I don't know where you are calling the UserMouseOver() method, so please add a Document Ready around the piece of jquery.
function UserMouseOver(o) {
//All the other code
$(function () {
$('.popupContent').html('<center><img src="images/loading_sm.gif" /></center>');
});
}