I have a page below which is using jquery to append some html.
It simply append an input tag in the specified DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../../jquery-1.10.2.min.js" type="text/javascript" xml:space="preserve"></script>
<script type="text/javascript" xml:space="preserve">
var i = 0;
function test(){
var totalQuantity = '<input type="number" name="order' + i + '.totalQuantity" />';
$(".test").append(totalQuantity);
i++;
}
</script>
</head>
<body>
<div class="test"></div>
<input type="button" onclick="test()" value="Add" />
</body>
</html>
When I run this on server in tomcat using spring, on inspect element the javascript becomes something like:
var totalQuantity = '<input type="number" name="order'+i+ '.totalQuantity" />';
All the ( ' ) characters replaced by code (#&39).
what is the problem actually? Why it is not showing character ( ' ) but rather showing its html code?
Is this a problem with using spring because when I separately(not in a container or spring framework) open this html file, it works fine.
While this is a workaround, i think it's the proper way to insert javascript into html.
Move your javascript into an external file so that whatever is pre-processing your HTML won't touch your javascript.
Related
script tag doesnt execute if i put it in head tag but works fine if i put it in body tag ..can anybody tell me the reason behind this?? here's my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Date();
</script>
</body>
</html>
That's because HTML is parsed from top to bottom. That means that when you try to get the element demo it is not yet created.
To make it work in the head tag you should add a listener that will fire when the page is fully loaded.
document.addEventListener("DOMContentLoaded", function() {
// Here the DOM elements are loaded, and you can get them with .getElementById.
document.getElementById("demo").innerHTML = Date();
});
The <head> is for including other files and libraries and such (you can also include them in the body). But if you want to actually write JS code to manipulate the body, you have to place it in the body.
I'm trying to make a text input field where visitors can enter a value and then hit go or submit.
Based on the digit number they would be send to a new page.
For example if they enter 123 and hit submit it would send them to http://www.example.com/page/123
Could anybody please help me get this up and running?
Thank you
Here we go have fun. just copy the code and save it as html. you don't need php or such. it is way too simple to need a server side code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);
});
});
</script>
</head>
<body>
<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</body>
</html>
I have made javascript bookmarklet for firefox. Now i want to access it in javascript like other document/ DOM elements are accessed through their id or class. Please anybody tell me how i can access my javascript bookmarklet . Actually i want to make it blink /change it color by accessing it.
My bookmarklet code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<title>Untitled Document</title>
<script>
</script>
</head>
<body>
<div id="toolbar" >
<a id='button' href='javascript:alert("my bookmarklet");'
>Lysted</a>
</div>
</body>
</html>
Now i want to access bookmarklet in "script tags/ javascript". Please please help anybody
I have following 2 files as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function init(){
document.getElementById("mytest").innerHTML= "Results after rendering...";
}
</script>
<body onload="init();"><div id="mytest">OK</div>
</body>
</html>
The second page usually give the alert popup all source code of first page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
xmlhttp.open("GET", "test.html",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText)
}
}
xmlhttp.send(null)
</script>
<body>
</body>
</html>
All I want to do is I would like to get ONLY source code after rendering. How can get all code after rendering instead of getting all original code. So i can read < div id="mytest">Results after rendering...< / div> when I try with XMLHTTP. How can I do how to get the code which are already render for page, I want only with classic Javascript or DOM, I don't want with Jquery, JSON, Mootool at all. thanks in advance.
Instead of loading the page with ajax, use your browser's iframe support to your advantage.
Change the second file that alerts the HTML source to something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
function displayAlert()
{
alert(document.getElementById('iframe').contentDocument.body.innerHTML);
}
</script>
<body onload="displayAlert()">
<iframe src="test.html" id="iframe" style="display:none;"></iframe>
</body>
</html>
This will load test.html in an invisible iframe. Your browser will automatically render test.html inside the iframe and will call displayAlert() when it is done. displayAlert() will grab the the source code inside the iframe and alert it. However, this solution will only work if test.html is on the same server as the script above. If test.html is on a completely different server, this solution will not work because the permission to access the iframe will be denied. If this is the case, I can let you know of another solution that will bypass this.
I'm not sure I know what you're really asking, but why not just get:
alert(document.body.innerHTML);
to get the actual rendered body HTML with any changes that have been made by scripts upon loading.
Note: even unmodified parts of innerHTML will not always compare exactly to the original source HTML because in some cases browsers are reconstituting the innerHTML from some other parsed data form so attributes may not have the same quoting or be in the same order and capitalization may not be the same.
On button click, I want to hide the div. How do i do it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" type="text/javascript">
function button()
{
var a = document.getElementById('approve');
document.getElementById('p').innerHTML= 'Fred Flinstone';
}
</script>
<body>
<div id="hide">
<form>
<p id="p">heya</p>
<input type="button" id='approve' value="approve" onclick="button()"/>
<input type="button" id="reject" value="reject"/>
</form>
</div>
</body>
</html>
SORRY FOR ASKING AGAIN...BUT COULDN'T FIND A BETTER METHOD. THANKS
document.getElementById('hide').style.display = 'none';
This sets the CSS code display: none; on the div, which causes the browser's rendering engine to act like the element is not even on the page (e.g. it does not occupy any space). See the CSS standard for the official description.
You can just use Jquery to make things super easy:
$("#approve").click( function() {
$("div#hide").hide() //you can just use $("#hide") if you want
});
You can show the element whenever you want with $("div#hide").show(). This will save you from having to deal with browser inconsistencies and other crap so you can just focus on producing great readable code. :)
If you use jQuery:
$(document).ready(function() {
$('#approve').click(function() {
$('#hide').hide();
});
});