I am a super beginner to EE and was literally thrust into managing my company's website that is built in EE without training. I'm not a programmer, I'm a designer, so it's been taking me awhile to plug through this. So I might need some dumbed down language :)
I want to create a page that has some Javascript on it. Do I need to create a new template JUST so I can put some javascript on it? And how do I communicate to EE that I want the page I created to go with that template?
I duplicated the page/index template and renamed it to clinician-map (the same name of the page I created in the publisher). EE didn't like that and the page subsequently broke. All I want to do is insert one javascript item, this seems way too inefficient for just one page. Help??
(using EE 1.6.8)
Here is my code from clinician-map template.
{assign_variable:my_weblog="page"}
{assign_variable:my_template_group="page"}
{embed="embeds/html_head" url_title="{segment_2}"}
{embed="embeds/html_styles"}
{embed="embeds/html_scripts"}
<?php include_once("analyticstracking.php") ?>
</head>
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks" limit="1" sort="asc" }
<body class="{url_title}">
{/exp:weblog:entries}
<div id="wrapper">
{embed="embeds/html_headerPlusLeftNav"}
<div id="content">
<div id="contentMain">
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks" limit="1" sort="asc"}
<h2>{title}</h2>
{page_body}
{/exp:weblog:entries}
<!--contactforminfo -->
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
{related_entries id="playa_contentcalloutitems"}
<div class="callout">
<h3>{title}</h3>
{callout_summary}
</div>
{/related_entries}
{/exp:weblog:entries}
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
{related_entries id="playa_contentfeatureditems"}
<div class="featuredContent">
<h3>{title}</h3>
{exp:word_limit total="50"}
{contentfeatured_summary}
{/exp:word_limit}{if contentfeatured_body!=""}<p><a href='{url_title_path='content-featured/'}' class='more'>Read More</a></p>{/if}
</div>
{/related_entries}
{/exp:weblog:entries}
</div>
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
<div id="contentSub">{related_entries id="playa_contentsubitems"}<div class="item {contentsub_bgcolor}">
{if contentsub_contenttype=="Text or Picture with Text"}
<h3>{title}</h3>
{exp:word_limit total="50"}
{contentsub_summary}
{/exp:word_limit}{if contentsub_body!=""}<p><a href='{url_title_path='content-sub/'}' class='more'>Read More</a></p>{/if}
{if:else}
<h3 class="imgHeader">{title}</h3>
{exp:html_strip convert="y" convert_back="none" keep="a,img"}
{contentsub_summary}
{/exp:html_strip}
{/if}
</div>{/related_entries}
{/exp:weblog:entries}
{embed="embeds/html_mailingListSignup"}
</div>
</div>
{embed="embeds/html_footer"}
</div>
</body>
</html>
At glance I can see a couple things that might be confounding you...
You started with a template called 'index' in the 'page' template group.
Looks like the 'page' template you are starting from is meant to display a single entry from the 'page' weblog.
So a request url might look something like this:
http://example.com/page/some_url_title
where 'some_url_title' is the 'url_title' value one of the entries in your 'page' weblog.
Now you have gone and duplicated the index template and called this new template 'clinician-map'.
So you would call an entry through this template at:
http://example.com/page/clinician-map/some_url_title
Now, notice that the first url had 2 segments, while the second had 3 segments?
That's not normally a big deal but the fellow who designed the index template did something that makes it problematic. He is taking the value of segment_2 and passing it through an embed.
So in the first example (index) we are passing the dynamic value "some_url_tile" while in the second example (clinician-map) we are passing "clinician-map". If the embedded template 'html_head' is expecting to get a valid url_title but instead gets the string 'clinician-map' you are likely going to get unexpected results.
Also I don't think we know enough about what you are trying to do to decide if creating a new template is the right approach here. It may be that what you actually need is a new weblog entry or perhaps just a dynamic value inside your existing template.
If it did turn out that a new template is the best approach you could fix the problem I have described by simply replacing segment_2 with segment_3, but I am by no means certain that that is the way you want to go.
I want to create a page that has some Javascript on it. Do I need to
create a new template JUST so I can put some javascript on it?
More specifics would be needed in order to give a solid recommendation but in almost every case, I recommend keeping JavaScript grouped together either in the <head></head> or ideally right before the closing </body> tag if you can get away with it.
Looking at your template code, it appears all the JavaScript is stored in the embeds/html_scripts page. I would add the JavaScript you need to that template. If you only want the JavaScript to appear for certain pages only, I would make use of a conditional (which I'll outline at the end of my answer).
And how do I communicate to EE that I want the page I created to go
with that template?
ExpressionEngine URLs (by default) are assembled as follows:
http://website.com/group/template/url_title
Therefore if you have a page with a url_title of "contact-us", and you wanted that page to use a template in site/pages, you could tell your page to use that template like so:
http://website.com/site/pages/contact-us
That url is obviously fine and dandy for blog articles and such, but it's not that pretty; so ExpressionEngine also enables you to construct "page" based navigation which creates navigation tree based url structures, such as:
http://website.com/contact-us
There are a few third party modules that make it easy to build page navigation such as:
devot-ee.com/add-ons/structure
Using Structure, you specify the default template for each channel and can override the template for each page as well.
I duplicated the page/index template and renamed it to clinician-map
(the same name of the page I created in the publisher). EE didn't like
that and the page subsequently broke. All I want to do is insert one
javascript item, this seems way too inefficient for just one page.
Help??
(using EE 1.6.8) Here is my code from clinician-map template.
There are a number of things I would do different in regards to the template code you provided; however, as a quick fix here's how I would add the one line of JavaScript,
1) Open the embeds/html_scripts template and add the following logic:
{if segment_2 == "my_page_url_title"}
<!-- javascript here -->
{/if}
Note: Here's how segments are determined:
http://website.com/segment_1/segment_2/segment_3
Okay. I ended up just creating a new webblog and new template group and finally it seems like it's working. My javascript is not, but I can figure that out.
Thank you so much for your patience with helping me!
Related
I am working with some Angular and firebase code in which I am requesting some data from firebase and displaying them, simple stuff, but...
I had an array of string which contains some data like so,
[
"Refraction"
"折光"
]
the second one is HTML symbols and when I tried to render it to screen using angular interpolation
this happened
<p _ngcontent-rnr-c24>折光</p>
and when I manually hard code this to HTML file this is what I get
<p _ngcontent-rnr-c24>折光</p>
which is what I wanted...
Any help is appreciated, thank you
Since it's an HTML Symbol you might just be better off doing it like this:
<ng-container *ngFor="let symbols of symbols">
<p [innerHTML]="symbol"></p>
</ng-container>
Sorry if this is trivial or having been asked before using a different terminology. Im relatively new to web programming and specially to play framework.
My scala web template looks like:
#(alarms: List[Alarm], alarmForm: Form[Alarm])
#import helper._
#main("Alarm list") {
<script id="showInfoScript" language="javascript" type="text/javascript">
function showInfoFromAlarm(alarm) {
$("#patientName").text(alarm.Patient.name);
};
</script>
<header>
<h1> EMHT </h1>
</header>
<div class="collumnsContainer">
<div> <section class="alarmListSection">
<h2>#alarms.size() alarm(s)</h2>
<div class="list-group">
#for(alarm <- alarms){
<a href="#" onclick="showInfoScript(#alarm);return false;" class="list-group-item active">
<h4 class="list-group-item-heading">#{alarm.id} of type #{alarm.`type`} </h4>
<p class="list-group-item-text">Callee #{alarm.callee.phoneNumber} ;Patient #{alarm.patient.personalNumber} </p>
</a>
}
</div>
</section></div>
where I basically try to have each button created in the #for(alarm <- alarms) to call the javascript function showInfoScript with the alarm object instance corresponding to that button.
As it is the code fails. I understand that the problem is that the object in the for loop is a scala object and it need some sort of conversion to be passed to the javascript function.
But what would be the simplest way to convert it to something understandable by the javascript? I thought of json and I've read about doing a #Json.toJson(alarm), but I got an error that there were no serializer and that Id need to "implement an implicit Writes or Format for this type".
You should make sure you have a clear grasp about the difference between the Scala code and the JavaScript code, the Scala code is executed serverside to render html, that html is sent to the client where the javascript is executed. If you want to pass data from your scala code to JavaScript you basically have two options:
serialize the data inside your html document, for example as JSON, but you could also do it as data-attributes on tags, script blocks with function calls etc. that you generate with your play template.
provide a separate http url where you can load the data with a request from you JavaScript
The error you get when you try to use Json.toJson is that there is no way for play to know how you want an instance of Alarm mapped to JSON, so if you want to do it like that you need to define a Writes[Alarm] that play can use. Look at the play docs about json for more information about that. (http://www.playframework.com/documentation/2.2.x/ScalaJson)
I am learning backbone.js and I have seen some examples like this one.Here the user has not written much html codes inside the editor.html.Only 4 lines of code.But for colour change,size change etc he has done inside editor.js
Please help me understand what all codes we need to keep inside .html file
<div id="page" style="width:2000px;height:2000px;">
<button id="new-rectangle">New Rectangle</button>
<button id="new-circle">New Circle</button>
</div>
You should aim to put all your html in .html file(s). As an app grows, it will help you to keep them separate. The example you link to is a 'simplified' version - this is not how you would structure things in an actual app. You would load html from templates in the render function. A (though this is also simplified as I am relying on script tags) pattern would be:
HTML file:
[...SOME HTML...]
<script type="text/html" id="template-contact">
<div class='contact'>
<h1>Here's my template code</h1>
<strong>name</strong>
<span>email</span>
</div>
</script>
Then in your Backbone view render function:
render: function() {
template: _template($('#template-contract').html(),
this.$el.html(this.template());
return this;
}
Then somewhere else in your Backbone code you create a new instance of the view and render it.
var example = new view_name();
example.render(); //This loads the html template
If you need to dynamically load the html from a server, you can use underscore (or whichever template engine you are using) tags in your template '<%>' and use models. This is best explained in Addy Osmani's book Developing Backbone.js Applications which, incredibly, is free. Here's the link to the relevant section
Whatever you wants to display on the browser you can keep it in .html file and logic to update the dom on run time should be in .js file.
I am new to MVC-style javascript libraries, so pardon me if this question is too basic. I'm trying to write a Single-Page Application entirely in jQuery and agility.js. The examples given in the agility.js documentation consist entirely of adding html elements to the document root. Question: Is there a 'Best-Practices' way to assemble a page by components.
Here is a rough outline of my html app:
<html>
<head> ... </head>
<body>
<header> ... </header>
<div id=PageHolder>
<div id=AppPane_1></div>
<div id=AppPand_2></div>
</div>
<footer> ... </footer>
</body>
</html>
Within the 'AppPane' divs will be the content of the application.
Okay, given all of this, I'm not asking what can I do, but I'm asking what should I do.
I see from the documentation and my research that I have 3 choices:
create my page composition from atomic agility objects and assemble them in a jQuery document ready block. $$.document.append(Foo) works for the root element, but I could not figure out how to add Foo's children to foo.
Use one (very large) agility object which lays out the basic static html from above and append controls and whatnot to that using the controller functions (which I havn't been able to get to work either)
Use one root agility object and append all the children onto it using view (somehow, I havn't been able to get that to work either.)
Which of these is best, and what is the syntax involved? Thanks in advance, any guidance in assembling html components into a cogent agility app would be much appreciated.
http://jsbin.com/ojenon/1/
In my opinion, the best way to organize your page modules is to save individual client-side templates in script tags in the head:
<html>
<head>
<script type="text/template" id="template1">
<b>Some <abbr>HTML</abbr> template</b>
</script>
<script type="text/template" id="template2">
<b>Some <abbr>HTML</abbr> template</b>
</script>
</head>
...
You could even choose to use a template language, such as jQuery.template or handlebars.js, to facilitate logic, variable interpolation, etc.
Then, in your your controller, you would load the html contents of these templates' script tags from the DOM and copy them into your destination div (#PageHolder) as appropriate.
An alternative to this technique would be storing your templates in a literal JS object in the head:
<script type="text/javascript">
var Templates = {
template1: "<b>Some <abbr>HTML</abbr> template</b>"
...
}
</script>
This is just the beginning. There are many more options, such as pre-compiling your templates, subdividing your templates to avoid redundant template compilations, etc. From a structural standpoint, maintaining your templates in a dedication location will help you scale your single page app.
It's horses for courses I guess, but my preference is to have the template code alongside the Agility code so that it's all visible together. I don't particularly like seeing the html and styling inside the view object, but you can set these up in other variables and reference them in the view like this:
var frmMainTemplate = '<div>' +
'<input type="text" data-bind="name" />' +
'<p>You typed <span data-bind="name" /></p>' +
'</div>';
var frmMainStyle = '& span {background-color:#888; color:#fff;}';
var frmMain = $$({
model: {name:''},
view: {
format: frmMainTemplate,
style: frmMainStyle
},
controller: {}
});
$$.document.append(frmMain);
I'm trying implement a way to recursively template using jsRender. The issue is, my data object has a unary self-referencing heirarchy which requires recursive looping to show all of the attributes. The example here is a forum post which can contain any number of reply posts. Each reply post can contain any number of children posts and so on. I have the following code working except for the recursion part. I could only find one remote reference to this via the Googles, so here is what I have thus far:
<script id="forumPostsTemplate" type="text/x-jsrender">
<article class="forumPost">
<header class="forumPostHeader">{{:PostSubject}}
<div class="info">By: Some Person, {{:CreatedDate}} Flag as innapropriate </div>
</header>
<div class="content">
{{:PostContent}}
{{for Replies}}
{{:Replies tmpl="#forumPostsTemplate"}}
{{/for}}
</div>
</article>
</script>
Does anyone have any experience with this sort of functionality? I am currently running the most recent version of jsRender if that helps.
Per this example for jsRender, does it work to call your template like this instead?
https://github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/06_template-composition.html
{{for Replies tmpl="#forumPostsTemplate"/}}
These three different versions of a tree tag control illustrate exactly that kind of recursion:
http://www.jsviews.com/#samples/tag-controls/tree