Embedding a script with a jsrender template - javascript

I would like to use a variable from my jsrender template in order to produce a snippet of javascript, but I can't figure out how to place a <script type="text/javascript"> within my <script id="data-item-tpl" type="text/x-jsrender">
Hopefully the below is fairly clear. The below code produces an Uncaught SyntaxError. If I remove the tags from the embedded script, then it is simply printed onto the page as text.
In the code below, I am trying to generate a div with the id 'chartId', and then a script which will fill that div with content, via the MyChart object.
<script id="data-item-tpl" type="text/x-jsrender">
<div class="item">
<div class="graphs">
<ul class="thumbnails">
{{for graphs}}
<li><div class="thumbnail"><img src="{{html:url}}" width="190" height="120" /><p>{{html:graphTitle}}<br />{{html:value}}</p></div></li>
{{/for}}
<!-- Here we insert both the placeholder for, and the javascript to populate charts -->
<li><div id="{{html:chartId}}" style="width:120;height:190px;"></div></li>
<script type="text/javascript">
var chartObj = new MyChart("{{html:chartId}}");
chartObj.render();
</script>
</ul>
</div>
...
</script>

I just did a little playing around and was able to get it working like this:
{{:"<scr" + "ipt type="text/javascript">"}}
var chartObj = new MyChart("{{html:chartId}}");
chartObj.render();
{{:"</scr" + "ipt>"}}
Maybe not the most elegant solution, but when I put an alert in there, it fired.

Related

Javascript - Changing Object data source

I'm not sure if this is possible or not.
I wanted to make a same header and footer but with different content pages. My current course only covers HTML, JS, CSS, and JQuery.
Here is my current body, simplified:
<div id="header">
<ul>
<li>Content One</li>
<li>Content Two</li>
</ul>
</div>
<div id="contents">
<object id="change" data="contentOne.html" type="text/html" height="100%" width="100%">
</object>
</div>
<div id="footer">
<p>The footer</p>
</div>
Inside the head are something like this:
<head>
<script>
function contentOne(){
document.getElementById("change").data = "contentOne.html";
}
function contentTwo(){
document.getElementById("change").data = "contentTwo.html";
}
</script>
</head>
The problem is, that I can't get the content to change. It looks like it would work but, for example, clicking on ContentTwo, doesn't load contentTwo. The page remains the same.
You shall use setAttribute for native JS or .prop for jquery:
function contentOne(){
// native
var element = document.getElementById("change");
element.setAttribute("data", "contentOne.html");
// jquery
$("#change").prop("data","contentOne.html");
}
Make sure you properly close the attribute values, height="100% width="100%> is wrong, also the object element shall be closed with </object> :
<object id="change" data="contentOne.html"
type="text/html" height="100%" width="100%"></object>

how to add this class using .append()

I have the following html code:
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
Home
</li>
</ul>
</nav>
I need to add the following code before the </ul> tag:
<li class="">
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript">xMinicart("style=","layout=Mini"); </script>
</li>
However, to do so, I have to use jquery's append(). But I don't know the correct way to add the script type="text/javascript", src="https://app.ecwid.com/script.js?4549118"></script> and <script type="text/javascript">xMinicart("style=","layout=Mini"); </script> inside the append().
Thanks!
EDIT 1:
So you can see what I'm trying to do:
what I need is the following http://jsfiddle.net/u3NKD/5/ The results are two links. However, the second link (the one which says "sacola de compras), must be done with append(), not html. That's what I'm trying to do
EDIT 2:
I tried the code in this Jsfiddle http://jsfiddle.net/u3NKD/7/ and it works perfectly in Jsfiddle, but it does not work in my Squarespace website.
The code in my website is the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script>
window.onload=function(){
$('nav ul').append('<li id="hello"></li>');
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
});
}
</script>
Any idea why it doesn't work in squarespace?
Thanks!
Have you tried using something like
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini");
});
to load the script and then activate the xMinicart object afterwards? I can't really understand why you're trying to do this on the fly without more context so that's the best suggestion I can offer.
https://api.jquery.com/jQuery.getScript/ (Load a JavaScript file from the server using a GET HTTP request, then execute it.)
If you really need to place it into that particular spot, then Try this: create a separate html file in the same directory, call it something like myli.html,
then you place this into it:
<ul id="myli">
<li class="">
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript">xMinicart("style=","layout=Mini"); </script>
</li>
</ul>
Then in your original page where you want this appended you do this, you have to create a dummy container like this
$('<div/>', {id:'dummycont', css: {display: 'none'}}).appendTo('body');
then
$('#dummycont').load('myli.html #myli, function(){
var li = $(this).find('#myli').html();
$('nav ul').prepend(li);
});
So basically this load event will load that particular #myli in the myli.html into a temp dummy container. Then you grab grab that content and prepend it to the target ul.
Let me know if that works for you. I havent tested it yet.
What you are doing is that you are just appending the script as a Text or innerText in the HTML DOM structure.
Call the Js using the getScript or Ajax call. (Ajax call with return type script is a getScript)
And in its return function Call the xMinicart function.
In you Dom just Append a 'li' with a specific id and in the getScript success function pass the id to xMinicart function/
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
Home
</li>
<li id="hello"></li>
</ul>
</nav>
Your Js call should be
$.getScript("https://app.ecwid.com/script.js?4549118", function(){
xMinicart("style=","layout=Mini","id=hello");
});
This will load the cart on the page.
Check the Jsfiddle here http://jsfiddle.net/u3NKD/6/

write html when a href is clicked

In an unordered list i have some a's with some href's. When clicked I want some html from an external file written. I cannot use any server side languages since it only gonna be running localy.
The structure of my file is:
<body>
<ul>
<li><a href="#">item1</li>
<li><a href="#">item2</li>
<li><a href="#">item3</li>
<li><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
Thanks in advance
Since it looks like you're trying to load a script, there's a better way to do that, by using jQuery.getScript():
$('#triangle').click(function() {
$.getScript("js/triangle.js");
});
Also, as arieljuod points out, you haven't actually loaded jQuery in your HTML file. You'll need to do that to use it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
(Or pick your favorite jQuery version and CDN; this is one of many.)
You don't want document.write().
You probably want this instead, depending on where you want the new HTML to go:
$('head').append('<script src="js/square.js"></script>');
You can listen for a click on an item and based on that trigger an ajax call for the appropriate file. Load the contents of that file into your content div within the success callback.
Happy to walk you through sample code live over here: https://sudonow.com/session/525cb34035e089113700000a
Pasting the content of the code editor here:
<body>
<ul>
<li id="item1" class="item"><a href="#">item1</li>
<li id="item3" class="item"><a href="#">item2</li>
<li id="item4" class="item"><a href="#">item3</li>
<li id="item5" class="item"><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
//JS
//convert some file content to html
var genHtmlContent = function(content){
//do something here depending on how data is stored e.g. we could just return an html string from some keyvalue json
return content.htmlContent;
}
//Use javascript to detect a click on a list item and grab the appropriate content
$("item").click(function(event){
var selectedId = event.target.id;
var url = "http://www.mysite.com/" + selectedId + ".json";
$.get(url, function(content) {
var htmlContent = genHtmlContent(content);
$("#content").val(htmlContent);
})
})
//sample json file on server
//item1.json
{htmlContent: "<div>I am Item 1</div>"}
A quick and easy solution will be an iframe. Add as many iframes as you want, each having a different url. Give them a common class and hide them using CSS or jQuery. On clicking a link, prevent default and show the corresponding iframe, like;
<ul>
<li><a href="#" id="item1">item1</li>
</ul>
<div id="content">
<iframe class="iframes" id="iframe1" src="http://www.page1.com"></iframe>
</div>
and in your JavaScript, add this;
$('.iframes').hide();
$('#item1').click(function() {
event.preventDefault();
$('#iframe1').show();
});

How to change frame source without reloading the page

I am creating a Template Site, i want to change the content of the IFrame
based on the link clicked in javascript,
but the error i get is if i change the 'src' attribute of the iframe
the page gets reload.
So my question is
how to change iframe content without reloading the Page? below is my code
// HTML part
<li class="inside first">
HOME
</li>
<li class="inside">
PRODUCTS
</li>
<li class="inside">
SOLUTIONS
</li>
<li class="inside">
SERVICES
</li>
<li class="inside">
SUPPORT
</li>
<div id="mainContent">
<iframe
src=''
width="100%"
height="100%"
name='content'
id='content'>
</iframe>
</div>
//Javascript part
<script type="text/javascript">
var index=0;
var link_list= new Array('homepage.html','product.html','solution.html',
'services.html','support.html','event.html',
'partner.html','company.html');
var frame=document.getElementById('content');
frame.src=link_list[index];
function clicked(key)
{
// The following line is redirecting the page
frame.src=link_list[key];
return false;
}
</script>
Just write hrefs for those links and add attribute target="content".
This can be done w/o javascript at all.
Your link_list is wrong, JavaScript is case-sensitive, it's new Array(), not new array():
var link_list = new Array(...);
Use the array literal [] and you're fine:
var link_list = ['homepage.html','product.html','solution.html',
'services.html','support.html','event.html',
'partner.html','company.html'];
If you check your browser's JavaScript error console it's easy to find such errors:
[09:16:09.208] array is not defined # file:///.../temp.html:34

Javascript: Dynamically created html elements referencing an instantiated object

(For further background, this relates to the same piece of work as a previous question)
I'm creating a JavaScript based webchat system using jQuery to make life much easier. All the webchat JavaScript code is in an external js file, which is then referenced and instantiated by the html page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WebchatV3</title>
<script type="text/javascript" src="/JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="WebchatV3.js"></script>
<link rel="stylesheet" href="WebchatV3.css" />
</head>
<body>
<div id="WebchatSurround">
<div style="float:right;width:300px;">
<div id="MembersBox">
Members
<ul id="MembersList">
</ul>
</div>
<div id="QuestionsBox">
Questions
<div id="QuestionsList">
</div>
</div>
</div>
<div style="margin-right:310px;" id="ChatBox">
<div id="ChatData">
<ul id="ChatDataList"></ul>
</div>
<div id="ChatInput">
<div id="ChatInputCharRemainText">Characters remaining <span id="ChatInputCharRemain"></span></div>
<input type="text" maxlength="1000" id="ChatInputTextbox" />
</div>
</div>
</div>
<script type="text/javascript">
var webchat;
webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false);
</script>
</body>
</html>
In the JavaScript there is code to dynamically create a list of active chat members from a JSON query. This code creates a series of html DIVs and then injects this html into the 'QuestionsList' DIV present in the html.
Now here's the question :)
Within each question are elements with JavaScript onclick events that allows actions to be taken against the question shown. How can I create the onclick code without hard coding the reference to 'webchat' - is there an elegent and acceptable way?
My initial thoughts are to pass in the instance name of the 'webchat' instance when it's created, so it can then be used inside the JavaScript when creating dynamic JavaScript...
Example of code with hard coded reference to instantited 'webchat':
<div id="QuestionsBox">
Questions
<div id="QuestionsList">
<div class="Question">
<div class="QuestionInnerControls">
<img src="images/arrow_up.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,1);" >
<img src="images/arrow_down.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,-1);">
<img src="images/delete.png" alt="" class="ControlIcon" onclick="webchat.Questions.Delete(1);">
</div>
<div class="QuestionInnerText">
1) <b>Peter Bridger</b>: This is the question text
<br style="clear: right;">
</div>
</div>
</div>
</div>
While I think the live idea will most likely work for you, my initial thought was to create a template div in the initial stages of the code, and then use the clone(true) method to create dynamic copies of the template and its methods. Then within the javascript "loop" each copy could be customised as needed before being appended into the DOM.
http://docs.jquery.com/Manipulation/clone#bool
Your description is a bit in depth and I hope that I am following it correctly but it seems to me that you are trying to attach a click event(s) to all of the items as well as all of the items that will be created in the future. Rather than specifying the onclick event when creating the you should use the new jQuery feature that came out in jQuery 1.3+ that allows you to specify an event for every element that matches the Selector... even future elements like the ones you will be adding via json.
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
http://docs.jquery.com/Events/live
Thanks for your input everyone, I've decided to pass in the instance name of the Webchat when instancing it:
var webchat;
webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false , 'webchat' );
Then inside the JavaScript I'm referencing the passed in referenced when dynamically building html with JavaScript in it:
onclick="' + this.instanceName + '.popupMemberDetailsShow(' + this.Members.collection[i].memberId + ');

Categories