I've recently started learning JavaScript, and lately, I've been doing some exercises to gain skills, but I don't know if I'm doing it right on this one.
I'm trying to load a page inside a div that will be shown to the user after pressing the buttons on the banner.
document.getElementById("btnConta").addEventListener("click", function() {
$(document).ready(function() {
$("#content").load("http://127.0.0.1:5500/conta.html");
});
});
document.getElementById("btnDenuncia").addEventListener("click", function() {
$(document).ready(function() {
$("#content").load("http://127.0.0.1:5500/denuncia.html");
});
});
document.getElementById("btnConta").addEventListener("click", function() {
window.location.href = "index.html";
});
<!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>Pág. Inicial</title>
<link href="pagInicial.css" rel="stylesheet">
<script type="module" src="pagInicial.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<div class="wrapper">
<header role="banner">
<nav>
<div class="logo"><img class="logo" src="Imagens/Logo2.png" alt="logo"></div>
<div class="menu">
<ul>
<a id="btnDenuncia" class="btn btn1">Denuncias</a>
<a id="btnConta" class="btn btn1">Conta</a>
<a id="btnLogout" href="#"><button>Logout</button></a>
</ul>
</div>
</nav>
</header>
<div class="content" id="content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit </p>
</div>
</div>
</body>
</html>
Should I've been doing it this way, or is there a better way of doing it?
Thank you :)
The reason your code working, you put the document ready inside click event here you doing wrong
document.getElementById("btnConta").addEventListener("click", function () {
$(document).ready(function () {
$("#content").load("http://127.0.0.1:5500/conta.html");
});
});
you have ready DOM only once and put all your click events inside it like below
$(document).ready(function () {
document.getElementById("btnConta").addEventListener("click", function () {
$("#content").load("https://stackoverflow.com/users/8384983/neeraj);
});
document.getElementById("btnDenuncia").addEventListener("click", function () {
$("#content").load("https://stackoverflow.com/users/8384983/neeraj");
});
});
it's not working here due to cross-origin blocking to open URL you can check it now in your code it works perfectly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
document.getElementById("btnConta").addEventListener("click", function () {
$("#content").load("https://stackoverflow.com/company");
});
document.getElementById("btnDenuncia").addEventListener("click", function () {
$("#content").load("https://stackoverflow.com/company");
});
});
</script>
</head>
<body>
<div class="wrapper">
<header role="banner">
<nav>
<div class="logo"><img class="logo" src="Imagens/Logo2.png" alt="logo"></div>
<div class="menu">
<ul>
<a id="btnDenuncia" class="btn btn1">Denuncias</a>
<a id="btnConta" class="btn btn1">Conta</a>
<a id="btnLogout" href="#"><button>Logout</button></a>
</ul>
</div>
</nav>
</header>
<div class="content" id="content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit </p>
</div>
</div>
</body>
</html>
Related
I'm trying to learn programming from various online tutorials and I created flask server which predicts something. I also got the front-end with javascript but it wont run. I don't know why. I don't know JS. I know python well but that's it.
I don't know that to do.
here is the html file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<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://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>
<link rel="stylesheet" type="text/css" href="static/style.css">
<script type="text/javascript", src="static/code.js"></script>
<title>Heading</title>
</head>
<body>
<br>
<!--<img class="logo" src="static/final_v1.png" alt="">-->
<br>
<div class="container main">
<div class="jumbotron" id="holder">
<h1 class='main_heading'> Some Machine learning model</h1>
<h3>lorem ipsum dolor sit amet</h3>
<br>
<div class="instructions">
<h2>Instructions: </h2>
<p>1. lorem ipsum dolor sit amet</p>
<p>2. Curabitur tincidunt orci non nunc sagittis euismod.</p>
</div>
<br>
<br>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Feature1:</label>
<div class="col-sm-10">
<input class="form-control" id="feature1" placeholder=" Enter feature1" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="button btn btn-default">Submit</button>
</div>
</div>
</form>
<h2 class="result"></h2>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue">
<div class="footer-copyright text-center py-3">
<div class="bottom">
<p>xyz | Status Prediction Demo</p>
</div>
</div>
</footer>
<!-- Footer -->
</body>
</html>
here is the JS file:
var feature1;
$(document).ready(function(){
// fetch all DOM elements for the input
feature1_ = document.getElementById("feature1");
;
});
$(document).on('click','#submit',function(){
alert('end')
// on clicking submit fetch values from DOM elements and use them to make request to our flask API
var feature1 = feature1_.value;
if(feature1 == ""){
// you may allow it as per your model needs
// you may mark some fields with * (star) and make sure they aren't empty here
alert("empty fields not allowed");
}
else{
var requestURL = "http://127.0.0.1/predict?f1="+feature1;
console.log(requestURL); // log the requestURL for troubleshooting
$.getJSON(requestURL, function(data) {
console.log(data); // log the data for troubleshooting
prediction = data['json_key_for_the_prediction'];
});
// following lines consist of action that would be taken after the request has been read
// for now i am just changing a <h2> tag's inner html using jquery
// you may simple do: alert(prediction);
alert(prediction)
$(".result").html("Prediction is:" + prediction);
}
});
There is flask on the backend and js suppose to execute the link.
I have no idea why this is not working
Could you help me please ?
OK, there are several things:
Your submit button is missing an id
Your submit button causes reload
Your callback will run before you get a response
Change your HTML to:
<button id="submit" type="button" type="button" class="button btn btn-default">Submit</button>
The type attribute will remove the reload and the added id will make your script recognize it.
These lines of code runs before you get a response:
alert(prediction)
$(".result").html("Prediction is:" + prediction);
Put them inside getJSON:
$.getJSON(requestURL, function(data) {
console.log(data); // log the data for troubleshooting
var prediction = data['json_key_for_the_prediction']; // <-- added `var`
alert(prediction);
$(".result").html("Prediction is:" + prediction);
});
You're clearly new so I'm offering a strict/minimal test case file for you to work with. This one will simply trigger an alert when the page loads.
Download Notepad++ so you're not adding BOM (Byte Order Marks) if you're running a Microsoft operating system.
Save the following code as example.xhtml.
Modify as needed.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Default Test Template</title>
<script defer="true" type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
alert('JavaScript is enabled');
}
//]]>
</script>
<style type="text/css">
body {background-color: #000; color: #fff;}
</style>
</head>
<body>
<h1>Default Test Template</h1>
</body>
</html>
-- library.htm --
<iframe id="libcont" name="libcontent">
-- content.htm --
lorem ipsum <p name="scroll">lorem ipsum</p>
-- map.htm --
Read More...
Goal: clicking on the link within "map.htm" leads to "library.htm"
with "content.htm" already loaded into "libcont" iframe and scrolled
to the paragraph tagged "scroll". I can't find a HTML/CSS solution to this problem.
You can achieve this using javascript:
The anchor leads to library.htm, the onload function of library loads the iframe and uses scrollIntoView()(doc) to scroll to the right place.
map.htm
<!DOCTYPE html>
<html>
<body>
<h2>Map</h2>
Read More...
</body>
</html>
library.htm
<!DOCTYPE html>
<html>
<head>
<script>
loadContent = function() {
var frame = document.getElementsByName('libcontent')[0];
frame.onload = function() {
frames['libcontent'].document.getElementsByName('scroll')[0].scrollIntoView();
}
frame.src='content.htm';
};
</script>
</head>
<body onload="loadContent()">
<div style="height:1000px; background:gray;"> </div>
<h2>Library</h2>
<iframe id="libcontent" name="libcontent"></iframe>
<div style="height:1000px; background:gray;"> </div>
</body>
</html>
content.htm
<!DOCTYPE html>
<html>
<body>
<div style="height:1000px; background:black;"> </div>
<h2> Content </h2>
lorem ipsum <p name="scroll">lorem ipsum</p>
<div style="height:1000px; background:black;"> </div>
</body>
</html>
UPDATE: load different contents
To achieve this we are going to use a query parameter('content').
map.htm
<!DOCTYPE html>
<html>
<body>
<h2>Map</h2>
Content 1
Content 2
</body>
</html>
library.htm
<!DOCTYPE html>
<html>
<head>
<script>
loadContent = function() {
const urlParams = new URLSearchParams(window.location.search);
const content = urlParams.get('content');
// Check if the query param 'content' exists
if (content) {
var frame = document.getElementsByName('libcontent')[0];
frame.onload = function() {
frames['libcontent'].document.getElementsByName('scroll')[0].scrollIntoView();
}
// Loads the content
frame.src= content + '.htm#scroll';
}
};
</script>
</head>
<body onload="loadContent()">
<div style="height:1000px; background:gray;"> </div>
<h2>Library</h2>
<iframe id="libcontent" name="libcontent"></iframe>
<div style="height:1000px; background:gray;"> </div>
</body>
</html>
content2.htm
<!DOCTYPE html>
<html>
<body>
<div style="height:1000px; background:black;"> </div>
<h2> Content 2 </h2>
lorem ipsum <p name="scroll">lorem ipsum</p>
<div style="height:1000px; background:black;"> </div>
</body>
</html>
content1.htm
<!DOCTYPE html>
<html>
<body>
<div style="height:1000px; background:black;"> </div>
<h2> Content 1 </h2>
lorem ipsum <p name="scroll">lorem ipsum</p>
<div style="height:1000px; background:black;"> </div>
</body>
</html>
First of all, in content.htm use id instead of name for anchor:
<p id="scroll">lorem ipsum</p>
In map.htm use:
<a href='library.htm#scroll'>read more</a>
In library.htm use javascript to transfer the hash to the iframe URL:
<script>
document.getElementById('libcont').src = 'content.htm'+window.location.hash;
</script>
As result, the iframe will load as content.htm#scroll and scroll to the anchor.
I am new to JavaScript I don't understand it that well.
I used this code: but I have no idea what I am doing wrong.
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
jQuery(function($) {
var $bgs = $('.menu-toggle');
$('.menu-item').click(function() {
var $target = $($(this).data('target')).stop(true).slideToggle();
$bgs.not($target).filter(':visible').stop(true, true).slideUp();
})
})
</script>
</head>
<body>
<div class="menu-item menu-item-1" data-target=".recovery-bg">
Recovery
</div>
<div class="menu-item menu-item-2" data-target=".forensic-bg">
Forensics
</div>
<div class="menu-item menu-item-3" data-target=".erasure-bg">
Erasure
</div>
<div class="menu-item menu-item-4" data-target=".training-bg">
Training
</div>
<div class="menu-item menu-item-5" data-target=".product-bg">
Products
</div>
<div class="menu-toggle recovery-bg">
recovery-bg
</div>
<div class="menu-toggle forensic-bg">
forensic-bg
</div>
<div class="menu-toggle erasure-bg">
erasure-bg
</div>
<div class="menu-toggle training-bg">
training-bg
</div>
<div class="menu-toggle product-bg">
product-bg
</div>
</body>
</html>
I did get this same code from this website, but I've had no luck whatsoever.
I saw in your code that you are using jquery function but you didn't even call it to your html page.
Step1:
Download your jquery
Step2:
call it to your html page
<script src="jquery.min.js"></script>
It does not work because missing referance. You must add a reference.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
On my Contact page I have a link to show an email form, which right now is just a header. I want the email form to hide whenever a different "page" is clicked on; however, right now it takes two clicks to get rid of the form. The form should only be visible on the Contact Page. I made a small testcase to illustrate the problem.
My code works, but only after you click a menu twice. I need help making it so I click a link once and it disappears.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
</div>
<div class="contact_form">
<h1>Contact Form</h1>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
you have to change a little thing in your html
just move the contact_form div inside contact div
let code like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
<div class="contact_form">
<h1>Contact Form</h1>
</div>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
then remove the if statement form your jquery
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
$(".contact_form").slideUp().hide();
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
is(':visible') checks the display property of an element, you can use css method.
//Check the visiblity of #contact and hide accordangly
if ($("#contact").css('visibility') === 'hidden') {
$(".contact_form").slideUp().hide();
}
I'm trying to implement Fuelux's wizard feature and have hit a brick wall. I am simply trying to achieve a working replica of the live example but keep receiving the error in my console:
Uncaught TypeError: Object [object Object] has no method 'wizard'
I am finding a lot of the documentation a little overwhelming and would appreciate some clarity on the subject in plain [or plainer] English.
My markup is:
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
...
</div>
<div class="step-pane" id="step2">
...
</div>
<div class="step-pane" id="step3">
...
</div>
</div>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/require.js"></script>
<script src="js/wizard.js"></script>
<script>
$(document).ready(function(){
$('#my-wizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#my-wizard').on('changed', function(e, data) {
console.log('changed');
});
$('#my-wizard').on('finished', function(e, data) {
console.log('finished');
});
$('.btn-prev').on('click', function() {
console.log('prev');
$('#my-wizard').wizard('previous');
});
$('.btn-next').on('click', function() {
console.log('next');
$('#my-wizard').wizard('next','foo');
});
});
</script>
</body>
</html>
So close! For both the CSS and JS since Fuel UX includes Bootstrap you simply include Fuel UX in place of Boostrap and you get all of Bootstrap plus Fuel UX:
<link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css">
<script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>
Your template looks great and with just the above modifications, plus removing a couple of lines that were causing double-processing, this works just as expected. See the full example here:
Gist: https://gist.github.com/adamalex/5412079
Live example: http://bl.ocks.org/adamalex/5412079