loading view via java-script - javascript

i have a main html page (index.html)
<body>
<script type="text/javascript">
function active(el) {
var sections = document.querySelectorAll('.sidebar>li');
for (i = 0; i < sections.length; i++) {
sections[i].classList.remove('current');
}
el.classList.add('current');
}
</script>
<h1 onclick="active(this); load('content','pages/home.html')" class="sidebar-title">GOSSAMER LAN</h1>
<ul class="sidebar">
<li onclick="active(this); load('content','pages/network.html')">
<h2>Network settings</h2>
<small>Edit configuration</small>
</li>
</ul>
</section>
<section id="content"></section>
</section>
<script type="text/javascript" src="js/main.js"></script>
</body>
and network setting view (network.html) that has a button
<div class="save-button" onclick="validation();">Save changes</div>
what i want to do is on clicking the button to return to view (home.html)
function validation() {
var inputs = document.querySelectorAll('input[type=text],input[type=password]');
var input = [];
for (p = 0; p < inputs.length; p++) {
input.push(inputs[p].value);
if (!inputs[p].parentNode.classList.contains("deactive")) {
inputs[p].value == "" ? inputs[p].classList.add("error") : inputs[p].classList.remove("error")
}
}
if (input.indexOf("") == -1) {
sendData();
load("content","pages/home.html");
}
via my java script code
function load(page,src) {
console.log( document.getElementById(page));
document.getElementById(page).innerHTML='<object type="text/html" id="dynamic-'+page+'" data="'+src+'" style="width:100%; height: 100%;" ></object>';
}
load("content","pages/home.html");
i have put most of my code to make it kind of detailed as to what i hope to achieve i am getting Cannot set property 'innerHTML' of null when executing the onclick function (validation)
please any help ?
thank you

Related

Copying the UI-Bootstrap code does not work? How do I use UI-Bootstrap?

I am trying to use components from the http://angular-ui.github.io/bootstrap/ page and am basically copying the code exacctly just to get the framework.
But it does not work seem to work, am I missing something general?
It is the exact same code and I have added the dependencies as far as I understand, which was the error in the other similar post.
For example with the carousel (ui.bootstrap.carousel), I copied the available html code into an html file index.html:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
<button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="noWrapSlides">
Disable Slide Looping
</label>
</div>
</div>
<div class="col-md-6">
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
<br />Enter a negative number or 0 to stop the interval.
</div>
</div>
</div>
</body>
</html>
The js code I have copied into a js file called example.js:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: '//unsplash.it/' + newWidth + '/300',
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
};
$scope.randomize = function() {
var indexes = generateIndexesArray();
assignNewIndexesToSlides(indexes);
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
// Randomize logic below
function assignNewIndexesToSlides(indexes) {
for (var i = 0, l = slides.length; i < l; i++) {
slides[i].id = indexes.pop();
}
}
function generateIndexesArray() {
var indexes = [];
for (var i = 0; i < currIndex; ++i) {
indexes[i] = i;
}
return shuffle(indexes);
}
// http://stackoverflow.com/questions/962802#962890
function shuffle(array) {
var tmp, current, top = array.length;
if (top) {
while (--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
}
return array;
}
});
For better readability you can also find the code here: https://plnkr.co/edit/YZULMBb0br4IuhV4dUug?p=preview
When I run it, it just shows this on the page:
Slide {{slide.id}}
{{slide.text}}
Why?
Try, adding http: before the links, plunker loads these references directly, but when you load the urls directly in browser it wont work.
Sometimes not necessarily because almost all browsers take that as the default protocol if the user does not specify it directly
You need to add http:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
<script src="example.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

add div using appendChild

This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help
Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>

javascript dynamic content with select long running script

Basically been trying to figure out some javascript stuff, so was making a couple of divs, and a select, so depending on the selected option, depends on what div is shown/hidden.
It seems to work ok, hiding all but the first div after loading, then when the second option is selected, it shows the second div, hiding the first by appending a class.
When I change the option back to the first div though, it creates a long running script that jams everything up and I can't figure out where the long running script comes from.
Any advice appreciated.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.itemCont.show{
display:block;
}
.itemCont.hide{
display:none;
}
</style>
</head>
<body onload="sortDivs();">
<select name="options" id="opts" onchange="optSelect(this);">
<option value="0">item</option>
<option value="1">another</option>
</select>
<div class="output">
<div class="itemCont show" id="div0">
<h1>1</h1>
</div>
<div class="itemCont" id="div1">
<h1>2</h1>
</div>
</div>
</body>
<script async="async" ype="text/javascript">
function sortDivs(){
var divs = document.getElementsByClassName('itemCont');
for( var i = 0; i < divs.length; i++ ){
if(i>0){
divs[i].className += ' hide';
}
}
}
function optSelect(opt){
var val = opt.value;
var divs = document.getElementsByClassName('itemCont');
var divActive = document.getElementsByClassName("itemCont show");
divActive[0].className = divActive[0].className.replace(/\bshow\b/,'hide');
for ( var i = 0; i < divs.length; i++ ) {
if(i = val){
divs[i].className = divs[i].className.replace(/\bhide\b/,'show');
}
}
}
</script>
</html>
You have a typo = should be ==
for ( var i = 0; i < divs.length; i++ ) {
if(i == val){
divs[i].className = divs[i].className.replace(/\bhide\b/,'show');
}
}
I recommend using jQuery (toggle) to handle this kind of stuff though :)

element.onclick event after window load not working in javascript

I need help. I want elements to be shown when clicking on their siblings. I want to do this stuff with pure javascript.
When I run my code and I click on the neither nothing happens nor errors are shown in the browser console (Chrome and Firefox).
I think one problem could be the onclick event inside de window.onload function, but I don't find the way to fix it.
Here's my HTML code:
<div class="year_element">
<h3 class="year">2015</h3>
<ul class="hide_months months">
<li>Marzo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1998</h3>
<ul class="hide_months months">
<li>Mayo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1987</h3>
<ul class="hide_months months">
</ul>
</div>
And here's my JavaScript code:
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i += 1) {
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
Your answers telling me the code worked, gave me the key of the problem: another file js was executing a window.onload function so this one didn't work. This has been fixed by using.
window.addEventListener("load", one_function, false);
window.addEventListener("load", another_function, false);
Thanks.
Are you running your javascript correctly?
I pasted everything into a html file, and the click seems to work.
It adds and removes the hide_months class. I don't have your css to make Marzo/Mayo dissapear, but looks like the loading and clicking are working as expected.
<script type="text/javascript">
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i += 1) {
console.log('found some elements');
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
</script>
Hm I try your example and it work fine in chroma.
I just add CSS that should work for this purpose.
<html>
<body>
<div class="year_element">
<h3 class="year">2015</h3>
<ul class="hide_months months">
<li>Marzo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1998</h3>
<ul class="hide_months months">
<li>Mayo
</li>
</ul>
</div>
<div class="year_element">
<h3 class="year">1987</h3>
<ul class="hide_months months">
</ul>
</div>
<script>
window.onload = function() {
var years = document.getElementsByClassName('year');
//When doing click on a year, show months
for (var i = 0; i < years.length; i++) {
//Function needs event as parameter to work
years[i].onclick = function(event) {
var selectedYear = event.target;
var month_list = selectedYear.nextSibling.nextSibling;
//Showing months
if (month_list.classList.contains('hide_months')) {
month_list.classList.remove('hide_months');
//Hiding months
} else {
month_list.classList.add('hide_months');
}
};
};
}
</script>
<style>
.year_element{font-weight: normal;}
.year{font-weight: bold; cursor: pointer;}
.months{color: green;}
.hide_months{display: none;}
</style>
</body>
</html>

javascript style.display not working

Anyone can tell me why even though by debugging with fireBug the script correctly finds the proper element, the style.display doesn't update the property of the ul which remains set to none?
<html>
<div id="nav">
<ul>
<li>Studio
</li>
</ul>
</div>
<div id="subnav1">
<ul style="display: none">
<li>normally hidden
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
function show()
{
var subNav1 = document.getElementById("subnav1");
var ull = subNav1.getElementsByTagName("ul");
for (var i = 0, ii = ull.length; i < ii; i++)
{
if(ull[i].style.display == "visible")
{
ull[i].style.display = "none";
}
else
{
ull[i].style.display = "visible";
}
}
};
</script>
</html>
"visible" is not a valid css display value. I think you are looking for "block"

Categories

Resources