InnerHTML not working [duplicate] - javascript

This question already has answers here:
jquery not working to change inner html?
(4 answers)
Closed 7 years ago.
I know similar questions have been asked before here and here. But those don't exactly resemble my situation becase they are trying to change the value of an input box while I am trying to update the HTML of a div element. My issue is that I am calling a JS function right at the top of my HTML page and the function is meant to update the innerHTML of one of the div elements on the page. And for some reason this isn't working. According to an answer to this question, I understand that this could be because I am attempting to access the div even before the page has fully loaded. To resolve this, I tried calling the function from the subject div's onload() event. However, even this refuses to work.
function wotd() {
$('#wotd').HTML("<strong>test</strong>");
alert($('#wotd').text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//wotd();
</script>
<div class="col col-md-4">
<!-- WOTD panel -->
<div class="panel panel-default panel-box card-effect">
<div class="panel-heading panel-title">Word of the Day</div>
<div id="wotd" class="panel-body panel-text" onload="wotd();">
Word of the day not currently available.
</div>
</div>
</div>

innerHTML is javasript property. You should use html() in jquery to replace the content of element. And also div does not have onload event. You should do it on document ready or body load like following.
function wotd() {
$('#wotd').html("<strong>test</strong>");
alert($('#wotd').text());
}
wotd();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col col-md-4">
<div class="panel panel-default panel-box card-effect">
<div class="panel-heading panel-title">Word of the Day</div>
<div id="wotd" class="panel-body panel-text" onload="wotd();">
Word of the day not currently available.
</div>
</div>
</div>

Related

Add html elements into div [duplicate]

This question already has answers here:
How to add a list item to an existing unordered list
(14 answers)
Closed 7 years ago.
I've got 3 nested divs.
<div id="wrapper">
<div id="innerWrapper">
<div id="inner"></div>
</div>
</div>
I need to add html via jQuery./ So I use
$('#wrapper').html('<img src="profile.png"/>');
But when I do that the innerWrapper and inner divs disappears. How can I add <img src="profile.png"/> instead of replacing the divs inside wrapper?
you need to use .appand() instead of .html(), .html() will remove the previous elements.
$('#wrapper').append('<img src="profile.png"/>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">wrapper
<div id="innerWrapper">innerWrapper
<div id="inner"></div>inner
</div>
</div>
Use append() instead of html()
$('#wrapper').append('<img src="profile.png" titile="image"/>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div id="innerWrapper">innerwrapper
<div id="inner">inner</div>
</div>
</div>
Use append instead of html
$('#wrapper').append('<img src="profile.png"/>');

Bootstrap Row starts up behind the margin

I am currently learning Bootstrap. I came across a piece of code where I was trying to create a bunch of rows to create a kind of table. But when I ran the code on the browser, the margins of the rows start of behind the screen. Look at the very simple piece of 'Hello World' code below in JS Fiddle.
<div class="row">Hello World!</div>
http://jsfiddle.net/x8y50sas/
Why is the text starting from behind the margins? An detailed explanation could help?
You need to include a cell inside the row:
<div class="container">
<div class="row">
<div class="col-xs-12">Hello World!</div>
</div>
</div>
The reason for the offset is that rows in bootstrap have a negative margin. They should always contain a cell which adds additional padding.
More info in the docs: http://getbootstrap.com/css/#grid
Because to be able to use the grid system you need to wrap your element inside class container. Read this article: http://getbootstrap.com/css/#overview-container
Example:
<div class="container">
<div class="row">Hello World!</div>
</div>
You must enclose the block "row" in the block "container" as:
<div class="container">
<div class="row">
<!-- Example: 3 Cell -->
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
<div class="col-lg-4">...</div>
</div>
</div>

Bootstrap Accordion and Ajax (on Flask)

All,
I'm trying to populate a boostrap accordion expanded div with html using ajax- namely, only load the html if a user expands a collapsed accordion element. The HTML is:
<script src="/static/expand_db.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body ">This is the panel's body</div>
<div id="collapse0" class="panel-collapse collapse">
<div class="panel-body">expanded content - this is to be loaded with ajax</div>
</div>
<div class="panel-footer">
<a id="expand0" data-toggle="collapse" data-parent="#accordion" href="#collapse0">Expand</a>
</div>
</div>
</div>
</div>
</div>
</div>
and the associated javascript (straight from the flask docs) is:
$(function() {
$('a#expand0').on('show.bs.collapse', function (){
$.getJSON($SCRIPT_ROOT + '/_add_numbers', {
a: $('input[name="a"]').val(),
b: $('input[name="b"]').val()
}, function(data) {
$("#result").text(data.result);
});
return false;
});
});
Now (clearly), the code won't work (no var's a and b, '#results' div not defined, which is left as a followup/edit for later), but monitoring the console (using Eclipse, flask requests are shown there), there seems to be no server call at all when pressing the 'expand' link. Note that the accordion works fine (expands and collapses).
Replacing
$('a#expand0').on('show.bs.collapse', function (){ with
$('a#calculate').bind('click', function() { in the javascript shows the proper server call: "127.0.0.1 - - [18/Jan/2014 11:45:58] "GET /_add_numbers HTTP/1.1" 404 -"
but overrides the accordion expand functionality (which makes sense).
Any ideas?
When you swap use the click binding, returning false at the end of the function will override the collapse function. Removing the return false; may help.
As to doing it using the show.bs.collapse binding, is it really the a#expand0 element that has a show.bs.collapse event? Isn't it the #collapse0 element (or one of the others)?

Moving a div from inside one div to another div

How do I move the contents of a div to the contents of another div?
I want to move .sidebar from .post to .carousel. How to do it by using javascript?
I want to go from this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
to this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post"></div>
<div class="sidebar"></div>
</div>
</div>
</div>
document.getElementsByClassName('row')[0].appendChild(document.getElementsByClassName('sidebar')[0]);
I'd suggest, on the off-chance you've more than one element with that class (and assuming that in all instances they should be inserted after their parentNode):
$('.sidebar').each(function(){
$(this).insertAfter(this.parentNode);
});
JS Fiddle demo.
References:
each().
insertAfter().
Assuming you only have only one such occurrence, you can use plain JavaScript:
var sidebar = document.getElementsByClassName('sidebar')[0];
// move after parent node
sidebar.parentNode.parentNode.appendChild(sidebar);
The appendChild() function moves rather than copies existing elements from their previous location in the tree. To perform a copy you would need to clone the respective elements first.
Try to use JQuery Draggable() and Droppable() functions.
See the Demo...
Droppable | JQuery UI

Form not found in foundation tab (using ng-include)

I have 2 forms. One is a regular form (TestForm) and the other is inside a foundation tab.
Page 1:
<div class="columns small-8">
<form name="testForm">
</form>
</div>
<div class="row">
<div class="section-container tabs" data-section="tabs">
<section class="section active">
<p class="title">Gegevens</p>
<div class="content" data-slug="data">
<div ng-include src="'partials/user/UserData.html'"></div>
</div>
</section>
</div>
</div>
UserData.html (the tab):
<form name="debugForm"></form>
So the problem is below that I can't reach my debugForm. Does anyone know how to reach the form? (need to set validity)
Also when I trie to reach by going via the child scope:
$scope.$$childHead.debugForm
doesn't work.
The problem is that you can't access child scopes from a parent scope in angular.
I temporarily "solved" it by just not using the include and instead just put the html in there.
Still open for better suggestions though..
Try src="partials/user/UserData.html" (whithout ' )

Categories

Resources