Is this script only written in javascript and html? - javascript

I don't own this script but i'm curious to know if its written in anything besides javascript and html.
Is there certain place to write scripts like this? If so, could you recommend any websites? Thanks so much.
<script>
function login() {
var username = $('#loginusername').val();
var password = $('#loginpassword').val();
document.getElementById("logindiv").style.display = "none";
document.getElementById("loginimage").style.display = "inline";
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("logindiv").innerHTML = xmlhttp.responseText;
document.getElementById("loginimage").style.display = "none";
document.getElementById("logindiv").style.display = "inline";
if (xmlhttp.responseText.search("Redirecting") != -1) {
setInterval(function() {
window.location = "index.php"
}, 3000);
}
}
}
xmlhttp.open("POST", "ajax/login.php?type=login", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("username=" + username + "&password=" + password);
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chither.com The best Slither and Agar.io bots service</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="Description" content="free bots, best experience, without lags, Slither.io bots - Best Bots for Slither, agar.io bots - Best Bots for agar.io" />
<meta name="Author" content="" />
<meta name="Reply-To" content="" />
<meta name="Robots" content="all" />
<meta name="Rating" content="general" />
<meta name="Keywords" content="Slither.io, chither, Slither bot, Slitherbots, Slither bots, Slitherio bots, Chither.com, hacks, cheats, free, bots, Slitheriobots, Slitherio bots, Slither.io bots, Bot, Worms, Worm, Bots, Worms, support, best, lagfree, Slither, agar.io, agar bot, agarbots, agar bots, agario bots, hacks, cheats, free, bots, agariobots, agario bots, agar.io bots, Bot, Minion, Bots, Minions, support, best, lagfree, agar, mass bot"
/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<!-- Toastr style -->
<link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
<!-- Gritter -->
<link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="js/actions.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Flot -->
<script src="js/plugins/flot/jquery.flot.js"></script>
<script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/plugins/flot/jquery.flot.spline.js"></script>
<script src="js/plugins/flot/jquery.flot.resize.js"></script>
<script src="js/plugins/flot/jquery.flot.pie.js"></script>
<!-- Peity -->
<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/demo/peity-demo.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- jQuery UI -->
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- GITTER -->
<script src="js/plugins/gritter/jquery.gritter.min.js"></script>
<!-- Sparkline -->
<script src="js/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- Sparkline demo data -->
<script src="js/demo/sparkline-demo.js"></script>
<!-- ChartJS-->
<script src="js/plugins/chartJs/Chart.min.js"></script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-77344643-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript">
window.cookieconsent_options = {
"message": "This website uses cookies to ensure you get the best experience on our website",
"dismiss": "Got it!",
"learnMore": "More info",
"link": "",
"theme": "dark-bottom"
};
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.10/cookieconsent.min.js"></script>
<!-- Toastr -->
<!--<script src="js/plugins/toastr/toastr.min.js"></script>-->
</head>
<body class="gray-bg">
<!--<body style="background-image: url(http://slither.io/s/bg45.jpg); background-repeat: repeat;">-->
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div>
<!--<h1 class="logo-name">CHITHER.COM</h1>-->
<img src="logo.png" />
</div>
<!--<h3>Welcome to Chither.com</h3>-->
<p>Login in</p>
<div class="m-t">
<div id="logindiv" style="display:none"></div>
<img id="loginimage" src="img/ajax-loader.gif" style="display:none" />
<div class="form-group">
<input type="text" name="username" id="loginusername" class="form-control" placeholder="Username" value="" />
</div>
<div class="form-group">
<input type="password" name="password" id="loginpassword" class="form-control" placeholder="Password" value="" />
</div>
<div class="pull-left">
By logging in, you agree to our ToS
</div>
<br /><br />
<button class="btn btn-primary block full-width m-b" type="button" onclick="login()">Sign in</button>
<!--<small>Forgot password?</small>-->
<p class="text-muted text-center"><small>Do not have an account?</small></p>
<button class="btn btn-sm btn-white btn-block" onClick="location.href='register.php'">Create an account</button>
</div>
<p class="m-t"> <small>© All Rights Reserved Chither.com 2017</small> </p>
</div>
</div>
<!-- Mainly scripts -->
<script type="text/javascript">
$("#signinForm").validate({
rules: {
login: "required",
password: "required"
},
messages: {
firstname: "Please enter your login",
lastname: "Please enter your password"
}
});
</script>
</body>
</html>

Yes this "script" is written in only HTML and Javascript, but it uses multiple plugins and frameworks. This is defined by the link href and script tags. For example bootstrap is an front-end(how your page looks) framework and Jquery is an Javascript framework.
It does refer to other files for example PHP(e.g. index.php) and CSS styles(E.g. in link href="css/style.css" rel="stylesheet"). Without these CSS files your site will not have the same appearance and functionality.
The most simple way to write HTML is in notepad and safe them as .html. You can then open them with you preferred browser. For starting tutorials I would recommend W3Schools. For example a tutorial on Js is: https://www.w3schools.com/js/ or html: https://www.w3schools.com/html/

Related

Prompt the user to type in a character/string and tell whether the input is in a given string

I need to create two functions, to request the user to type in a character and a string.
The inputs are matched with a given string.
Then tell the user, if the input character/string is found in the default given string.
So far I have created the basics to get the user inputs, but couldn't find any method to implement the javascript functions.
Any help would be highly appreciated.
Here's my code so far..!
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width shrink-to-fit=no initial-scale=1">
<title>Web Programming is fun!</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
>
<style>
p{display: inline;}
</style>
</head>
<body>
<div class="container">
<h1>Web Programming is Fun!</h1>
<br>
<p>Lets use the above heading string to demonstrate inbuilt methods.</p>
<label for="inputCharacter">Please type a character: </label>
<input type="text" id="inputCharacter">
<button onclick="matchCharacter()">Match Character</button>
<p id="character"></p>
<br>
<label for="inputString">Please type a string: </label>
<input type="text" id="inputString">
<button onclick="matchString()">Match String</button>
<p id="string"></p>
<script>
let text ="Web programming is fun!";
function matchCharacter()
{
var char=document.getElementById("inputCharacer").innerHTML;
if(char.indexOf(text) )
{
alert("Your Character is found in the string!")
}
}
function matchSring()
{
}
</script>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous">
</script>
</body>
</html>
I think you have inverted the parameters. Instead of char.indexOf you should use text.indexOf.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width shrink-to-fit=no initial-scale=1">
<title>Web Programming is fun!</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
>
<style>
p{display: inline;}
</style>
</head>
<body>
<div class="container">
<h1>Web Programming is Fun!</h1>
<br>
<p>Lets use the above heading string to demonstrate inbuilt methods.</p>
<label for="inputCharacter">Please type a character: </label>
<input type="text" id="inputCharacter" maxLength="1">
<button onclick="matchCharacter()">Match Character</button>
<p id="character"></p>
<br>
<label for="inputString">Please type a string: </label>
<input type="text" id="inputString">
<button onclick="matchString()">Match String</button>
<p id="string"></p>
<script>
let text ="Web Programming is Fun!";
function matchCharacter()
{
var char=document.getElementById("inputCharacter").value;
if(text.indexOf(char) != -1)
{
alert("Your Character is found in the string!")
} else {
alert("Your Character is not found in the string!")
}
}
function matchString()
{
var string=document.getElementById("inputString").value;
if(text.indexOf(string) != -1)
{
alert("String Found in heading!")
} else {
alert("String not found in the heading!")
}
}
</script>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous">
</script>
</body>
</html>
Inside your javascript you can replace innerHTML to value attribute to access user input and then match that character.
And also you are calling indexOf on character but you have to call it on the text variable that you have created.
<script>
let text ="Web programming is fun!";
function matchCharacter()
{
var char=document.getElementById("inputCharacer").value;
if(text.indexOf(char) !== -1)
{
alert("Your Character is found in the string!");
return true;
}
return false;
}
function matchSring()
{
if (matchCharacter()) console.log("Character is found");
else console.log("Character is not found");
}
</script>

How to prevent input from displaying in address bar

I want to ask for help from you guys, I have tried coding my javascript so that it doesn't display the results from the input but the results I get are actually messy, so I attach my code with the original version that I haven't edited and it's still tidy, but the input is still displayed in address bar in the web browser.
Next is my code version before revision: (JavaScript)
(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
/*==================================================================
[ Simple slide100 ]*/
$('.simpleslide100').each(function(){
var delay = 7000;
var speed = 1000;
var itemSlide = $(this).find('.simpleslide100-item');
var nowSlide = 0;
$(itemSlide).hide();
$(itemSlide[nowSlide]).show();
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
setInterval(function(){
$(itemSlide).fadeOut(speed);
$(itemSlide[nowSlide]).fadeIn(speed);
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
},delay);
});
})(jQuery);
please help me also to place it in the coding that I have made, apologize that I am still a beginner and I'm confused how to do it anymore, all the help will be appreciated :)
This is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AN Newsletter | Subscribe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="flex-w flex-str size1 overlay1">
<div class="flex-w flex-col-sb wsize1 bg0 p-l-70 p-t-37 p-b-52 p-r-50 respon1">
<div class="wrappic1">
<a href="../main/index.html">
<img src="images/icons/logo.png" alt="IMG">
</a>
</div>
<div class="w-full p-t-100 p-b-90 p-l-48 p-l-0-md">
<h3 class="l1-txt1 p-b-34 respon3">
Post Box
</h3>
<p class="m2-txt1 p-b-46">
Follow me for update now!
</p>
<form class="contact100-form validate-form m-t-10 m-b-10" action="../success/success.html">
<div class="wrap-input100 validate-input m-lr-auto-lg" data-validate = "Email is required: ex#abc.xyz">
<input class="s2-txt1 placeholder0 input100 trans-04" type="text" name="email" placeholder="Email Address">
<button class="flex-c-m ab-t-r size2 hov1 respon5">
<i class="zmdi zmdi-long-arrow-right fs-30 cl1 trans-04"></i>
</button>
<div class="flex-c-m ab-t-l s2-txt1 size4 bor1 respon4">
<span>Subcribe Now:</span>
</div>
</div>
</form>
</div>
<div class="flex-w flex-m">
<span class="m2-txt2 p-r-40">
Follow me
</span>
<a href="https://www.facebook.com/stevenWilliamG" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/AdrikAleandra" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.instagram.com/audynaufal7/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/audy-naufal-ghiffari-ceh-875072141/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="wsize2 bg-img1 respon2" style="background-image: url('images/bg01.jpg');">
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>
P.S:
please don't block me, I'm still new and I still have to learn this platform and I still have to work on my project, so I think this platform will be very useful for me to complete my project, thank you
If you are referring to browser address bar with result of your input email address that looks like this:
/success/success.html?email=xxxx
This is because you haven't specified the method of your form so form uses PHP GET, and this is normal to pass the values on other page.
If you do not want to display this data, you should specify your form submit method like this:
<form class="contact100-form validate-form m-t-10 m-b-10"
action="../success/success.html" method="POST">
Keep in mind you have to fetch data on other side as POST also.
Read more about this here.
Replace GET method with POST method.

How do I fix the :ERR_BLOCKED_BY_CLIENT Error with Youtube Data Api V3 when displaying youtube videos using Iframe on the DOM?

I'm testing the Youtube Data API V3 to get a list videos by a query term and subsequently play them in an iframe.
I'm getting this error:
www-embed-player.js:306 GET https://googleads.g.doubleclick.net/pagead/id?exp=nomnom net::ERR_BLOCKED_BY_CLIENT
After some debugging and googling, I discovered that this error is often caused by adblockers. I've then disabled mine on Chrome and then retested the api call.
I no longer see the original error :ERR_BLOCKED_BY_CLIENT but my videos retrieved do not play. Player message: An error occurred, please try again later.
Below is the code. The JS is in the HTML file itself for simplicity.
Any help appreciated!
<!doctype html>
<html lang="en">
<head>
<title>Youtube API Test </title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
</head>
<style>
body {
background-color: #0F0F0F;
}
button.btn.btn-primary {
background-color: #E12523;
border-color: #E12523;
}
div.jumbotron {
background-color: #292929;
color: #B3B3B3;
}
hr.my-2 {
border: 1px solid #B3B3B3;
}
</style>
<body>
<div class="wrapper container">
<div class="jumbotron">
<h1 class="display-3">Youtube Api</h1>
<p class="lead">Let's use the Yotube Api to get videos</p>
<hr class="my-2">
<form>
<div class="form-group">
<label for="user-query"></label>
<input type="text" class="form-control" id="user-query" aria-describedby="emailHelp" placeholder="Search Youtube">
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
</div>
<div class="container" id="results"></div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<script type="text/javascript">
//Get Videos
$("#submit").on("click", function (event) {
event.preventDefault();
var queryTerm = $("#user-query").val().trim();
$.ajax({
url: "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + queryTerm + "&type=video&key=[MY API KEY]",
method: "GET"
}).then(function (data) {
console.log(data);
$.each(data.items, (i, item) => {
console.log(data.item);
const videoId = item.id.videoId;
let $iFrameContainer = $(`<iframe width="420" height="345" src="https://www.youtube.com/embed/"' ${videoId} '> <\/iframe >`);
$("#results").append($iFrameContainer);
})
});
})
</script>
</body>
</html>

Attack all links with an ajax request

I've been trying create a pure function without jQuery or any other libraries to transform all links on my web app in an ajax request. But as you should know without success.
Can someone tell me where I'm going wrong?
function ajaxify() {
var content = document.getElementsByTagName('body');
var links = document.body.querySelectorAll('a');
[].forEach.call(links, function (link) {
console.log(link);
link.addEventListener('click', function (event) {
var url = link.href;
// Manipulate history
window.history.pushState({}, '', url);
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function () {
if (request.status == 200) {
content[0].innerHTML = request.responseText;
} else {
alert('Request failed. Returned status of' + request.status);
}
};
request.send();
event.preventDefault();
});
});
}
Edit
One of pages that above script does not works
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.png" type="image/png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/authentication.css" type="text/css">
<title>Web APP</title>
</head>
<body>
<div class="wrapper">
<div class="conteiner">
<i class="material-icons custom-arrow-back">arrow_back</i>
<img class="logomarca" src="img/logo.png">
<form name="form" id="form" action="ForgotPassword" method="POST">
<div class="align-form">
<div class="input-conteiner">
<input class="btn-material-style" type="email" id="email" name="email" maxlength="37" value="" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" autocomplete="off" required>
<label>Email</label>
<span class="bar"></span>
</div>
<p class="input-subscribe feedback"></p>
<div class="input-subscribe" style="margin-top: 2.4em">
<input class="btn-material-style" id="btn-submit-email" type="submit" name="submit" value="Request new password" style="border: 0">
</div>
</div>
</form>
</div>
</div>
<footer class="footer">
<p><span id="copyleft">©</span> 2016 - <span class="custom-color">Web APP</span></p>
</footer>
<script src="js/authentication.js"></script>
ajaxify();
</script>
</body>
Solved
The only problem is XMLHttpRequest does not let send script as DOM text for security reasons. So I gave up and now I'm using jQuery to do that. :(
querySelectorAll returns a NodeList, in order to add an event listening onto each HTMLElement within the NodeList you'll need to convert the NodeList to an array and loop through it:
var links= content[0].querySelectorAll('a');
[].forEach.call(links, function(link) {
link.addEventListener('click', function(event) { //code });
});
Also, have you tried this:
document.body.querySelectorAll('a');
querySelectorAll('a') will return an array of anchors. You need to iterate over that and then addEventListener to each one.

Popovers in Twitter Bootstrap

Okay, so I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FastCast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<!-- 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.3.0/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon1.ico"/>
</head>
<body>
<center>
<h1><b>Welcome to FastCast!</b></h1>
<div>
<p><font size="3">FastCast is a web application designed to gather weather information from various sources and display it in an easy-to-read format.</font></p>
<hr></hr>
<div id="picDiv">
<img id="imgDisp" src="logo.jpg">
</div>
<p><font size="6">Enter you location to get started.</font></p>
</div>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="Location" placeholder="ex. Boston, MA">
</div>
</form>
<p><i>Press enter to continue.</i></p>
<a id="test">Click me</a>
<script>
window.onkeydown = function(event) {
if (event.keyCode === 13) {
var x = document.getElementById("Location").value;
var last2 = x.slice(-2);
alert(last2);
}
}
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</center>
</body>
<div class="footer" id="footer">Developed in Twitter Bootstrap | Information from openweathermap.org | Tyler Jablonski, 2014+</div>
</html>
Towards the end I have a link that says "Click me". As you can see, in the script tags that follow, I have a bit of code that looks like this:
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
I was hoping that this code would active a popover when the link is clicked, but for some reason, it doesn't work. Nothing happens at all. Why is this, and how can I properly make a popover in Bootstrap and then have it display a JavaScript variable?
Thanks!
You are missing some things in your popover element <a> tag, have the format be something like this:
<a id="test" data-toggle="tooltip" rel="popover">Click Me</a>
Then it should work, for example: http://jsfiddle.net/52VtD/1983/

Categories