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

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>

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.

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>

Related

Why isn't jQuery closest working

I am working on a small system that uses collapsable blocks - for this I am have a css class that toggles on or off depending on the jQuery dependancy.
The code I am using is:
$("#click_me").on("click", function () {
$("#clicked_action").toggleClass("show");
});
And this works, but is not what is needed. What is need is:
$(".collapse-header").on("click", function () {
$(this).closest(".collapse-body").toggleClass("show");
});
But this does not work.
I am not getting any console errors, so any help is apprecated
EDIT HTML value:
<div class="collapse-header" id="click_me">
<span class="float-left">Click me</span>
<span class="float-right"><span class="glyphicon glyphicon-plus"></span></span>
<hr class="hr" />
</div>
<div class="collapse-body" id="clicked_action">
I'm collapsed
</div>
You are looking for
$(this).parent().find(".collapse-body")
About .closest
$(element).closest(selector) is to find the first element which matches selector in traversing up through element's ancestors.
In your case, your elements are at the same level ("siblings") so .closest doesn't work.

How to use text/ng-template script section in jsfiddle?

I'm trying to create a jsfiddle which uses AngularJS to show two calendar controls:
http://jsfiddle.net/edwardtanguay/pe4sfex6/10/
My code works locally.
I've copied everything up to jsfiddle, but it seems that my method of including the template code via a script tag isn't working:
<script type="text/ng-template" id="calendarTemplate">
<div class="header">
<i class="fa fa-angle-left" ng-click="previous()"></i>
<span>{{month.format("MMMM, YYYY")}}</span>
<i class="fa fa-angle-right" ng-click="next()"></i>
</div>
<div class="week names">
<span class="day">Sun</span>
<span class="day">Mon</span>
<span class="day">Tue</span>
<span class="day">Wed</span>
<span class="day">Thu</span>
<span class="day">Fri</span>
<span class="day">Sat</span>
</div>
<div class="week" ng-repeat="week in weeks">
<span class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected) }" ng-click="select(day)" ng-repeat="day in week.days">{{day.number}}</span>
</div>
</script>
I did it this way, of course, because I can't access a file on jsfiddle, or is there a way to do this on jsfiddle:
templateUrl: "templates/calendarTemplate.html",
If not, how can I get jsfiddle to process the text/ng-template script the way it does locally?
Try this:
select "no wrap - in <head>" under Frameworks & Extensions
add the body tag <body ng-app="demo"> under Fiddle Options
Here's the updated Jsfiddle
Explanation
In your JSfiddle the option onDomReady is selected, this means that the Javascript code gets wrapped in an onDomReady window event (see frameworks and extensions in the JSfiddle documentation). In order to allow AngularJS to see the app before the DOM is fully loaded, select a "no wrap" option (in <head> or in <body>).
Next you need is to change the body tag in the JSfiddle options. This is because the directive ng-app used to auto-bootstrap an AngularJS application
is typically placed near the root element of the page - e.g. on the
<body> or <html> tags

Outside HTML Colorbox

I'm trying to get my webpage to use the kind of color box that is demoed on this website here.
http://www.jacklmoore.com/colorbox/example2/. (Outside HTML ajax Example).
In their code for this, they have:
$(".ajax").colorbox();
targeting:
<p>
<a class='ajax' href="../content/ajax.html" title="Homer Defined">
Outside HTML (Ajax)
</a>
</p>
My question is, I want the colorbox to display another page I have, when I click this Icon span on my page.
<span id="pause">
<i class="fa fa-pause"></i>
</span>
I've used on() to make it so when it's clicked it runs a function.
$("#pause").on("click", function() {
game.pause();
});
Where as game.pause(); will create this effect, but I'm not sure how to make it happen, because I am not using a link like the examples.

simple ajax span question

<span name = "menu">
<!-- javascript here -->
<!-- content called via ajax -->
</span>
<span name = "content">
<!-- content called via ajax -->
<!-- changed by buttons from the menu-->
</span>
Does anyone know how to display contents in the content span using ajax generated menu from the menu span? If I'm not wrong, selecting a span can only happen within the same span. Is there something like parentpage.span like mysql?
If I've understood your question correctly, you can access the span as you have it currently using document.getElementsByName("content"). However, it would probably be easier to give the span an id, then do something like this in your AJAX success function:
document.getElementById("spanID").innerHTML = ajaxResponse.responseText;
It's a better idea to give those span's ID that you can hook into:
<span name="menu" id="menu">
<!-- Content called via Ajax -->
</span>
Then you could use
var div = document.getElementById('menu');
alert(div.name);
I would suggest against having JS code run inside the element because IE can puke all over that.

Editable (jQuery In Place Editor): How to make text that was not selected, editable

I am doing some experimenting (so the code below has lots of stuff that I wouldn't normally put in). I have pairs of spans (that have the same ID). In this exampel there are 2 with ID=42 and 2 with ID=43. Currently, when I click on the text of one of the ID=42s, both ID 42s highlight in red.
Using the plugin from http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html, I added
$(function(){$('.test').editable()});
And that allows the text that is selected to become editable. What I want to do, is if ID=42 is clicked, the other ID=42 is editable -- not the one that is clicked. There will only ever be a max of two IDs with the same ID. What can I add to this code to loop through and make the change?
.selected { color:red; }
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.editable-1.3.3.js"></script>
<script type="text/javascript">
$(function(){$('.test').editable()});
$(".testClass").click(function () {
if ( $('.testClass').hasClass('selected') ) {
$('.testClass').removeClass('selected');
}
var thisTarget = $(this).attr('id');
$('#container').find('#'+thisTarget).toggleClass("selected", 1000);
return false;
});
</script>
<p>
<span id="42" class="testClass">
<span class="test">Click me (I need to turn red)</span>
</span>
</p>
<p>
<span id="43" class="testClass">
<span class="test">just another test</span>
</span>
</p>
<p>
<span id="42" class="testClass">
<span class="test">And I become editable</span>
</span>
</p>
<p>
<span id="43" class="testClass">
<span class="test">just another test</span>
</span>
</p>
First off, there's no such thing as two of the same ID. IDs are always unique, meaning that you cannot have more than one on the same page that has the same name. (I'm also a little confused because although you say there are two 42s and two 43s, there is actually only one of each in your code. Make sure you understand that the child <span> does not have an ID of 42 or 43.) PS: IDs/classes cannot begin with numerals.
If you want to click on .test and then manipulate its parent (id=42), that's fairly simple to do:
$('.test').click(function(){
var parent = $(this).parent();
// Manipulate the parent (id=42, 43) however you want here
parent.css('background', '#000');
});
I'm unfamiliar with the plugin you linked, but using this method you should be able to manipulate the parent however you want. However, I don't really see how this should be a problem for you, since you can just as easily attach the onclick event to id=42, or for your purposes, use the following:
$(function(){$('#42, #43').editable()});

Categories

Resources