.append to "Add This Event" widget summary text using jQuery (Syntax Help)

Question

I am unable to append values into the _summary class or any other. I believe its a really simple syntax error I am making. I have been trying different syntax's for the past day, with no luck.

I am using this widget.

Please help.

jQuery

$("._summary").append("hello world");

HTML

<a href="http://example.com/link-to-your-event" title="Add to Calendar" class="addthisevent" id="addthisevent">
    Add to Calendar
    <span class="_start">10-05-2014 11:38:46</span>
    <span class="_end">11-05-2014 11:38:46</span>
    <span class="_zonecode">1</span>
    <span class="_summary">Summary of the event</span>
    <span class="_description">Description of the event</span>
    <span class="_location">Location of the event</span>
    <span class="_organizer">Organizer</span>
    <span class="_organizer_email">Organizer e-mail</span>
    <span class="_all_day_event">false</span>
    <span class="_date_format">DD/MM/YYYY</span>
</a>

Are you sure you included jQuery? Are you sure the document is ready before trying to do it? — Bill Criswell, Dec 27 '13 at 15:26
Are these being added after the page is loaded? Check your console, that element may not exist when you're trying to run that command. — tymeJV, Dec 27 '13 at 15:26
Try wrapping that in a timeout temporary to see if that works, the element probably isn't there when you're trying to append to it. — adeneo, Dec 27 '13 at 15:27
did you try it under firebug or similar tool? are there error messages? — akhikhl, Dec 27 '13 at 15:28

score 4 · Accepted Answer · answered Dec 27 '13 at 15:33

After that calendar widget code does it's magic, all those internal <span> elements are set to display: none. The code is probably working, as you could verify with your browser developer tools (inspect the DOM).

After your code that modifies the text, add this:

addthisevent.refresh();

It's there in the FAQ. Here is a fork of VisioN's fiddle.

Cody Bonney · Answer 2 · 2013-12-27T15:54:20.010

The text is being appended just fine. After you bind the AddThisEvent widget to the parent element, the child span elements are being hidden.

jsfiddle

<span class="_summary" style="display: none;">
    Summary of the event
    hello world
</span>

To make sure your updates to the <span> elements carry over to the calendar event, you can update your element with jQuery before calling the AddThisEvent Widget like this.

jsfiddle

<script>
    $("._summary").append("hello world");
</script>

<!-- AddThisEvent -->
<script type="text/javascript" src="http://js.addthisevent.com/atemay.js"></script>

If that's not possible, it looks like you can also call the addthisevent.refresh(); method to refresh the data.

jsfiddle

<!-- AddThisEvent -->
<script type="text/javascript" src="http://js.addthisevent.com/atemay.js"></script>

<script>
    $("._summary").append("hello world");
    addthisevent.refresh();
</script>

ok, the text is being appended perfectly but it isn't being added to the .ics Calendar event, when I download it. Any idea how to add it? — Alik Rokar, Dec 27 '13 at 15:43
Updated my answer. Is it possible to make your jQuery calls to the `span` elements before embedding the AddThisEvent widget? — Cody Bonney, Dec 27 '13 at 15:49

.append to "Add This Event" widget summary text using jQuery (Syntax Help)

jQuery

HTML

2 Answers2