I have a React application running where I am getting a page from an external ASP.NET app. I will like get just a section of the page and not the complete page. I do not know if it is possible to do that. My goal is to strip just the body of the page. My page goes as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Privacy Policy - DotnetApp</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">DotnetApp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<h1>Privacy Policy</h1>
<p>Use this page to detail your site's privacy policy.</p>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - DotnetApp - Privacy
</div>
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
</body>
</html>
I will like to get everything inside the <body> </body> tag. Below is my app
import * as React from 'react';
import { render } from 'react-dom';
export function setup(app) {
const connect = app.createConnector(() => fetch('https://localhost:44393/Home/Privacy').then(res => res.text()));
app.registerPage('/mypage', connect(({ data }) => {
console.log(data)
const ref = React.useRef();
var tmp = document.createElement("div");
return (<div className="Container" dangerouslySetInnerHTML={{__html:
data}}></div>)
}));
}
the data object holds the HTML page above
You can use the DOMParser interface to parse html as a DOM tree. For example:
let html = '<!DOCTYPE html><html><!-- some html --></html>'
let doc = new DOMParser().parseFromString(html, 'text/html');
let bodyHtml = doc.body.innerHTML;
Related
I was trying to create a description with an image with Bootstrap in which if the width of the screen is 500px, I want to change the class of the image so that it gets centered (it is originally on the left of the screen).
Here is my code
const mediaQuery = window.matchMedia('(min-width: 768px)')
var toonImg = document.getElementById('toonImg');
function img(e) {
if (e.matches) {
toonImg.className("rounded mx-auto d-block")
}
}
mediaQuery.addListener(img)
img(mediaQuery)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Seasons</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">CartoonPalace</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="/">Home</a>
<a class="nav-link" href="#">Pokemon</a>
<a class="nav-link" href="#">P&F</a>
</div>
</div>
</div>
</nav>
<section class="cartoon-description container">
<div class="card mb-3 bg-primary" style="max-width: 700;">
<div class="row g-0">
<div class="col-md-4">
<img id="toonImg" src="pokemon.jpg" class="" style="width:185px; margin:0; padding:0;" alt="...">
</div>
<div class="col-md-8">
<div class="card-body" style="color: #14161a">
<h5 class="card-title">Pokemon</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</section>
<script src="script.js">
</script>
</body>
</html>
I thought I was executing the media queries wrong but when I tried to console log when the width matched, it worked completely fine. What mistake am I making here?
Here I fixed it. You had to use .classList.add method. and passing the correct arguements in the img function made it work.
const mediaQuery = window.matchMedia('(min-width: 768px)')
var toonImg = document.getElementById('toonImg');
function img(mediaQuery){
if(mediaQuery.matches){
toonImg.classList.add("rounded", "mx-auto", "d-block");
console.log('triggered!');;
}
}
mediaQuery.addListener(img);
img(mediaQuery);
I'm working on a proyect and I'm trying to show only one value of a HTML after fetch it with react...
I think the problem is that I'm doing a innerHTML from that result and then a querySelector for the div I need to show..but I don't know how to show only that element, not the entire HTML.. One solution maybe It's use a display none on the rest, but I doubt about it...any help?
Thanks
Here it's my code:
import React, {useEffect, useState} from 'react'
function Test () {
useEffect(() => {
const fetchData = async () => {
const result = await fetch(https://myurl.com);
const grid = document.querySelector('.grid')
grid.innerHTML = result // --> here insert all the html into grid section
const txt = document.querySelector(".bys"); //--> Here select the div I need to show
};
fetchData();
});
return(
<section className="grid">
</section>
)
}
export default Test
And the HTML it's:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>la la la</title>
</head>
<body>
<nav id="hdr" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 visible-xs" style="padding:0 8px !important">
<div class="col-xs-5 no-padding">
<ul class="nav navbar-nav navbar-right">
<li>Enter</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-1 col-sm-2 hidden-xs">
<a class="navbar-brand" href="/"> </a>
</div>
<div class="col-lg-5 col-md-7 text-center hidden-sm hidden-xs">
<ul class="nav navbar-nav navbar-right bys">
<li class="bys_txt">Oprion 1: </li>
<li class="bys_value">1.000</li>
<li class="bys_txt">Option 2</li>
<li class="bys_value">3.0232</li>
</ul>
</div>
<div class="clear0"></div>
</div>
</div>
</nav>
</body>
</html>
Im trying to find my element in my HTML file, but it returns null even though its there.
I cant find something wrong with my code, neither in the html.
I read the other suggested threads on stackoverflow and have already wrapped it in an onload function, but it still not seem to work.
This is my JS file
window.onload = run();
function run(){
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
This is the HTML file
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>
I believe the issue is not get getElementById returns null
but this line
var archived = localStorage.getItem("arkiv");
Could you please specify if you are really storing the value at localstorage?
Your element is found, check the result before the error (localstorage security error, specific to stackoverflow)
window.onload = run();
function run(){
console.log(document.getElementById("archivedmovies"));
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>
Looks more a problem with your local storage array perhaps? If I code archived by hand the loop is run and object found....
window.onload = run();
function run(){
var archived = 'asddasdasd,asdsdasdas'
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
alert(getUL);
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
}
http://jsfiddle.net/1hwdaL4c/3/
i wrote a html script with a simple navbar. The main page is fine but when i click on "About" the page reload and i just want to reload the content and maintain the navbar. I'm using bootstrap. How can i do this?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- <form class="form-horizontal" action="/action_page.php"> -->
<div class="row">
<div class="col-*-10">
<legend><h2>Title</h2></legend>
</div>
</div>
<p>HOME!!!</p>
</div>
</body>
</html>
And this is my about page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>ABOUT!!!!!!!!!!!!!!!!!</p>
</body>
</html>
You're actually supposed to implement such a thing using a router, ui-bootstrap is just a UI library. The ui-router wiki explains how to accomplish this using multiple views per state.
Let's say we have two states in which we want to have a shared navbar, than define 2 states and provide each with 2 views, one navbar and another for the body
Provide each navbar view the same controller and template
$stateProvider
.state('stateA',{
views: {
'navbar#stateA': {
templateUrl: 'navbar.html', // <-- navbar html goes here
controller: 'navbarCtrl'
},
'body#stateA': {
templateUrl: 'report-table.html',
controller: 'StateACtrl'
}
}
})
.state('stateB',{
views: {
'navbar#stateB': {
templateUrl: 'navbar.html',
controller: 'navbarCtrl'
},
'body#stateB': {
templateUrl: 'report-table.html',
controller: 'StateBCtrl'
}
}
})
Inside your markup, you should maintain
<body>
<!-- the router will replace this with your html files -->
<div ui-view="navbar"></div>
<div ui-view="body"></div>
</body>
On the open body tag, make a javascript function named start onLoad="start()" Then within the function set the innerhtml the navbar code.
HTML:
<body onLoad="start()">
<div id="navbar"></div>
</body>
JS:
function start() {
document.getElementById("navbar").innerHTML = "<nav class="navbar navbar-inverse" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>";
}
There are a couple ways to do this without copying the whole navigation bar into every HTML file.
You can put all of the content in the same page and use JavaScript to hide/show specific sections when you click on the menu link
You can use JavaScript to retrieve the new content via AJAX and update the container.
You can add JavaScript to create the navigation bar on the fly for each page you want it on.
Here I have the code for a bootstrap navigation bar:
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="btnActive = navButton">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Everything works great, except for the fact that when you click one of the buttons on the navigation and then click another one, the previous one you clicked doesn't get deactivated (aka the 'active' class isn't removed aka it remains highlighted). How can I fix this?
You can use function in controller to update variable for active button.
var cvApplication = angular.module('cvApplication', []);
cvApplication.controller('contentCtrl', function ($scope) {
$scope.navButtons = ["Home", "About", "Contacts"];
$scope.btnActive = "About";
$scope.updateActive = function(navButton) {
$scope.btnActive = navButton;
};
});
<!DOCTYPE html>
<html lang="en" ng-app="cvApplication" ng-cloak ng-init="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" ng-controller="contentCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBarToggler">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Subjects
</div>
<div class="collapse navbar-collapse" id="mainNavBarToggler">
<ul class="nav navbar-nav">
<li ng-repeat="navButton in navButtons" ng-class="{ active: btnActive == navButton }" ng-click="updateActive(navButton)">
{{navButton}}
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is similar solution.
I don't know why it works with function, but don't work with interpolation in view. Possible, you get many local scopes in view.