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
Related
According to demo here itself: http://htmlpreview.github.io/?https://github.com/fatlinesofcode/ngDraggable/blob/master/example.html
Drag and drop is not possible at present using 0.1.11 version.
My code implementation looks as below:
<uib-accordion-group is-open="category.open"
name="category-{{category.name}}"
ng-drop="true"
ng-drop-success="vm.onCategoryDropComplete($index, $data)"
ng-repeat="category in vm.categories track by $index">
<uib-accordion-heading>
<span style="display: none;">{{catIndex = $index}}</span>
<div class="main-heading" id="category-name-{{catIndex}}"
ng-click="vm.toggleOpen($event, false, category);">
<span class="drag-and-drop" ng-drag="true" ng-drag-data="category">{{category.categoryName}}</span>
<span class="text-muted pull-right glyphicon" id="accordion-123"
ng-click="vm.toggleOpen($event, true, category);"
ng-class="{'glyphicon-chevron-down': category.open,
'glyphicon-chevron-right': !category.open}" aria-hidden="true">
</span>
</div>
</uib-accordion-heading>
</uib-accordion-group>
I see somechanges has happened in 0.1.12 version, need its implementation example and also i am not able to download as its throwing error as the version 0.1.12 is not available.
Please refer the image below:
http://htmlpreview.github.io/?https://github.com/fatlinesofcode/ngDraggable/blob/master/example.html
Please find the plunkr link fore more info: http://plnkr.co/edit/BmTkM96CeelEa2Uml5Vz?p=preview
Not able to drop at last Dropzones from the above plunker.
Is there any alternative quick solution to overcome from it or am i missing the usability from the ngDraggable plugin itself
I was able to resolve by adding ng-drag-scroll verticalScroll="true" to use this on your draggable elements
Here is the updated plunkr: http://plnkr.co/edit/IWym7S3T0NwtInQRLjzJ?p=preview
Describing a scenario:
I am going through the code mentioned below.B asically I am trying to figure out how to program so that
when a user clicks on "Use Template" button , it gets inserted into an editor.
Page 1:
There are lot of templates present
When a user clicks on the "Use Template" button on , it gets inserted into an editor that is present in
the next page (Page 2).
Please find the code snippet below for the first two templates I am going through:
<div id="templatesWrap">
<div class="template" data-templatelocation="templateone" data-templatename="Template ONE" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templateone&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_010.jpg" alt="templateone">
</a>
</span>
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
</div>
</div>
<div class="template" data-templatelocation="templatetwo" data-templatename="Template TWO" data-templateid="" >
<div class="templateContainer">
<span>
<a href="https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" title="Use Template">
<img class="thumbnail" src="templatefiles/thumbnail_011.jpg" alt="templatetwo">
</a>
</span>
<div class="templateName">Template TWO</div>
<p>
Use Template
</p>
</div>
</div>
And so on ....
How does the link "https://app.abc.com/pqr/core/compose/message/create?token=c1564e8e3cd11bc4t546b587jan31&sMessageTemplateId=templatetwo&sHubId=&goalComplete=200" is inserting the template into the editor which is located on the next page? I haven't understood the token part and lot's of ID's present in the link
which I think are thereason behind inserting the template.
Has anyone come across such link before? Please advise.
Thanks
MORE CLARIFICATIONS:
Thanks for your answer.It did help me somewhat. I have few more questions:
Basically, I am using TinyMCE 4.0.8 version as my editor. The templates, I am using are from here:
https://github.com/mailchimp/email-blueprints/blob/master/templates/2col-1-2-leftsidebar.html
Some questions based on "Tivie" answer.
1) As you can see in the code for "2col-1-2-leftsidebar.html " it's not defined inside <div> tags unlike you defined it in <div> tags. Do you think that I can still
use it using "2col-1-2-leftsidebar.html " name?
2)I believe,for explanation purpose, you have included
`"<div contenteditable="true" id="myEditor">replaced stuff</div>`
and
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
in the same page. Am I right? ( I understand you were trying to make an educated guess here, hence
just asking :) )
In my case, I have a separate page, where I have written code for buttons just like you wrote in editor.html like the following:
<button id="btn">Load TPL</button>. My button is defined inside <div class="templateContainer">.
Also, my templates are defined in a separate folder. So, I will have to grab the content(HTML Template), from
that folder and then insert into TinyMCE 4.08 editor. (Looks like two step process). Could you elaborate
on how should I proceed here?
More Question As of Dec 27
I have modifier my code for the template as follows:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
Please note, I have added an additional id attribute for the following purpose.
If I go by the answer mentioned in the Tivia's post, is the following correct?
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
My editor is defined like the following on Page 2 (Editor Page).
<div class="field">
<textarea id="sTextBody" name="sTextBody" style="width:948px; max-width:948px; height: 70%"></textarea>
</div>
I am confused, like, the script tag I have defined is in Page 1 where I have defined all the template related code
and the Page 2(Editor) page is a different page. It's simply taking me to Editor page (Page 2) and hence not working.
Please advise where I am wrong.
Thanks
MORE QUESTIONS AS of Jan 2
The problem Iam facing is as follows. Basically, for first template , I have the following code.
Code Snippet #1 where "Use "Template" button is present:
<div class="templateName">Template ONE</div>
<p>
Use Template
</p>
And the function suggested in the answer is as follows:
Code Snippet #2 where Editor is present:
<script>
$("#temp1").click(function() {
$("#sTextBody").load("FolderURL/template.html");
});
</script>
Since, I believe I first need to reach to that page after user clicks on "Use Template" button, where the editor is located, I have defined Code Snippet #1 on Page 1 and have defined the Code Snippet #2 and <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> as the very first two script tags in the Page 2 ( Editor Page). But still when I click on "User Template" button on Page 1, it's just letting me to next page and not loading the template into the editor.
Am I doing something wrong here? Please advise.
P.S. The problem I feel is somehow the click function on Page 2 is not getting activated with the temp1 id button mentioned on Page 1.
Thanks
Well, one can only guess without having access to the page itself (and it's source code). I can, however, make an educated guess on how it works.
The URL params follows a pattern. First you have a token that is equal in all templates. This probably means the token does not have any relevance to the template mechanism itself. Maybe it's an authentication token or something. Not relevant though.
Then you have the template identification (templateOne, templateTwo, etc...) followed by a HubId that is empty. Lastly you have a goalComplete=200 which might correspond to the HTTP success code 200 (OK).
Based on this, my guess would be that they are probably using AJAX on the background, to fetch those templates from the server. Then, via JScript, those templates are inserted into the editor box itself.
Using JQuery, something like this is trivial. here's an example:
template.html
<div>
<h1>TEST</h1>
<span>This is a template</span>
</div>
editor.html
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div contenteditable="true" id="myEditor">
replaced stuff
</div>
<button id="btn">Load TPL</button>
<script>
$("#btn").click(function() {
$("#myEditor").load("template.html");
});
</script>
</body>
</html>
Edit:
1) Well, since those templates are quite complex and include CSS, you probably want to keep them separated from you editor page (or the template's CSS will mess up your page's css).
However, since you're using TinyMCE, it comes with a template manager built in, so you probably want to use that. Check this link here http://www.tinymce.com/wiki.php/Configuration:templates for documentation.
2) I think 1 answers your question but, just in case, my method above works for any page in any directory, provided it lives on the same domain. Example:
<script>
$("#btn").click(function() {
$("#myEditor").load("someDirectory/template.html");
});
</script>
I recomend you check this page for the specifics on using TinyMCE http://www.tinymce.com/wiki.php/Configuration:templates
EDIT2:
Let me explain the above code:
$("#btn").click(function() { });
This basically tells the browser to run the code inside the brackets when you click the element with an id="btn"
$("#myEditor").load("someDirectory/template.html");
This is an AJAX request (check the documentation here). It grabs the contents of someDirectory/template.html and places them inside the element whose id="myEditor"
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>
As I'm doing some jQuery html replacement on a responsive design, it was suggested that I use the addthis.toolbox method instead of the init method from AddThis.
Even though my code is specifying the 32x32 pixel buttons they're getting displayed with the bottom half of the graphic cut off and the alt text displaying. Here's the code:
<div id="zazoo" class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook_follow" addthis:userid="example"></a>
<a class="addthis_button_twitter_follow" addthis:userid="example"></a>
<a class="addthis_button_google_follow" addthis:userid="xx"></a>
<a class="addthis_button_youtube_follow" addthis:userid="example"></a>
</div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=example&async=1">
</script>
<script type="text/javascript">
addthis.toolbox("#zazoo");
</script>
I even made a stripped down version that's just the code and still see the issue with the cut off buttons. For the AddThis users out there...can you see a problem with the code or is a system issue on AddThis' end? I can't see any issue with the code itself, just the way it's getting displayed.
The addthis.toolbox() method only works after you've called the addthis.init() method if you're using the async flag. Change your code to this:
<div id="zazoo" class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook_follow" addthis:userid="digitalhit"></a>
<a class="addthis_button_twitter_follow" addthis:userid="digitalhit"></a>
<a class="addthis_button_google_follow" addthis:userid="108569913685983365364"></a>
<a class="addthis_button_youtube_follow" addthis:userid="digitalhit"></a>
<a class="addthis_button_rss_follow" addthis:userid="http://feeds.feedburner.com/DigitalHitEntertainmentNews"></a>
</div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=dheian&async=1"></script>
<script type="text/javascript">
<!--
addthis.init();
// -->
</script>
The addthis.toolbox() method is only used to render the buttons after the first initialization.
I have the following code in my javascript:
var context = {
"title": section_title
};
var section_template = $("section-template").html(),
template = Handlebars.compile(section_template);
alert("yeah!");
alert(context.title);
var final_section_content = template(context);
alert("WHat?");
The alerts() are there purely for debugging purposes.
section_template is correctly populated with the template that I prepared
template has a function as its value so I assume the compilation went well too.
The "yeah!" and the title of the context are displayed correctly. However, something seems to be going wrong in the template(context); execution. The "What?" alert is never raised, and thus the HTML content is never set (later in the program). Later in the program, I use the final_section_content as the value for the jQuery before() function. But the "What?" itself is not being executed. Any idea why?
Template Code:
<script id="section-template" type="text/x-handlebars-template">
<div class="row-fluid">
<div class="span8 offset1">
{{! This will contain the section requirements}}
<div class="section-title">
<span class="add-on">
<i class="icon-plus-sign"></i>
</span>
<h2>
{{title}}
</h2>
<i class="icon-list" data-placement="bottom" data-title="Create sub-section"></i>
<i class="icon-pencil" data-placement="bottom" data-title="Edit section title"></i>
<i class="icon-trash" data-placement="bottom" data-title="Delete section"></i>
<div class="subsection">
{{! Dummy container for subsection}}
</div>
</div>
</div>
<div class="span2 offset1">
{{! This will contain the total score for the section}}
</div>
</div>
</script>
Make sure that the element containing the template code is loaded prior to querying it's contents using $('#section-template').html(). See Why is browser returning error "TypeError: this._input is null" in Firefox (and similar in Chrome) when using handlebars.js? for more details.