Jquery linkging to html issue - javascript

how to link this Jquery to my html page?
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
can someone help me? Iv been trying but its not working!
I need to know exactly how?
should I include something between my "head" tags? or body or where exactly?
the code is from code pen:
https://codepen.io/anon/pen/YVZQQX?editors=0010
code:
$(".form").find("input, textarea").on("keyup blur focus", function(e) {
var $this = $(this), label = $this.prev("label");
if (e.type === "keyup") {
if ($this.val() === "") {
label.removeClass("active highlight");
} else {
label.addClass("active highlight");
}
} else if (e.type === "blur") {
if ($this.val() === "") {
label.removeClass("active highlight");
} else {
label.removeClass("highlight");
}
} else if (e.type === "focus") {
if ($this.val() === "") {
label.removeClass("highlight");
} else if ($this.val() !== "") {
label.addClass("highlight");
}
}
});
$(".tab a").on("click", function(e) {
e.preventDefault();
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
target = $(this).attr("href");
$(".tab-content > div").not(target).hide();
$(target).fadeIn(600);
});
It works perfectly in code pen, but when I copy it, it doesn't work!
Thank you

You need to include jQuery via a <script> tag.
JS should be loaded at the end of the page (performance reasons) unless you have a solid reason for including it in the <head>, i.e. feature detection, JS placement is not under your control (CMS etc.).
Since you're unsure of how to include JS into a web page I feel it's worth noting that you will need to include jQuery before your code.
Include JS right before </body>:
<!-- the rest of your page -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="path/to/script.js"></script>
</body>
</html>
Or you can include it in the <head> if you have to (usually later rather than earlier in the <head>):
<head>
<!-- meta tags, title tag, link tags for CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
If you load your code in the <head> you'll probably want to wrap it $( document ).ready(); so that the code doesn't get executed right away. Why? If you try to interact with a DOM (HTML) right away that hasn't been parsed yet you'll run into problems. $( document ).ready(); will defer the execution of the code until the DOM is ready.
$( document ).ready( function () {
// your code here
} );
$( document ).ready() is not required if JS is included at the very bottom of the page.

put this in between the head tags of your html page
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

Related

Show loading while waiting for server

I want to modify a js script to be fired when the client is waiting for the server instead of fireing on loading. There you can see the script: FakeLoader.js, CSS
I found an ajax solution here, but I had no idea how to use it, as the script is inicialized in html. I think the key is at the end of the js file:
$(window).load(function(){
centerLoader();
$(window).resize(function(){
centerLoader();
});
});
On the html page, I have a text input field, which makes refresh on hitting enter, so I thought I could solve it by replacing the mentioned part with code from here :
$(document).keypress(function (e) {
if (e.which == 13) {
centerLoader();
$(window).resize(function(){
centerLoader();
});
}
});
This should fire the loader when enter was hit and show it while the server sends the new page, but instead it just does exatly the same thing before modifying the script, which is weird.
This is how it is initialized in html:
<div id="fakeLoader"></div>
<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
Could you give some idea? I am not good at js. Thank you.
I have a working sample with this:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="http://joaopereirawd.github.io/fakeLoader.js/js/fakeLoader.js"></script>
<link rel="stylesheet" href="http://joaopereirawd.github.io/fakeLoader.js/demo/css/fakeLoader.css" />
<script>
window.onload = () => {
document.body.addEventListener('keydown', function (e) {
if (e.keyCode == 13) {
$("#fakeLoader").fadeIn();
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
}
});
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="fakeLoader"></div>
<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
</body>
</html>
Obviously that's not how you will want the end result to look. It'll be better to move the fake loader part to a function and make the keyCode stuff cross browser. That'll get you started though.

Jquery not functioning on table created by javascript

I have table which i created entirely by javascript and my Jquery code dont want to work with it :/ If i use it on Table which is created manualy (in html) i works just fine. See fiddle below.
FYI this jquery code should just alow user to use arrow keys for navigation between inputs (table cells)
Here is that jsFiddle
I load my scripts in head:
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
Table is created here (in body):
<div id="myTable">
</div>
<script type="text/javascript">
createTable();
addPerson(1);
</script>
This is my jQuery:
$(document).ready(function() {
$('input').keydown(function(e) {
if (e.keyCode == 40 || e.keyCode == 13) {
var thisClass = $(this).parent().attr('class');
$(this).parent().parent().next('tr').children('.' + thisClass).children().focus();
}
});
$('input').keydown(function(e) {
if (e.keyCode == 39) {
$(this).parent().next('td').children('input').focus();
}
});
$('input').keydown(function(e) {
if (e.keyCode == 38) {
var thisClass = $(this).parent().attr('class');
$(this).parent().parent().prev('tr').children('.' + thisClass).children().focus();
}
});
$('input').keydown(function(e) {
if (e.keyCode == 37) {
$(this).parent().prev('td').children('input').focus();
}
});
});
You connect event listeners only to existing elements. You should connect it to document to deal with dynamically created elements:
$(document).on('keydown', 'input', function(e) {
// keycode first
if (e.keyCode==40 || e.keyCode==13) {
}
// keycode second etc.
if (e.keyCode==39) {
}
if (e.keyCode==38) {
}
if (e.keyCode==37) {
}
});
UPD actually it is a bad idea to connect listener to a document if it is very large. You can attach listener to an element after creating it.
You probably tried to bind the keydown event before the table was created. Try using the on method instead.
You also need to attach the event to an existing parent element that existed before the creation of the table, like in the body or another parent element.
$('body').on('keydown', "input", function(e) {
if (e.keyCode==40 || e.keyCode==13) {
var thisClass = $(this).parent().attr('class');
$(this).parent().parent().next('tr').children('.'+thisClass).children().focus();
}
});
Take this as an example. I would recommend you to use another wrapping element and bind via it's class or id, instead of element name.

I cant pick the value of input using jquery

$('.submit__form').on('click', function(e) {
e.preventDefault();
var id = '.' + $(this).data('id');
var person__name = $('#person__name').val();
var person__email = $('#person__email').val();
var booking__participants = $('#booking__participants').val();
alert(person__email || 'none');
// if (person__email === '' || person__name === '' || booking__participants === '') {
// alert('Preencha os campos obrigatórios.');
// } else {
// $(id).submit();
// }
});
I don't know why, but i can't pick the value of the person__name and person__email, the most strange part is that i can pick the value in the console on the browser... someone knows what could be causing this?
This is not a problem of html the 2 inputs fields have the id person__name and person__email.
The code is in a external file, and i am calling that in the bottom of my html.
HTML:
<form>
<input id="person__name" name="person.name" type="text" />
<input id="person__email" name="person.email" type="email" />
<a class="submit__form">Submit</a>
</form>
I cant use the submit input.
UPDATE:
The scripts in the bottom of the page:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.6.0/headroom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.ui.min.js"></script>
<script src="/client/scripts/main.js"></script>
Inside the main script:
(function() {
//code
})();
If you want to alert the name, make sure you use the name in the jQuery
alert(person__name || 'none');
// Not:
alert(person__email || 'none');
http://jsfiddle.net/376fLujs/3/
Also, make sure your script is included properly. Include the jQuery before your script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="local.js" type="text/javascript"></script>
add: console.log("working"); as the very first line of your script
open the chrome console / Firebug and refresh your page.
if you don't see "working" in the console, your javascript is not included properly.
Edit: based on your comments again. If you have multiple forms, re-using the same ID, it will not work. Always keep IDs unique. Since your link is inside of the form like your input, you could do this:
var person__email = $(this).parent().find("input[name='person.email']").val();
// DRX points out that escaping may be necessary:
var person__name = $(this).parent().find("input[name='person\\.name']").val();
http://jsfiddle.net/376fLujs/4/
I would say try using this for your event handling:
$(document).on('click', '.submit__form', function(e) {
//code here
});
The reason it might not be working is because the element might not yet be created when the script loads. This should take care of that issue.

jsFiddle working, website JS not working

Tried lots of different things, but can't seem to get this working in the live site.
<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript">
$('.upme-field-value').filter(function(){
$this = $(this);
if ($this.text() === "Verified") {
$this.html('<div id="verifiedText">Verified</div><img alt="Passed" src="/wp-content/uploads/2013/11/verified1.png"/>');
$this.find('#verifiedText').hide();
}
});
</script>
here is it working in fiddle http://jsfiddle.net/4MLX3/11/
I've disabled js minify
I've uploaded the js source file to the website
I've put the script first in the header
I've checked for errors using Chrome Developer tools, but nothing seems to work
In jsFiddle, by default the script runs under a window.onload handler(2nd dropdown in the left panel).
Add your code in a dom ready handler
jQuery(function ($) {
$('.upme-field-value').filter(function () {
$this = $(this);
if ($this.text() === "Verified") {
$this.html('<div id="verifiedText">Verified</div><img alt="Passed" src="/wp-content/uploads/2013/11/verified1.png"/>');
$this.find('#verifiedText').hide();
}
});
})
Jquery ready handler missing in your script section.
$(function(){
$('.upme-field-value').filter(function(){
$this = $(this);
if ($this.text() === "Verified") {
$this.html('<div id="verifiedText">Verified</div><img alt="Passed" src="/wp-content/uploads/2013/11/verified1.png"/>');
$this.find('#verifiedText').hide();
}
});
});

Javascript: Eventhandler not functioning, works in JSFiddle

So this is an answer to another question I posted and I think it is the correct solution. However, while it works wonderfully in jsfiddle it does not function whatsoever outside of that environment. I have tried multiple combinations and I cannot get this thing to work right.
I've tried onLoad in the body, Window.onload both in the header wrapping around the function and separately calling it at the base of the page after all the elements have loaded. Nothing works.
I always get this issue:
Uncaught TypeError: Cannot call method 'addEventListener' of null
Which is frustrating, because all other solutions to this error I have seen revolve around ensuring you do in fact have the specified ID the handler triggers off of in your HTML. Which I do.
I know its probably overkill to make a post here on this but I'm yanking my hair out.
Here's the JSfiddle: http://jsfiddle.net/fFW5r/1/
Here's a mockup page I made to test the concept (which never works):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var link_container = document.getElementById('links');
function myFunction(){ link_container.addEventListener('click', function(e){
if(e.target.nodeName === "A"){
var href = e.target.getAttribute('href'),
selfhost = window.location.hostname;
if(href.indexOf(selfhost) !== -1){
alert('Inbound link clicked');
} else {
alert('Outbound link clicked');
}
}
}, false);
}
</script>
</head>
<body onload="myFunction()">
<div id="links">
Inbound Link
Outbout Link
</div>
<script>window.onload=myFunction()</script>
</body>
</html>
This particular iteration I was trying to test it with the onload call at the bottom of the page after everything had loaded.
var link_container = document.getElementById('links'); need to be executed on document.onload so it has to be inside myFunction
In jsfiddle, the code is executed on load by default. in the fiddle at the left side panel > second select box if you select no wrap - in head you can recreate the problem.
Demo: Fiddle
<script type="text/javascript">
function myFunction(){
var link_container = document.getElementById('links'); // <<-- Move it inside `myFunction()`
link_container.addEventListener('click', function(e){
if(e.target.nodeName === "A"){
var href = e.target.getAttribute('href'),
selfhost = window.location.hostname;
if(href.indexOf(selfhost) !== -1){
alert('Inbound link clicked');
} else {
alert('Outbound link clicked');
}
}
}, false);
}
</script>
The reason it doesn't work is that you are initializing link_container before the DOM is ready. Then when myFunction() runs, link_container has been initialized to undefined. Which causes it to fail. Initializing it in the function (after the DOM has loaded) should fix the issue
Put declare link_container inside the function.
var link_container = document.getElementById('links');
function myFunction(){
link_container.addEventListener('click', function(e){
if(e.target.nodeName === "A"){
var href = e.target.getAttribute('href'),
selfhost = window.location.hostname;
if(href.indexOf(selfhost) !== -1){
alert('Inbound link clicked');
} else {
alert('Outbound link clicked');
}
}
}, false);
}

Categories