SideBar No display in Ipad - javascript

Good Day,
Question I have already try to apply all the fixes for Ipad to get the menu working, Like onclick="" and cursor: pointer;, I already check that the Jquery is working by putting: $(document).ready(function(){alert("We accessed the Javascript"); }); It works in every device, but in Ipad does not work at all, does not recognise the click and does not change the style class either.
I use as blueprint this example, then I customise it, so it has not been change that much.
SlideMenu
Here is the big code, sorry :S:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
class="no-js">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge; IE=11; IE=10; IE=9; IE=8; IE=7, chrome=1"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>BBVA</title>
<!-- BOOTSTRAP STYLES-->
<link href="${request.contextPath}/assets/css/bootstrap.css" rel="stylesheet" media="all" />
<!-- BBVA fonts -->
<link href="${request.contextPath}/assets/css/style2.css" rel="stylesheet" media="all" />
<!--SCRIPTS-->
<!---Apple Safari iPad and iPhone Meta Tags-->
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="width=992, initial-scale=1, user-scalable=no"/><!--width is pixels, range 200 to 10000-->
<meta name="format-detection" content="telephone=no"/> <!--disables automatic detection of possible phone numbers-->
<meta name="apple-mobile-web-app-capable" content="yes"/><!--specifies full-screen mode-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/><!--specify full-screen mode first-->
</f:facet>
<!-- Custom BBVA Theme create by: Alejandro Daza -->
<link href="${request.contextPath}/assets/css/style.css" rel="stylesheet" media="all" />
<script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/assets/js/modernizr.custom.js"></script>
<script src="${request.contextPath}/assets/js/style1.js"></script>
<script src="http://192.168.0.3:1337/vorlon.js"></script>
<script src="${request.contextPath}/assets/js/classie.js"></script>
</h:head>
<h:body>
<script>
$(document).ready(function(){
//Check if the current URL contains '#'
if(document.URL.indexOf("#")==-1){
// Set the URL to whatever it was plus "#".
url = document.URL+"#";
location = "#";
//Reload the page
location.reload(true);
}
});
</script>
<div class="container pagina">
<div class="col-md-1 col-lg-1 menu2">
<div class="col-md-4 information nopaddingleft nopaddingright">
<ul class="information_menu">
<li class="active" data-id="1"><i class="icon-home_icon"></i></li>
<li data-id="2"><a id="showmenu1" onclick="" ><i class="icon-menu_icon"></i></a></li>
<div class="spacing"></div>
<li data-id="3"><i class="icon-settings_icon"></i></li>
<li data-id="4"><i class="icon-help_icon"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i></li>
</ul>
</div>
<!-- Sidebar -->
<div class="menunivel1 menunivelleft1" id="menunivel1">
<ul class="information_menunivel1">
<li class="active" data-id="1"><a href="#">
<img src="../assets/img/perfil.png" style=" width: 35%; position: absolute; left: 13px;top: 13px;" />
<ul class="menuPerfil">
<li>
Luci Santodomingo
</li>
<li>
Gerente
</li>
<li>
Oficina Calle 123
</li>
<li>
Bogotá
</li>
</ul>
</a></li>
<li><a id="showmenu2" href="#" onclick="" ><p>Gestion comercial <span class="icon-forward_icon flechas"></span></p></a></li>
<li><p>Cartera de clientes <span class="icon-forward_icon flechas"></span></p></li>
<li><p>Oportunidades comerciales <span class="icon-forward_icon flechas"></span> </p></li>
<li><p>Portal de desarrollo comercial <span class="icon-forward_icon flechas"></span> </p></li>
<li><p>Portal MIS <span class="icon-forward_icon flechas"></span></p></li>
<li><p>Alerta de fuga</p></li>
</ul>
<!-- Sidebar -->
<div class="menunivel2 menunivelleft2" id="menunivel2">
<ul class="information_menunivel2">
<li class="active">
<a href="#">
<ul class="menuPerfil">
</ul>
</a>
</li>
<li ><a id="showmenu3" href="#" onclick=""><p>Citas para hoy <span class="icon-forward_icon flechas"></span></p></a></li>
<li><p>Agenda <span class="icon-forward_icon flechas"></span> </p></li>
<li data-id="4"><p>Reclamos <span class="icon-forward_icon flechas"></span> </p></li>
</ul>
<!-- Sidebar -->
<div class="menunivel3 menunivelleft3" id="menunivel3">
<ul class="information_menunivel3">
<li class="active" data-id="1">
<a href="#">
<ul class="menuPerfil">
</ul>
</a>
</li>
<li><p>Propia</p></li>
<li><p>Mis Ejecutivos </p></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="col-md-11 col-lg-11 contenedorderecha clearfix">
<div class="row contenedorModulos clearfix">
<h:form id="principalForm">
<ui:insert name="content"/>
</h:form>
</div>
</div>
</div>
<script>
//<![CDATA[
var menunivel1 = document.getElementById('menunivel1'),
menunivel2 = document.getElementById('menunivel2'),
menunivel3 = document.getElementById('menunivel3');
$("#showmenu1").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel1, 'menu1open');
});
$("#showmenu2").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel2, 'menu2open');
});
$("#showmenu3").click(function(){
classie.toggle(this, 'active');
classie.toggle(menunivel3, 'menu3open');
});
//]]>
</script>
</h:body>
</f:view>
</html>
As you can see I am using xhtml, I dont know if that is related with the issue, or if is any primefaces query that is interfering with the on file jquery.
I have been with this issue for more than 2 weeks, I have the webpage on a local server, for security reason I will provide you with the link by chat or email If you want to take a complete look at it.
sorry, my english is not that great.


Some jquery functions in the web will not work the same way in IPAD or any other device.
Try this
$('selector').on('click touchstart', function() {
});
$("#showmenu1").on('click touchstart', function(){
classie.toggle(this, 'active');
classie.toggle(menunivel1, 'menu1open');
});

Related

Is it possible after click on an IMG to go to a specific tab in bootstrap 5?

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>

Make Tab Active with Bootstrap using Javascript, Thymeleaf

I'm programming a Website and I worked through some bootstrap tutorials and I've seen the List group which is very cool.
At the end they show how to implement this "active" feature. I tried to, but I couldn't make it work.
Maybe you guys now how to do it...
I have also something in JavaScript but it doesn't work.
<!doctype html>
<html lang="en"
th:replace="~{mopslayout :: html(name='Klausurzulassung', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<th:block th:fragment="headcontent">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<link href="../static/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
th:href="#{node_modules/bootstrap/dist/css/bootstrap.min.css}">
</th:block>
<title>Base Template</title>
</head>
<body>
<header>
<nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
<div class="list-group" id="myList" role="tablist">
<span sec:authorize="hasRole('orga')">
<a class="list-group-item list-group-item-action active" data-toggle="list"
href="#zulassungsliste" role="tab" th:href="#{/zulassung2/orga/upload-csv}">Zulassungsliste
hochladen</a>
</span>
<span sec:authorize="hasRole('orga')">
<a class="list-group-item list-group-item-action" data-toggle="list" href="quittungenValidieren"
role="tab" th:href="#{/zulassung2/orga/upload-receipt}">Quittungen validieren</a>
</span>
<span sec:authorize="hasRole('studentin')">
<a class="list-group-item list-group-item-action" data-toggle="list" href="studiseite"
role="tab" th:href="#{/zulassung2/studi}">Studiseite</a>
</span>
</div>
</nav>
</header>
<script>
$(function () {
console.log('ready');
$('.list-group span').click(function (e) {
e.preventDefault()
$that = $(this);
$that.parent().find('li').removeClass('active');
$that.addClass('active');
});
})
</script>
<main th:fragment="bodycontent">
<div th:replace="${content} ?: ~{}"></div>
</main>
</body>
</html>

Google Apps Dad Joke Script - JSON parse error "Unexpected token: < "

I'm trying to pull a joke from the dad joke API using this GAS JSON guide yet am running into a parse error when I try to get a JSON object.
The error happens when I call JSON.parse(dadJokeText);
The first fix I've tried was publishing my app for public, anonymous use (may have been an auth issue), that didn't work.
Tried reformatting my code using this suggestion, still same error.
I do not have any experience using JSON, sorry that this is a dupe post, haven't had success trying to learn from the other questions.
Thanks in advance
function getJoke() {
var url = "https://icanhazdadjoke.com/";
var options = {
"contentType" : "application/json"
}
// make a GET request to the dad joke API
var dadJokeJSON = UrlFetchApp.fetch(url);
var dadJokeText = dadJokeJSON.getContentText();
var dadJokeObject = JSON.parse(dadJokeText);
var joke = dadJokeObject.value['joke'];
// log the joke that you retrieved
Logger.log(joke);
}
edit: this is the value of dadJokeText, looks like the HTML for the page
[18-12-10 12:06:11:690 EST] <!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, minimum-scale=1">
<meta name="description" content="The largest collection of dad jokes on the internet" />
<meta name="author" content="C653 Labs" />
<meta name="keywords" content="dad,joke,funny,slack,alexa" />
<meta property="og:site_name" content="icanhazdadjoke" />
<meta property="og:title" content="icanhazdadjoke" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://icanhazdadjoke.com/j/7UnjNRfapzd" />
<meta property="og:description" content="Why should you never trust a pig with a secret? Because it's bound to squeal." />
<meta property="og:image:url" content="https://icanhazdadjoke.com/j/7UnjNRfapzd.png" />
<meta property="og:image:secure_url" content="https://icanhazdadjoke.com/j/7UnjNRfapzd.png" />
<meta property="og:image:secure_url" content="https://icanhazdadjoke.com/static/smile.png" />
<meta property="og:image:type" content="image/png" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="#icanhazdadjoke">
<meta name="twitter:title" content="icanhzdadjoke">
<meta name="twitter:description" content="Why should you never trust a pig with a secret? Because it's bound to squeal.">
<meta name="twitter:image" content="https://icanhazdadjoke.com/static/smile.png">
<meta name="twitter:url" content="https://icanhazdadjoke.com/j/7UnjNRfapzd" />
<link rel="canonical" href="https://icanhazdadjoke.com/j/7UnjNRfapzd">
<link rel="amphtml" href="https://icanhazdadjoke.com/j/7UnjNRfapzd/amp">
<title>icanhazdadjoke</title>
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/static/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/static/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/static/manifest.json">
<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#1fc8db">
<link rel="shortcut icon" href="/static/favicon.ico">
<meta name="msapplication-config" content="/static/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/static/dist/style.css?55f4ea12">
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebSite",
"url": "https://icanhazdadjoke.com/",
"name": "icanhazdadjoke",
"description": "The largest collection of dad jokes on the internet",
"potentialAction": {
"#type": "SearchAction",
"target": "https://icanhazdadjoke.com/search?term={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "Organization",
"url": "https://icanhazdadjoke.com/",
"logo": "https://icanhazdadjoke.com/static/smile.png",
"name": "icanhazdadjoke",
"description": "The largest collection of dad jokes on the internet",
"email": "support#icanhazdadjoke.com"
}
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({google_ad_client: "ca-pub-3200991035275362", enable_page_level_ads: true});
</script>
</head>
<body>
<nav class="nav has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item is-brand" href="/">
<img src="/static/smile.svg" alt="icanhazdadjoke logo" />
<span class="subtitle pushhalf--left">
icanhazdadjoke
</span>
</a>
</div>
<span id="nav-toggle" class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div id="nav-menu" class="nav-right nav-menu">
<a class="nav-item is-tab" href="/">
<span class="icon is-small">
<i class="fa fa-random"></i>
</span>
<span class="pushquarter--left">
Random joke
</span>
</a>
<a class="nav-item is-tab" href="/search">
<span class="icon is-small">
<i class="fa fa-search"></i>
</span>
<span class="pushquarter--left">
Search jokes
</span>
</a>
<a class="nav-item is-tab" href="/submit">
<span class="icon is-small">
<i class="fa fa-pencil-square-o"></i>
</span>
<span class="pushquarter--left">
Submit new joke
</span>
</a>
<div class="nav-item">
<a href="/slack-add" style="height:40px; max-width:139px">
<img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" style="width:139px; height:40px; max-height: 40px" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack#2x.png 2x" />
</a>
</div>
<div class="nav-item">
<a class="button" target="_blank" href="https://www.amazon.com/Brett-Langdon-icanhazdadjoke/dp/B01N6CQ3NZ/" style="background-color: #ffffff; color: #5ebfe4; border-radius: 6px; font-weight: 500; height:40px; width:139px; max-width:139px">
<img src="/static/alexa-logo.png" style="margin-left: -0.5em;">
Add to <strong style="margin-left: 0.25em">Alexa</strong>
</a>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container">
<div class="level">
<div class="level-left">
<div class="content level-item">
<h1>Random dad joke:</h1>
</div>
</div>
<div class="level-right">
<a class="button is-primary level-item" href="/">
<span class="icon is-small">
<i class="fa fa-random"></i>
</span>
<span>
New joke
</span>
</a>
</div>
</div>
<div class="content">
<div class="card">
<div class="card-content">
<p class="subtitle">Why should you never trust a pig with a secret? Because it's bound to squeal.</p>
</div>
<footer class="card-footer">
<a class="card-footer-item" href="/j/7UnjNRfapzd">
<span class="icon is-small">
<i class="fa fa-chain"></i>
</span>
<span class="pushquarter--left">
Permalink
</span>
</a>
<a class="card-footer-item" target="_blank" href="https://twitter.com/intent/tweet?url=https://icanhazdadjoke.com%2Fj%2F7UnjNRfapzd%2Famp&text=Check+out+this+%23dadjoke&via=icanhazdadjoke">
<span class="icon is-small">
<i class="fa fa-twitter"></i>
</span>
<span class="pushquarter--left">
Share on Twitter
</span>
</a>
</footer>
</div>
</div>
<div class="content pushwhole--top">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3200991035275362" data-ad-slot="5324903139" data-ad-format="auto"></ins>
</div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column is-5">
<div class="content">
<p>
<strong>icanhazdadjoke.com</strong> by C653 Labs.
</p>
<p>
<i>icanhazdadjoke.com</i> is the largest selection of dad jokes on the internet.
Now supporting many different integrations to ensure you can access the dad jokes that you need wherever you are.
</p>
</div>
</div>
<div class="column is-3"></div>
<div class="column is-2">
<aside class="menu">
<ul class="menu-list">
<li>Contact</li>
<li>Twitter</li>
<li>Slack app</li>
<li>Alexa skill</li>
<li>Discord bot</li>
<li>HipChat plugin</li>
<li>Twist integration</li>
</ul>
</aside>
</div>
<div class="column is-2">
<aside class="menu">
<ul class="menu-list">
<li>About</li>
<li>API</li>
<li>Random joke</li>
<li>Search jokes</li>
<li>Submit new joke</li>
</ul>
<

Nowhere in your "fetch" call do you set the "Accept" header to "application/json" as required by the API in order to get the response formatted as JSON.
You do set a variable called options in your code, but as far as I can see you never use it for anything. And in any case it sets the wrong header - needs to be "Accept", not "ContentType" - actually it should be "Content-Type" to be correct, but even then, Content type tells the server what type of data you are sending, not what kind you would like back in return.
I would expect you need to make your request like this:
var url = "https://icanhazdadjoke.com/";
var options = {
method: 'GET',
headers: {
"Accept" : "application/json"
}
};
// make a GET request to the dad joke API
var dadJokeJSON = UrlFetchApp.fetch(url, options);
See https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch for documentation on the Fetch API in JavaScript

innerHTML not changing text on browser in Materialize

innerHTML is working on console and it's changing the text in anchor tag but the in display on browser, it is not changing. I gave tag for login an id of "changeIt" and then retrieved the ID by using getElementByID(); function and at last changed the text of that. I did the same in case of tag without any use of Materialize and it was working. Does DOM does not work with materialize CSS framework?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Skynet | Live courses from Universites</title>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
<body>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function init() {
var name = document.getElementById("changeIt");
console.log("blah");
name.innerHTML = "Alex";
console.log(name);
}
window.onload = init;
</script>
<!-- NAVIGATION BAR -->
<div>
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<i class="material-icons left">account_balance</i>Skynet
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Become a Creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login"><i class="material-icons right">person</i>Login</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Become a creator</li>
<li>Courses</li>
<li>Contacts</li>
<li><a class="modal-trigger" href="#login" id="changeIt"><i class="material-icons">person</i>Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--LOGIN POP-UP CONTENT-->
<div id="login" class="modal">
<div class="modal-content modal-close">
<h4 class="header center-align">Skynet</h4>
<p class="flow-text center-align">Sign in to Skynet with</p>
<div class="center-btn">
<i class="ion-social-google left"></i>Google
</div>
</div>
</div>
</body>
</html>
After running this the value in console is changing -
blah
<a class="modal-trigger" href="#login" id="changeIt">Alex</a>

By using this -
$(document).ready(function() {
$('#change').text("Alex");
});

making an angular app from html to render data from http rest endpoint using $http

I am an absolute beginner with angularjs. My problem statement is to fetch the data from the database and show it as a grid. I am trying to render the data from the rest end point on clicking the anchor tag "Data Profiling". what is the best way to do it.
This is my first post in stackoverflow so please excuse any mistakes in the post.
<!DOCTYPE html>
<html lang="en" ng-app="d2vapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>D2V</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header -->
<a name="about"></a>
<div class="intro-header" ng-controller="d2vappcontroller">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Data to Value</h1>
<h3>Your one stop data explorer</h3>
<hr class="intro-divider">
<ul class="list-group">
<table align='center' width=100%>
<tr>
<td>
<span class="network-name">Data Catalogue</span></br></br>
</td>
<td>
<span class="network-name">Data Exploration</span></br></br>
</td>
</tr>
<tr>
<td>
<span class="dataprofiling">Data Profiling</span></br></br>
</td>
<td>
<span class="network-name">API Catalogue</span></br></br>
</td>
<tr>
<td>
<span class="network-name">RUNDECK</span></br></br>
</td>
<td>
<span class="">Infra Management</span></br></br>
</td>
</tr>
</table>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
Home
</li>
<li class="footer-menu-divider">⋅</li>
<li>
About
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Services
</li>
<li class="footer-menu-divider">⋅</li>
<li>
Contact
</li>
</ul>
<p class="copyright text-muted small">Copyright © Cisco 2016. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- AngularJS javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</body>
</html>

In your controller you have to inject the $http and $scope
angular.module('d2vapp').controller('d2vappcontroller' , function($scope, $http){
$scope.getDataProfiling = function(){
$http.get('path/to/your/route')
.success(function(response){
//do something with your response
})
.error(function(error){
//handle your error
});
}
});
In your html add the click action
<span class="dataprofiling">Data Profiling</span></br></br>
NOTE: Please go through the angularjs documentation for better understanding how various components of angular work

Categories