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>
Related
Is it possible after click on an IMG to go to a specific tab in bootstrap 5?
Unfortunately a href in an IMG code doesn't work in this case.
I wanna go to About Me tab after clicking on a first imgI wanna go to Projects tab after clicking on a second imgI wanna go to Contact tab after clicking on a third img
Please find my code below and on jsfiddle - https://jsfiddle.net/84zyvu0t/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="menu">
<ul class="nav nav-pills">
<li class="nav-item menuItems">
About Me
</li>
<li class="nav-item menuItems">
Projects
</li>
<li class="nav-item menuItems">
Contact
</li>
</ul>
</div>
<div class="tab-content">
<!-- TAB NUMBER 1 - About Me -->
<div class="tab-pane fade show active" id="aboutMe">
<p>Hi, my name is Robert</p>
</div>
<!-- TAB NUMBER 2 - Projects -->
<div class="tab-pane fade" id="projects">
<p>This is a projects tab</p>
</div>
<!-- TAB NUMBER 3 - Contact -->
<div class="tab-pane fade" id="contact">
<p>Reach out to me</p>
</div>
</div>
<img src="https://picsum.photos/id/27/200/300" alt="">
<img src="https://picsum.photos/id/28/200/300" alt="">
<img src="https://picsum.photos/id/29/200/300" alt="">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
</script>
</body>
</html>
I found a solution from this link (Jacob Goh's solution)
How to change active bootstrap tab with javascript
you may also use .tab('show') for more flexibility
https://codepen.io/jacobgoh101/pen/ALELNr
go to menu
3 javascript:
function menu3(){ $('[href="#menu3"]').tab('show'); } Bootstrap
documentation: https://getbootstrap.com/javascript/#tabs
**BUT** I had to turn my imgs to buttons (so to speak) so I'm not even sure if that'll work in the future and if there are any consequences using them this way...
SOLUTION
function aboutMeTab() {
$('[href="#aboutMe"]').tab('show');
}
function projectsTab() {
$('[href="#projects"]').tab('show');
}
function contactTab() {
$('[href="#contact"]').tab('show');
}
button {
background-color: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="menu">
<ul class="nav nav-pills">
<li class="nav-item menuItems">
About Me
</li>
<li class="nav-item menuItems">
Projects
</li>
<li class="nav-item menuItems">
Contact
</li>
</ul>
</div>
<div class="tab-content">
<!-- TAB NUMBER 1 - About Me -->
<div class="tab-pane fade show active" id="aboutMe">
<p>Hi, my name is Robert</p>
</div>
<!-- TAB NUMBER 2 - Projects -->
<div class="tab-pane fade" id="projects">
<p>This is a projects tab</p>
</div>
<!-- TAB NUMBER 3 - Contact -->
<div class="tab-pane fade" id="contact">
<p>Reach out to me</p>
</div>
</div>
<a href="#aboutMe">
<button class="btn btn-primary przycisk" onclick="aboutMeTab()">
<img src="https://picsum.photos/id/27/200/300" alt="">
</button>
</a>
<a href="#projects">
<button class="btn btn-primary przycisk" onclick="projectsTab()">
<img src="https://picsum.photos/id/28/200/300" alt="">
</button>
</a>
<a href="#contact">
<button class="btn btn-primary przycisk" onclick="contactTab()">
<img src="https://picsum.photos/id/29/200/300" alt="">
</button>
</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
</script>
</body>
</html>
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;
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.
I am new to AngularJS and trying to make an application which loads data by calling APIs. It is like I am fetching the list of boxes of type A (Resource Groups) and then each Box of type A has multiple boxes of type B (Virtual Machines). So I have been able to fetch all type A boxes and by using each value of type A box, I have been able to fetch all type B boxes(VMs). But now how shall I put the VM's in respective resource group's panel-body.
(function() {
var app = angular.module('AzureManager', []);
app.controller('resourceGroupsController', function($scope, $http) {
$scope.getRGList = function() {
$http.get('/resource-group/all').then(function(response) {
$scope.resourceGroups = response.data.value;
});
};
$scope.getRGList();
});
})();
<!DOCTYPE HTML>
<HTML ng-app="AzureManager">
<head>
<title>Azure Manager</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<script src="public/app.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Azure Manager</a>
</div>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Anant
</li>
<li><span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid" ng-controller="resourceGroupsController">
<div class="panel panel-default" ng-repeat="RG in resourceGroups" id="{{RG.name}}-resources-container">
<div class="panel-heading">
<div class="panel-title">{{RG.name}}</div>
</div>
<div class="panel-body"></div>
</div>
</section>
</body>
</HTML>
Either call a vms/all endpoint by chaining the calls to resource groups and virtual machines and link the virtual machines to their resource groups after both promises have returned.
Or call a endpoint for each resource group:
$scope.getRGList = function() {
$http.get('/resource-group/all').then(function(response) {
$scope.resourceGroups = response.data.value;
$scope.resourceGroups.forEach(function (rg) {
$http.get('/virtual-machine/'+rg.id).then(function(response) {
rg.vms = response;
}
}
});
};
<section class="container-fluid" ng-controller="resourceGroupsController">
<div class="panel panel-default" ng-repeat="RG in resourceGroups track by RG.id" id="{{RG.name}}-resources-container">
<div class="panel-heading">
<div class="panel-title">{{RG.name}}</div>
</div>
<div class="panel-body">
<div class="vm" ng-repeat="vm in RG.vms track by $index">
{{vm.name}}
</div>
</div>
</div>
</section>
AngularJS v1.2.0rc1
I have setup an angular Model-View-Controller. It is accurately requesting data from my database and displaying the values on the html page. However, the problem I am having is when the data I am requesting changes from the current value being displayed, it is not updating the html view.
Code
Controller
var API_ORDER_ROUTE = '/api/stats';
function feedingStatsCtrl($http, $scope) {
$http.get(API_ORDER_ROUTE).success(function(data, status, headers, config) {
if (data.error) {
$scope.error = data.error;
} else {
$scope.current = data.current;
$scope.average = data.average.toFixed(2);
$scope.days_left = data.days_left ? data.days_left : 0;
$scope.days_remaining = Math.min($scope.days_left / 30 * 100.0, 100);
} // EOF else
}).error(function(data, status, headers, config) {
$scope.error = "Error fetching order statistics.";
});
}
UPDATE INCLUDING HTML CODE
HTML
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://d396qusza40orc.cloudfront.net/startup/code/jquery.js"></script>
<script src="https://d396qusza40orc.cloudfront.net/startup/code/bootstrap.js"></script>
<script src="js/angular.min.js" ></script>
<script src="js/controllers.js"></script>
<script src="js/google-analytics.js"></script>
<script src="https://coinbase.com/assets/button.js"></script>
<script src="js/coinbase-post-payment.js"></script>
<link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fsocial-buttons.css">
<link rel="stylesheet" href="css/bitstarter-styles.css">
</head>
<body>
<!-- Mobile-friendly navbar adapted from example. -->
<!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar"
data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"><%= name %></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>LedTest</li>
<li>Orders</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- We use row-fluid inside containers to achieve a resizable layout. -->
<!-- blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap/ -->
<!-- http://stackoverflow.com/a/12270322 -->
<div class="container">
<!-- Font and paired font of .heading/.subheading and body from Google Fonts -->
<!-- www.google.com/fonts/specimen/Ubuntu -->
<!-- www.google.com/fonts/specimen/Ubuntu#pairings -->
<div class="row-fluid heading">
<div class="span12">
<h1><%= product_name %></h1>
</div>
</div>
<div class="row-fluid subheading">
<div class="span12">
<!-- Special typography from Bootstrap for lead paragraph. -->
<!-- http://twitter.github.io/bootstrap/base-css.html#typography -->
<p class="lead"><%= product_short_description %></p>
</div>
</div>
<div class="row-fluid pitch">
<div class="span5 offset1 video">
<img class="img-polaroid" src="img/480x300.gif">
</div>
<!-- We define a new 'actions' div to contain statistics, order, and share buttons.-->
<div class="span5 actions" ng-controller="feedingStatsCtrl">
<div class="row-fluid">
<div class="span8 offset2">
<div class="row-fluid statistics">
<div ng-show="!error">
<div class="span4">
<!-- linediv-l and linediv-r give dividing lines that look
different in horizontal and vertical layouts, illustrating
media queries. -->
<div class="linediv-l">
<h3>{{current}}</h3> <p>Current</p>
</div>
</div>
<div class="span4">
<div class="linediv-c">
<h3>{{average}}</h3> <p>Average</p>
</div>
</div>
<div class="span4">
<div class="linediv-r">
<h3>{{days_left}}</h3> <p>Days Left</p>
</div>
</div>
</div>
<div ng-show="error">
<h3>{{error}}</h3>
</div>
</div>
</div>
<div class="row-fluid" ng-show="!error">
<div class="span10 offset1">
<!-- Bootstrap progress bar -->
<!-- http://twitter.github.io/bootstrap/components.html#progress -->
<div class="thermometer progress active">
<div class="bar bar-success" ng-style="{'width': days_remaining+'%'}"></div>
<div class="bar bar-warning" ng-style="{'width': (100-days_remaining)+'%'}"></div>
</div>
</div>
</div>
I know the data is being requested properly. When I refresh the browser it correctly updates the three variables I am pulling from the DB. I just can't figure out why the Angular controller is not dynamically updating. Can any provide some guidance?
You may make a common mistake: try to refer a primitive variable from parent scope, in Angular, child scope can not refer a primitive type variable defined in parent scope (string, number, bool...etc), any primitive reference would create a separate variable in child scope with same value. So even $scope.current changed in parent scope, the variable in child scope won't change.
further reading about scope
You can use object to avoid this happened:
var API_ORDER_ROUTE = '/api/stats';
function feedingStatsCtrl($http, $scope) {
$scope.result = {};
$http.get(API_ORDER_ROUTE).success(function(data, status, headers, config) {
if (data.error) {
$scope.result.error = data.error;
} else {
$scope.result.current = data.current;
$scope.result.average = data.average.toFixed(2);
$scope.result.days_left = data.days_left ? data.days_left : 0;
$scope.result.days_remaining = Math.min($scope.days_left / 30 * 100.0,100);
} // EOF else
}).error(function(data, status, headers, config) {
$scope.result.error = "Error fetching order statistics.";
});
}
In template:
<div class="span8 offset2">
<div class="row-fluid statistics">
<div ng-show="!error">
<div class="span4">
<!-- linediv-l and linediv-r give dividing lines that look
different in horizontal and vertical layouts, illustrating
media queries. -->
<div class="linediv-l">
<h3>{{result.current}}</h3> <p>Current</p>
</div>
</div>
<div class="span4">
<div class="linediv-c">
<h3>{{result.average}}</h3> <p>Average</p>
</div>
</div>
<div class="span4">
<div class="linediv-r">
<h3>{{result.days_left}}</h3> <p>Days Left</p>
</div>
</div>
</div>
<div ng-show="error">
<h3>{{result.error}}</h3>
</div>
</div>
</div>