.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>

Answer 1

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.

Answer 2

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>