We Keep Coding

How to safely use "&" symbol in a javascript variable without it turning to "&"?

I am trying to execute the following code:
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id + '" height="600px" width="100%" />';
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + link ;
}
</script>
</div>
But while executing, the & in src="" converts to & which breaks the original URL and doesn't go to the desired destination. I looked up on the internet but as I am a noob, I was not able to figure it out. Please help me to make this work!

All you need to do is
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id +
'" height="600px" width="100%" />';
var new_link = link.replaceAll('&','&');
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + new_link;
}
</script>

This is definitely a blogger issue, and the reason behind happening is :
The character "&" is an ISO HTML reserved character used to denote the start of a parameter.
To overcome this the Blogger editor translate the & you enter to the HTML entity, & , that will display & when the page or URL is rendered in a browser, so that you don't have to do it yourself.

How to Prevent TD from ending up on a new line?

I am dynamically creating a table through Javascript and I DO want the table to continue off the right side of the page. Doing this manually lets the table continue off, but once I feed this into a for loop the <td>s wrap into a second line in the rendered HTML, creating two or more table rows when they reach the end of the page.
<div id="panelindex" style="overflow:scroll;text-align:center;">
<table border="0">
<tr></tr>
</table>
</div>
This is inside a table of its own (no style formatting). Then the Javascript:
var q = Math.floor((1/numpanels)*500);
if(q>50) q=50;
panelindex.innerHTML = "<table border='0'><tr>"
for(i=0; i<numpanels; i=i+1)
{
panelindex.innerHTML = panelindex.innerHTML + "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + zeroFill(i,2) + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" +
"<br />" + i + "</a></div></td>\n";
}
panelindex.innerHTML = panelindex.innerHTML + "</tr></table>"
You may notice that there is a <div> in the <td> and that is so I can apply a border marking the panel. Without the <div> it seems I cannot do that, and there are some other undesired effects. Any ideas what I can do so that all the <td>s end up on one line rather than split to a new line?
Example of what I want: http://edwardleuf.org/comics/jwb/009-conmet
What is happening: https://jsfiddle.net/w4uh0a3j/7/
Click the Show link.

innerHTML does not hold the string value you assign to it.
It parses the value as HTML, creates a DOM from it, inserts it into the document and then, when you read it back, it converts that DOM back into HTML.
This means that the string you assign is subject to error recovery and normalisation. In particular, the end tags you omitted are fixed.
panelindex.innerHTML = "<table border='0'><tr>"
console.log(panelindex.innerHTML);
<div id="panelindex" style="overflow:scroll;text-align:center;">
<table border="0"><tr>
</tr></table>
</div>
So when you start appending more data to it:
panelindex.innerHTML = panelindex.innerHTML + "<td>etc etc
You end up with:
<table border="0"><tbody><tr></tr></tbody></table><td>etc etc
Store your data in a regular variable. Only assign it to .innerHTML once you have the complete HTML finished.
A better approach then that would be to forget about trying to build HTML by mashing strings together (which is error prone, especially once you start dealing with characters that need escaping in HTML) and use DOM (createElement, appendChild, etc) instead.

OK,here is fixed html and js code. It seems like innerHTML fixes missing closing when updating html before all the code is building the rest of innerHTML. This code works :
<div id="panelindex" style="overflow:scroll;text-align:center;">
</div>
and js code :
var numpanels = 100;
var q = Math.floor((1/numpanels)*500);
if(q>50) q=50;
panelindex.innerHTML = "<table border='0'><tr>";
var html = "<table border='0'><tr>";
for(i=0; i<numpanels; i=i+1) {
html += "<td><div id='panel" + i + "' onclick='jumppage(" + i + ")' style='float:left;text-align:center;margin:8px;border-width:3;border-color:white;border-style:none;'><a href='#" + i + "'><img src='thumbnails.php?image=blowem" + ".gif&GIF&tw=128&th=128&quality=" + q + "'>\n" +
"<br />" + i + "</a></div></td>";
}
html += "</tr></table>";
document.getElementById("panelindex").innerHTML = html;

Rendering html using javascript and code from markdown and django

I'm trying to create a two column html page that uses django as a manager for a blog. The body of the post has a TextField that is converted to markdown and sent to the html:
class Post(models.Model):
title = models.CharField(max_length=67, unique=True)
body = models.TextField()
body_md = models.TextField(editable=False, blank=True, null=True)
def save(self):
selft.body_md = markdown2.markdown(body, extras=['fenced-code-blocks'])
Then in the template body post is called:
{{ body_md|safe }}
That works correctly. However I'm trying to pass the body text to a javascript function that splits the text in two columns and renders it automatically in the html page respecting some boundaries. For example the text in both columns may have a width of 300px and a height of 800px.
The first problem I'm facing is that I can not render the text with javascript when using the markdown field. If I use :
<script type="text/javascript">
var html = "<div class='row'>" +
"<div class='content'> {{ body_md|safe }}</div>" +
"</div>";
document.write(html);
</script>
it doesn't work. However, if instead of using a text processed with markdown like {{ body_md|safe }}, I use something not processed, like the title, {{title}}. Then it renders correctly.
Any help is welcomed.

The problem you are having here is that safe is causing Django to print body_md (new lines and all) inside what you hoped would be Javascript.
So to be clear you are hope to get:
var html = "<div class='row'>" +
"<div class='content'><p>this is the first line</p>" +
"<p>this is the second line</p>" +
"</div>" +
"</div>";
but you're actually getting
var html = "<div class='row'>" +
"<div class='content'><p>this is the first line</p>
<p>this is the second line</p>
</div>" +
"</div>";
which isn't valid javascript. (tip, right click, view page source).
The easiest solution is to do:
<div id="hidden_body" style="display: none">{{ body_md|safe }}</div>
<script>
var hidden_body = document.getElementById("hidden_body").innerHTML;
var html = "<div class='row'>" +
"<div class='content'>" + hidden_body + "</div>" +
"</div>";
document.write(html);
By the way markdown2 is very slow, misaka is a great option instead.

Append html data with inline script html data and to print

I need to append table data with html inside script. And append data for print
but here the table data is only shows in the print mode.
html
<div>
<p>Your content here</p>
<table id="toPrint">
<tr>
<td>Neil D'zousa</td>
<td>112233445566</td>
</tr>
</table>
</div>
<div id="notForPrint">
print
</div>
script
function open() {
var w = window.print();
var htmlTable2 = '<tr>' + '<th>Name</th>'
+ '<th>Phone</th>'+ '</tr>';
var html = $("#toPrint").html();
var t=html;
$(t).append(htmlTable2);
$(w.document.body).html(t);
}
$(function() {
$("a#print").click(open);
});
if anyone knew about this please share your answer.
with regards ...

Demo
var htmlTable2 = '<tr>' + '<th>Name</th>'
+ '<th>Phone</th>'+ '</tr>';
var html1 = $("#toPrint").append(htmlTable2);
var t=html1;
$(t).append(htmlTable2);
window.print();
Try this. I tested in chrome. It works fine
EDIT:
Response to your req: You have to chack whether dom[name,etc] is already [resent
$('#domHeader').length > 0 means already present.
if(! $('#domHeader').length)
{
var htmlTable2 = '<tr>' + '<th>Name</th>'
+ '<th>Phone</th>'+ '</tr>';
var html1 = $("#toPrint").prepend(htmlTable2); //peter is correct
//var t=html1;
//$(t).append(htmlTable2);
}
EDITED DEMO
UPDATE FINAL

The following should do it. The headers should be at the top:
function open() {
var htmlTable2 = '<tr><th>Name</th><th>Phone</th></tr>';
var html1 = $("#toPrint").prepend( htmlTable2 );
window.print();
}
The rest of your code should work fine.

Problem with .html() function in jQuery

Can anyone explain why this jQuery .html() function is not outputting anything?
I'm new too jQuery and cant seam to spot anything, if you can please tell me :D
I'll just include the html, nothing else:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2.js"></script>
<script type="text/javascript">
//when the DOM is ready
$(document).ready(function(){
var like_count = <?php print "23"; ?>;
//Scripts for getting number of comments for this post
var comment_count = <?php print "12"; ?>
var thumnail_path - "";
var time_ago - "";
//settings on top
var doindex = 'comments.php?item_id=';
var initialPosts = <?php echo get_posts(0,$_SESSION['posts_start']); ?>;
//function that creates posts
var postHandler = function(postsJSON) {
$.each(postsJSON,function(i,post) {
//post url
var postURL = '' + doindex + post.item_id;
var id = 'post-' + post.ID;
//create the HTML
$('<div></div>')
.addClass('post')
.attr('id',id)
//Script for getting the number of likes for this post
//generate the HTML
.html('<table width="244" height="121" border="0" cellpadding="0" cellspacing="2" ><tr><td height="24" colspan="2" bgcolor="#0270B7"><table width="410" border="0"><tr> <td width="404" height="20" class="username"> ' + post.username + '<span class="name"> ' + post.name + '</span></td></tr></table></td></tr><tr> <td width="51" bgcolor="#Edeff4"><span class="thum"><img src="' + thumnail_path + '" alt="" width="50" height="50" /></span></td><td width="355" height="50" bgcolor="#Edeff4" class="content"> ' + post.item_content + '</td></tr><tr><td height="19" colspan="2" bgcolor="#Edeff4" class="content"> <span class="post-title">comment </span>(' + likecount + '<span class="post-title">)</span> <span class="post-title">likes (' + likecount + ') ' + time_ago + '</span></td></tr><tr><td height="18" colspan="2" class="content"> </td></tr></table>')
Thanks :))

Assuming you haven't left out part of your script, it doesn't look like you're ever adding your div to the body somewhere.
After your html call, put .appendTo('body'). Example:
$('<div></div>').html("Some stuff...").appendTo('body');
Of course, you can use whatever function you want to place it in the document.

Why would it output anything?
I'm not a jquery wizard, but I believe if you give .html information (as you are doing) it doesn't output anything, instead it loads that into the item specified.
aka:
$('body').html('<h1>TEST</h1>');
if you want to retrieve the html don't put anything between the parenthesis
var body = $('body').html();
Note: Not tested
I would look up information about jquery on visualjquery.com and http://api.jquery.com/category/selectors/basic-css-selectors/

<div id='output'></div>
<script>
$('#output').html('<your content>');
</script>

You must call the .html() function on something.
Check out this link :
.html()

I usually add HTML within a DIV by selecting it by its id. You might wanna try adding the html on another line, selecting the div by its id like that:
$('<div></div>').addClass('post').attr('id',id);
$('#'+id).html('blablabla');
I've not tested this. It it doesn't work, you can create an empty DIV like Arun David just said before and append the new DIV in.