I am really new to HTML and am stuck conceptualising some code as follows.
My question is - which part of the code is actually doing the displaying of 'showHello'.
<html>
<head>
<script>
function displayCD()
{
document.getElementById("showHello").innerHTML="hello";
}
</script>
</head>
<body onload="displayCD()">
<div id='showHello'></div>
</body>
</html>
Doesn't document.getElementById("showHello").innerHTML="hello";
just set id showHello to the value hello and
<div id='showHello'></div> just create the id showHello?
If <div id...> actually displays the value of showHello, how does it, if displayCD() is called before it or is the whole document deciphered before anything is actually displayed ?
Does that make sense as a question?!!!!
Doesn't document.getElementById("showHello").innerHTML="hello"; just set id showHello to the value hello
It searches the DOM for the element with that id, and changes the HTML inside it to hello.
and just create the id showHello?
It creates an element with that id
how does it, if displayCD() is called before it or is the whole document deciphered before anything is actually displayed ?
See this:
<body onload="displayCD()">
The function is called in response to the load event firing. That won't happen until the entire document, including any dependent resources (such as images) has loaded.
The line who is in charge for displaying the "hello" is this one
function displayCD()
{
document.getElementById("showHello").innerHTML="hello"; // THIS one
}
And the displayCD() function is loaded with HTML here
<body onload="displayCD()">
PS : If you're new with HTML, you probably new with Javascript. Maybe you should look after jQuery. Here is how we doing the same thing with jQuery.
$(document).ready(function() {
$("#showHello").html("hello");
});
Preview : http://codepen.io/anon/pen/ypBvf
A simplified version of what a browser would do is like this:
create the document object
add the head element and interpret the script. This will make him remember that there exists a function called displayCD.
add the body element.
add the div HTMLElement to it and set the id property to showHello
Note: the div is declared here in Hypertext markup language <div id='showHello'></div>
when the document has done loading all the elements into it, the function you set on onLoad is called. In your case, onload="displayCD()" is the part that does that and the function called is displayCD.
displayCD will get the HTMLElement that has the id == showHello and set its innerHTML property to the hello string. Since this is called when the document has fully loaded, it means that the div with id == showHello already exists, so it will add the text hello into it.
Related
I am not even sure if what I am trying to do is possible. I want to present the "floating" DOM element created when dragging a row as something more than just text. Seems like when I try to use html code as the returned value it is rendered as text rather than html:
rowDragText: function(params) {
return `<div [innerHTML]=${params.rowNode.data.RULE_NAME}></div>`;
}
This is what happens:
There is public static GHOST_TEMPLATE defined in dragAndDropService.ts.
You can try modifiying that template and perhaps also inspect the createGhost function nearby.
rowDragText probably not used with this method...
I'm trying to understand the behavior of innerHTML in the code below. I want to permanently add a new div block every time I hit the button, but it seems that the new block only pops up for a split second then disappears.
Does anyone know why this is the case, and how to fix it?
Also, when I change the code to use appendChild instead of innerHTML, I get an error saying Argument 1 of Node.appendChild is not an object.. I'm not sure what this means.
Any help is much appreciated!
Below is the code:
<DOCTYPE html>
<html>
<body>
<form onSubmit="loadData()">
<input type="submit" id="button">
</form>
<div id="block">List of items:</div>
<script>
function loadData(){
document.getElementById("block").innerHTML += "<div>item</div>";
// document.getElementById("block").appendChild("<div>item</div>");
};
</script>
</body>
</html>
Because you are submitting then the page reloads and your HTML is obliterated.
If you need items to persist then you will need to use cookies, localStorage or a server-side solution.
function addItem()
{
document.getElementById("block").innerHTML += "<div>item</div>";
}
<DOCTYPE html>
<html>
<body>
<form>
<input type="button" id="button" onclick="addItem()" />
</form>
<div id="block">List of items:</div>
</body>
</html>
you are submitting the page. appendChild or innerHtml happen directly after submit, before the new page is loaded. once the new page is loaded, the current page (with the applied modifications) is dismissed and replaced with the new page.
if you wanted something to happen on the new page, you would need to execute the code on that page. (or don't use a form submit, but rather some ajax for sending the form).
The reason why appendChild is not working for you, is that appendChild expects a dom node as parameter, not a string. it would be like document.getElementById("foo).appendChild(document.createElement("div")). (the tricky part is that with createElement you get an empty element, you would also need to put the content you want into it.
Your first question is already answered by #lee.
Your problem with your second answer is, that you can not use appendChild like you did. If u want to use append child, according to the mozilla developer docs you will have to to something like this:
var mydiv = document.createElement("div");
mydiv.appendChild(document.createTextNode("item"));
document.getElementById("block").appendChild(mydiv);
to get the result you asked for.
I'm new to the use of jQuery so the problem I'm facing should be fairly straight forward. Basically what I'm trying to accomplish is load a variety of simple text-only pages within DIV elements of my site, and with a navigation bar hide/unhide these individual DIVs.
DIVs are correctly loaded the requested pages using an script block. However, what is not working correctly is toggling the visibility of these DIV blocks. I've narrowed it down to a jQuery function I've created which blocks the entire script call whenever I refer to any of the DIV blocks. Let me explain better with a code snippet.
This is is some very simple code that, on the click of a menu link, runs a hide function then shows the corresponding DIV element.
$( document ).ready(function()
{
console.log("document ready."); <-- does NOT get called with hideDivs()
$('#button1').click(function(){
hideDivs();
$("#page1").show();
});
$('#button2').click(function(){
hideDivs();
$("#page2").show();
});
});
This is the hideDivs() function, JUST above the ready function:
function hideDivs()
{
$("#page1").hide(); <-- These lines cause the entire
$("#page2").hide(); <-- <script> block to note get called.
}
Finally, page1 and page2 are created with a script block halfway inside the page:
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page1.php">').show();
$("#page2").html('<object style="overflow:hidden; width: 100%; height: 500px;" data="page2.php">').hide();
</script>
Why then is it that the top SCRIPT block fails with the hideDivs() function? I've tried placing it inside the $( document ).ready function with no change. Again, if the function is blank, or contains something simple like 'console.log' it works, but when referring to DIV tags it breaks.
Even stranger, the code that makes the function FAIL, WORKS if I simply rewrite the code as such:
$('#button1').click(function(){
$("#page1").hide(); <-- This works fine
$("#page2").hide(); <-- (page1 repeated to match function code)
$("#page1").show();
});
I have quite a few pages so I would much rather be able to use a function as not to have lots of repetitive code.
I have no errors displayed in my javascript console. I've looked closely at functions calls with StackOverflow and Google searches but couldn't spot a solution. I'm sure I've made a really silly mistake I'm overlooking, so any help would be much appreciated.
So instead of the whole function to hide your divs, you can simply put a class on each one and hide them by selecting that class. For example, each page Div give a class="clickablePages", and then do:
$(".clickablePages").hide();
that will simply hide all the divs that you have added the class to.
As for repeating all the button clicks for each button, you can simply do it in one function based on the id of the button. You can again put a class on all of the buttons as well, trigger the function by selecting the class and then grab the id you need within that function. something like this:
$('.buttonclick').click(function(){
var pageID = $(this).attr('id');
$("#page" + pageID).show();
});
In this case, if your buttons just had an id of '1' or '2' that matched the page number, it would only show the div for that page number. Hope that makes sense.
In my page I have a hidden <div>, such as the following:
<div id="myid" style="display:none;">
...
</div>
When the user clicks a button, I have a javascript code that calls $('#myid').show("slow");, thus displaying this <div>.
My question is when does the code inside the <div> gets called: when the page first loads or only when it's shown?
My concern is that inside this <div> I'd like to place a page counter (with an <iframe>), which should only be called when the <div> is shown. The alternative would be to put the code inside the javascript, but I'd rather keep it in the page.
The code inside the div get called as you load the page.
So the counter will get called everytime the page is loaded even if the div stays hidden.
So you have to use javascript somehow like this:
<div id="myid" style="display:none;">
...
</div>
<script>
function showCounter() {
document.getElementById("myid").innerHTML = '<script>counter-code</script>';
document.getElementById("myid").show('slow');
}
</script>
and add the function showCounter to your button.
It will be run when the page loads, display:none only affects visibility and has nothing to do with code operation layer (in fact, some browsers ignore CSS entirely and may show it anyway).
If you want a piece of code to only run when clicking a JavaScript button, you should attach that code to the Javascript function. Make an empty div on your page and then use the function to put code inside it:
<div id="jsDiv"></div>
<script>
function jsCode() {
document.getElementById('jsDiv').innerHTML = 'Whatever you want';
}
</script>
Then attach the jsCode() function to your button, and the HTML will only be rendered when the function is called. If you're using server-side scripting (PHP, Rails etc.) or something more complex, look into jQuery and AJAX functions.
Try like this:
$(document).ready( function() {
$('#myid').show("slow")
}
I use a frame from a HTML page to load some data from the server without having to leave the original web page. I simply reassign the src of the frame and the shown data gets updated.
Now I need to programatically create a div, but the width and height have to be retrieved from the server. May I use a frame to get those values, without leaving the web page, or is there a more simple and efficiente way ?
I would prefer not to use ajax, and keep my code as simple as possible, thanks
One easiest way is to call page property like this:
<script type="text/javascript">
var width = <%=this.Width %>
</script>
and declare this property in cs file like this
public int Width
{
get;
set;
}
Is it what you expected? or if you have some calculations after pages loaded, you can simply achieve it by using jquery ajax and one httphanlder.
Use jQuery. It's really simple.
A simple example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$('#result').load('otherfile.php');
</script>
<div id="result"> </div>
Loads otherfile.php inside the div id'ed "result". No page reload.
Thanks for the jquery example, I may use it in the future. For now I found a very simple and efficient way to solve it using a frame (I know, I know...) that really surprised me for its simplicity:
I create a form (a javascript class that manages several divs), then a little frame inside it, and the frame change the form properties and remove itself.
The key was to access the javascript variable defined in the parent from the child:
echo "<script>";
echo "parent.window.oDlg.SetSize( ".$row[ "WIDTH" ].", ".$row[ "HEIGHT" ]." );";
echo "parent.window.oDlg.SetTitle( '".trim( $row[ "TITLE" ] )."' );";
echo "</script>";