I'm assuming I putting this in the wrong area or making some other flaw due to my lack of understand as I'm still learning Meteor.
I have a Meteor application working with data, etc. and all is well on that front. I have a number of logos created for this application that I want to share with some others to get feedback on which they prefer.
All the logo files are named logo1.png, logo2.png, logo3.png, etc. It's the perfect time for a quick and easy for loop (because I know how many files I have) that just concatenates the loop variable onto the word logo and then the .png.
So on my local computer I throw up an HTML file with the following that works exactly how I need it to.
<script type="text/JavaScript">
for (i = 1; i < 7; i++) {
logoName = '';
logoName += "logo" + i + ".png"
document.write ("<img src=" + logoName + " height=200px>");
}
</script>
Then I put into my Meteor main.html file:
<body>
{{> header}}
<script type="text/JavaScript">
for (i = 1; i < 7; i++) {
logoName = '';
logoName += "logo" + i + ".png"
document.write ("<img src=" + logoName + " height=200px>");
}
</script>
<div class="text-center">
{{> invList}}
</div>
</body>
The problem is my Meteor application is catching that "<" in the "i < 7" statement and expects there to be a tag.
So I get the following error:
While building the application: client/main.html:10: Expected tag name
after < ..."> for (i = 1; i < 7; i++) {
...
I'm probably missing something here about where code needs to be placed or something but I've gone through Meteor docs, DiscoverMeteor, and done some Googling in addition to checking this site and I just haven't found how to make Meteor ignore this bit of javascript so it doesn't catch that less than sign and expect anything.
Should I just put this code in /public somehow? If so I'm not sure how I would call it from main.html so it places the images where I want them.
As you already know, you shouldn't write to HTML like that. Instead, put your loop in a helper.
HTML:
<body>
{{> images}}
</body>
<template name="images">
{{#each logos}}
<img src="{{url}}" class="logo"/>
{{/each}}
</template>
JS:
Template.images.logos = function() {
return _.map(_.range(1, 7), function(idx) {
return {url: 'logo' + idx + '.png'};
});
};
CSS:
.logo {
height: 200px;
}
I don't think that it's a good idea to embed a script in the html when you are using Meteor. If you still want to do so, remember to escape some symbols. To correct your script, use following instead:
<script type="text/JavaScript">
for (i = 1; i < 7; i++) {
logoName = '';
logoName += "logo" + i + ".png"
document.write ("<img src=" + logoName + " height=200px>");
}
</script>
Related
I'm trying to add parameters to an onclick function when generating HTML via javascript. When I inspect the code it is putting a quotation mark in the onclick function's parameter.
var lengthOfCats = ArrayOfCategories.length;
for (var a = 0; a < lengthOfCats; a++) {
$("#CatTable").append("<div class='better-table-cell'>" + ArrayOfCategories[a].Name + "</div>\
<div class='better-table-cell'>" + ArrayOfCategories[a].DepartmentName + "</div>\
<div class='better-table-cell'>" + ArrayOfCategories[a].Active + "</div>\
<div class='better-table-cell'>\
<button onclick=OpenUpdateCat(" + ArrayOfCategories[a].CategoryID + "," + ArrayOfCategories[a].Name + ");" + ">Edit</button>\
</div>");
Here is an image of the HTML that is getting generated for the edit button.
The browser is normalising the HTML and putting quote marks around the attribute value.
The problem is that because the attribute value includes spaces, and you didn't put the quote marks in the right spots yourself, the attribute value finishes in the middle of the JavaScript.
The next bit of JS is then treated as a new attribute.
Mashing together strings to generate HTML is fundamentally a bad idea. Ensuring all the right things are quoted and escaped is hard.
Use DOM to generate your HTML instead.
It is a little longer, but clearer and easier to maintain in the long run.
var $cat_table = $("#CatTable");
var lengthOfCats = ArrayOfCategories.length;
for (var a = 0; a < lengthOfCats; a++) {
$cat_table.append(
$("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].Name)
);
$cat_table.append(
$("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].DepartmentName)
);
$cat_table.append(
$("<div />").addClass("better-table-cell").text(ArrayOfCategories[a].Active)
);
$cat_table.append(
$("<div />").addClass("better-table-cell").append(
$("<button />").text("Edit").on("click", generate_edit_handler(ArrayOfCategories[a].CategoryID, ArrayOfCategories[a].Name))
)
);
}
function generate_edit_handler(cat_id, name) {
return function () {
OpenUpdateCat(cat_id, name);
};
}
At the moment i'm trying to read .txt files which could contain ASCII arts and display them in my HTML document with JQuery. Simple text is displayed right but i have formatting problems with the arts.
How can i fix this ?
$(document).ready(function(e) {
$.get('/test/posts/header.txt', function(data) {
var lines = data.split('\n');
for (var i = 0, len = lines.length; i < len; i++) {
$(".stream").append('<div class="line"><p class="header">' + lines[i] + '</p></div>');
}
});
});
This is because the excess spaces are getting stripped. Either you replace all the spaces with   in every line with simple ... + lines[i].replace(/ /g,' ') + ..., or you wrap everything in <pre>...</pre>:
'<div class="line"><p class="header"><pre>' + lines[i] + '</pre></p></div>'
HTML
<pre id="asciiart"></pre>
I see you are using jquery:
$("#asciiart" ).load( "/test/posts/header.txt" );
You can also use css
.line{
white-space: nowrap;
}
or in your case
<div class="line"><p class="header"></div></div>
.line>.header
I think that's right.
Good Luck
edit: Problem solved! I was modifying the page before it was loaded so the script didn't actually do anything. I fixed it now and it works. Thanks for the help, I'll have to chalk this one up to being new to jQuery and it's weirdness.
Long story short I'm trying to make a webpage that dynamically takes Article titles, thumbnail images, descriptions, and links to them, and creates a nicely formatted list on the page. I'm trying to accomplish this in jQuery and HTML5.
Here is the sample data that I'll be using to dynamically populate the page. For now formatting isn't important as I can do that later after it works at all.
<script>
var newsTitles = ["If It Ain't Broke, Fix It Anyways"];
var newsPics = ["images/thumbnail_small.png"];
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/> Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."];
var newsLinks = ["it_aint_broke-gill_popson.html"];
var newsIndex = 0;
var newsMax = 1;
The section of code where I'm trying to use the contents of the arrays above to dynamically fill elements.
<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article">
<h1>Articles</h1>
<!-- the column for each news peice add an element with the thumbnail, the title and teh desc -->
<script>
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href="" newsLinks[i] + "">" + newsTitles[i] + "</h3>", "<img src=""newsPics[i] + "">","<p>" + newsDesc[i] + "</p>", ); $("div").append("hello");
}
</script>
<div id="articleList">
HELLO
</div>
</td>
Here is what it ends up looking like, I can post more info if needed as I am aware this may not be clear enough to fully explain my problem but I am unable to determine that. Thank you in advance.
try this
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href=""+ newsLinks[i] + "">" + newsTitles[i] + "</h3>, <img src=""+newsPics[i] + "">, <p>" + newsDescs[i] + "</p>" ); $("div").append("hello");
}
Concatation issue + typo for newsDescs
The following string is invalid html and is missing a +
"<h3 href="" newsLinks[i] + "">"
You need to use proper quotes for html attributes, not "e;
Try
"<h3 href='" + newsLinks[i] + "'>"
OR
"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote
Personally I prefer opening/closing html strings with single quotes but either will work
Note tht you should be getting a syntax error thrown in dev tools console which would have helped you locate problems
for(i = 0; i < newsMax; i++) {
$("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>");
$("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>" );
}
I'm trying to parse an XML in a server and getting that XML's element image URL and then showing it into my document. And to be sure Im also putting some condition where if XML isn't parsed then alert me, but its not alerting me since the parsing is a success. The problem is im not getting anything when load the function.
var xmlDoc = Obj.responseXML;
if(xmlDoc){
var count = xmlDoc.getElementsByTagName("item").lenght;
for(var i = 0; i <= count; i++){
document.getElementById("flow").innerHTML += "<div class='item'> <img class='content' src='" + xmlDoc.getElementByTagName("icon")[i].childNodes[0].nodeValue.replace(/\s+$/g,' ') +"' /></div>";
};
} else {
alert("Parse Not Successfull!");
}
my HTML looks like this,
<div id="coverFlow">
<div class="flow"></div>
</div>
var count = xmlDoc.getElementsByTagName("item").lenght;
^^^^^^
length
^^
and the other issue id!=class
document.getElementById("flow")
^^
<div class="flow"></div>
^^^^^
Blogger keeps telling me that the script is not well formed, I have tried to test it in firebug, but I do not seem to detect the issue. Help out
<script type='text/javascript'>
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script type="text/javascript" src="http://disqus.com/forums/hi-tech/get_num_replies.js' + query + '"></' + 'script>');
})();
</script>
See the HTML compatibility guidelines for XHTML.
Move your JS to an external script file, or wrap it in a CDATA block.