Generating and inserting html with javascript function - javascript

I have the following function:
<script>
function generateHtml(index)
{
document.write('Hello ' + index);
}
</script>
and I have a server side script generating the following html
<div><script>generateHtml(3)</script></div>
<div><script>generateHtml(4)</script></div>
in the hopes that Hello 3 and Hello 4 would be written in the page. However, this does not occur. Instead nothing is displayed. What is wrong with this approach?
Is it better to wrap the <div>'s is a id that can be selected and then change the html instead of writing to the DOM?

Most probably the <script> containing function generateHtml is added after the other <script>blocks, causing
Uncaught ReferenceError: generateHtml is not defined
Make sure it's added beforehand so that it works as expected.

For your code to work you must ensure that the html is present on the page after the javascript function
<body>
<script>
function generateHtml(index)
{
document.write('Hello ' + index);
}
</script>
<div><script>generateHtml(3)</script></div>
<div><script>generateHtml(4)</script></div>
</body>
To answer your question, using id's to select the DOM elements is certainly a better option.
Maybe a suggestion, use an MVVM framework such as knockout/ember/backbone/angular to do any dynamic DOM manipulation.
Example in knockout here ---> http://jsfiddle.net/x0t8dxzw/

Related

Select parent div from inside the containing JavaScript

I've a lot of old cached html file which uses document.write.
There are multiple element like this in every html file
<div class="time"><script>timeago('2008-06-07 17:40:53')</script></div>
timeago function writes time using document.write and the function is defined in a separate js file. So It is easy to alter the function to some thing else without changing some 200K documents.
But the issue is, how can I rewrite that timeago function to select the containing div and print the time. Is it possible to select the div from that script which is contained in that div may be using jQuery or native JavaScript?
Any advice please
How about something like this?
<script>
function timeago(d) {
document.currentScript.parentElement.innerText = 'output = ' + d;
}
</script>
<div class="time"><script>timeago('2008-06-07 17:40:53')</script></div>

ClientDependency Framework & Razor, add custom JS

I'm trying to get the hang of ClientDependency Framework.
https://github.com/Shazwazza/ClientDependency
I use it in an Umbraco website.
I'm having a problem with some custom javascript (not in a file) that I want to run.
I want to run a function (which is in "functions.js"), but with a different parameter per page.
So, I add the following to my template:
Html.RequireJs("~/scripts/functions.js", 1);
And on my masterpage before the -tag I've added:
#Html.RenderJsHere()
But where do I place my function-call? I can't just add it to my template, because "functions.js" isn't loaded yet (it's at the bottom of my masterpage).
I've thought about creating a js-file for each call and add them to the Html.RequireJs(...) but that isn't a great solution.
Is there a way to add inline-script to the list of "JS-to-render" ?
edit:
I was just trying to get it to work using RenderSection(), but that doesn't seem to work when the section is defined on a macro?
edit:
I don't have the code here at the moment I'm typing this, but the idea is like this:
functions.js
function WriteToConsole(input) {
console.log('Log', input);
}
template1.cshtml
#{Html.RequireJs("functions.js");}
<script>
WriteToConsole("This is from template 1");
</script>
template2.cshtml
#{Html.RequireJs("functions.js");}
<script>
WriteToConsole("This is from template 2");
</script>
master.cshtml
<body>
#RenderBody()
#Html.RenderJsHere()
</body>
Just to give an idea of what I'm trying to do.
As you can imagine, the <script> part on my template is now being called before functions.js is included. And this results in an error.
Or am I handling this whole thing wrong?
Are you trying to alter the script call in: Html.RequireJs("~/scripts/functions.js", 1); ?
So something like Html.RequireJs("~/scripts/functions.js?myparam=xyz", 1); Is this what you are trying to achieve but having the url be dynamic?
If so you could do something like this :
//perhaps have some logic above to determine what the query should be and concatenate it to the string like so.
string query = "?myparam=xyz";
string scriptcall = "~/scripts/functions.js"+query ;
Html.RequireJs(scriptcall, 1);
Could you provide more code so we can see what you are trying to do? Maybe list in steps on how it should work?

interchange html content using javascript

Good day! Newbie here. I just want to know if it's possible to change the whole content of an html using javascript? I got some codes here. (not mine but whoever did this, thank you so much!) I don't know where to put/insert all the codes of the new layout like when you click a button then the whole content will change. Thank you very much for helping me.
<script language="Javascript">
<!--
var newContent='<html><head><script language="Javascript">function Hi()</script></head><body onload="Hi();"><p id="p">hello</p></body></html>';
function ReplaceContent(NC) {
document.write(NC);
document.close();
}
function Hi() {
ReplaceContent(newContent);
}
-->
</script>
The easiest way to do this is with jQuery.
function insertHtml()
{
var newHtml = '<div><span>Hello World</span></div>';
$('body').html(newHtml);
}
Something like that will replace the entire contents of body with newHtml. You can also do this with pure javascript using the .innerHtml property but jQuery has many advantages.
EDIT: If you want to add something to the DOM rather than replacing the entire thing, use
$('body').append(newHtml)
instead. This will add the content to the end of the body. This is very often used for things like adding rows to a table.
Yes it is possible but this code is not valid unless you remove the comment tags however don't use the document.write() after page load unless you want to overwrite everything in page including the script

Dynamically change page title from h1 tag using Javascript

First off, thanks for taking the time to read this question. What a great community Stack Overflow has :)
I need to change the title tag of a page based on the text contained in the h1 element on that page.
I've been searching around, and I have found the "document.title" Javascript function. I've been playing around with it, trying to pull the text from my h1 element that has the class of "Category-H1".
<script type="text/javascript">
document.title = document.getElementsByClassName("Category-H1");
</script>
However, it is just setting the page title to "[object HTMLCollection]", which as I understand is a null value. Is JS the best was to do this? I know my code is jacked, any tips?
Thanks in advance! - Alex
Edit
I have been informed that line of code returns a collection object and not a string. It was pointed to a code example of:
setTimeout(function () { document.title = "iFinity User Profile - " + document.getElementById("test").outerText; }, 1000);
However, this code produces a page title of "iFinity User Profile - undefined". I have the h1 element on that page set to the id of "test".
You're almost there.
[object HTMLCollection] is not a null value--it is the string representation of a collection of html elements. You want to choose the first one and then get the inner html from it.
document.getElementsByClassName("Category-H1")[0].innerHTML
Also, make sure you do this after the document has loaded. You can either do this by adding the script at the end of your document, or have it run on the onload event of the body.
This should work:
document.title = document.getElementsByClassName("Category-H1")[0].innerHTML;
The getElementsByClassName() function returns a collections of elements ( [object HTMLCollection], so you need to get an element out of it, I'm assuming the first one.
A better solution may be the following:
<script type="text/javascript">
document.title = document.getElementsByTagName("H1")[0].innerHTML
</script>
This would save from setting a h1 class.
This is very close, but I found that - working with Firefox anyway, when you use the getElementsByTagName("H1") it gives you an array as you have recognized. However, it works better using:
<script type="text/javascript">
document.title = document.getElementsByTagName("H1").item(0).innerHTML;
</script>
Note the addition of the .item(0).innerHTML after getting the element rather than the [0].innerHTML.
I don’t know if you have any experience in it or not, but another alternative that seems to be very popular these days is the use of jQuery. As in the earlier discussions, the code below assumes that you are interested in grabbing the first instance of the “H1” tag or the “Category-H1” class. This is an important point because unless you target an “ID” attribute, you will get a collection of items.
This code also assumes that you have already implemented the inclusion of the jQuery library either directly from your website or by referencing a CDN.
<script type="text/javascript">
$(document).ready(function () {
document.title = $("H1")[0].innerText;
});
</script>
The $(document).ready will call it’s enclosed function only after the Document Object Model (DOM) has finished loading, and before the browser’s rendering engine displays the page.
The content inside the function will grab the inner text of the first instance of the “H1” tag and assign that text value to the document’s title tag in the head section.
I hope this adds another layer of help.

How do I get the original innerHTML source without the Javascript generated contents?

Is it possible to get in some way the original HTML source without the changes made by the processed Javascript? For example, if I do:
<div id="test">
<script type="text/javascript">document.write("hello");</script>
</div>
If I do:
alert(document.getElementById('test').innerHTML);
it shows:
<script type="text/javascript">document.write("hello");</script>hello
In simple terms, I would like the alert to show only:
<script type="text/javascript">document.write("hello");</script>
without the final hello (the result of the processed script).
I don't think there's a simple solution to just "grab original source" as it'll have to be something that's supplied by the browser. But, if you are only interested in doing this for a section of the page, then I have a workaround for you.
You can wrap the section of interest inside a "frozen" script:
<script id="frozen" type="text/x-frozen-html">
The type attribute I just made up, but it will force the browser to ignore everything inside it. You then add another script tag (proper javascript this time) immediately after this one - the "thawing" script. This thawing script will get the frozen script by ID, grab the text inside it, and do a document.write to add the actual contents to the page. Whenever you need the original source, it's still captured as text inside the frozen script.
And there you have it. The downside is that I wouldn't use this for the whole page... (SEO, syntax highlighting, performance...) but it's quite acceptable if you have a special requirement on part of a page.
Edit: Here is some sample code. Also, as #FlashXSFX correctly pointed out, any script tags within the frozen script will need to be escaped. So in this simple example, I'll make up a <x-script> tag for this purpose.
<script id="frozen" type="text/x-frozen-html">
<div id="test">
<x-script type="text/javascript">document.write("hello");</x-script>
</div>
</script>
<script type="text/javascript">
// Grab contents of frozen script and replace `x-script` with `script`
function getSource() {
return document.getElementById("frozen")
.innerHTML.replace(/x-script/gi, "script");
}
// Write it to the document so it actually executes
document.write(getSource());
</script>
Now whenever you need the source:
alert(getSource());
See the demo: http://jsbin.com/uyica3/edit
A simple way is to fetch it form the server again. It will be in the cache most probably. Here is my solution using jQuery.get(). It takes the original uri of the page and loads the data with an ajax call:
$.get(document.location.href, function(data,status,jq) {console.log(data);})
This will print the original code without any javascript. It does not do any error handling!
If don't want to use jQuery to fetch the source, consult the answer to this question: How to make an ajax call without jquery?
Could you send an Ajax request to the same page you're currently on and use the result as your original HTML? This is foolproof given the right conditions, since you are literally getting the original HTML document. However, this won't work if the page changes on every request (with dynamic content), or if, for whatever reason, you cannot make a request to that specific page.
Brute force approach
var orig = document.getElementById("test").innerHTML;
alert(orig.replace(/<\/script>[.\n\r]*.*/i,"</script>"));
EDIT:
This could be better
var orig = document.getElementById("test").innerHTML + "<<>>";
alert(orig.replace( /<\/script>[^(<<>>)]+<<>>/i, "<\/script>"));
If you override document.write to add some identifiers at the beginning and end of everything written to the document by the script, you will be able to remove those writes with a regular expression.
Here's what I came up with:
<script type="text/javascript" language="javascript">
var docWrite = document.write;
document.write = myDocWrite;
function myDocWrite(wrt) {
docWrite.apply(document, ['<!--docwrite-->' + wrt + '<!--/docwrite-->']);
}
</script>
Added your example somewhere in the page after the initial script:
<div id="test">
<script type="text/javascript"> document.write("hello");</script>
</div>
Then I used this to alert what was inside:
var regEx = /<!--docwrite-->(.*?)<!--\/docwrite-->/gm;
alert(document.getElementById('test').innerHTML.replace(regEx, ''));
If you want the pristine document, you'll need to fetch it again. There's no way around that. If it weren't for the document.write() (or similar code that would run during the load process) you could load the original document's innerHTML into memory on load/domready, before you modify it.
I can't think of a solution that would work the way you're asking. The only code that Javascript has access to is via the DOM, which only contains the result after the page has been processed.
The closest I can think of to achieve what you want is to use Ajax to download a fresh copy of the raw HTML for your page into a Javascript string, at which point since it's a string you can do whatever you like with it, including displaying it in an alert box.
A tricky way is using <style> tag for template. So that you do not need rename x-script any more.
console.log(document.getElementById('test').innerHTML);
<style id="test" type="text/html+template">
<script type="text/javascript">document.write("hello");</script>
</style>
But I do not like this ugly solution.
I think you want to traverse the DOM nodes:
var childNodes = document.getElementById('test').childNodes, i, output = [];
for (i = 0; i < childNodes.length; i++)
if (childNodes[i].nodeName == "SCRIPT")
output.push(childNodes[i].innerHTML);
return output.join('');

Categories

Resources