jsFiddle working, website JS not working - javascript

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();
}
});
});

Related

Jquery linkging to html issue

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>

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.

Run jQuery on page load with values from fields

I'm passing values from one page to another by posting them and then putting them in to hidden fields on the next page. I've tried using the initial values and that doesn't work either, so my assumption is that it's to do with the jquery not checking for initial values. This is what I want to run:
function check() {
var Q1 = $("#question1").val();
if (Q1 == 'yes') {
$(".A1").css("display", "block");
} else {
$(".A1").css("display", "none");
}
Where #question1 is the ID of the field populated from the previous page, but how do I get the check function to run when the page has loaded? I've tried adding:
<script type="text/javascript">
check();
</script>
To the bottom of the page with no success, the only way it works at the moment is by clicking a button with this applied:
$(".theanswer").click(function() {
check();
return false;
});
I'm sure there's probably a simple way i'm unaware of so any help is much appreciated.
Cheers
Your check() function uses jQuery to retrieve elements. Because of this, you need to run the function after the DOM has been loaded. To do that, place the call to check() within a DOM ready event handler:
<script type="text/javascript">
$(function() {
check();
});
</script>
Also, you can simplify the check() function:
function check() {
$('.A1').css('display', $('#question1').val() == 'yes' ? 'block' : 'none');
}
Warp it the call to check function in document.ready.
<script type="text/javascript">
$(document).ready(function(){
check();
})
</script>
Just create a js file and link it you your html page
JS File
$(document).ready(function(){
check();
});
function check()
{
var Q1 = $("#question1").val();
if (Q1 == 'yes')
{
$(".A1").css("display", "block");
}
else
{
$(".A1").css("display", "none");
}
}
Html link
<script type="text/javascript" language="javascript" src="yourjsfilename.js"></script>

this reference in JavaScript

Today i was writing some basic stuff of java script mean while i encountered the problem. Although i was able to sort out the problem but could not find the reason of why this were not working. Here is my code
$('document').ready(function() {
$(this).click(function() {
var node1 = $(this);
a = node1.text();
console.log(a);
});
});
In this in the console i see empty string. But if i change the $(this).click(function{...}) to $('.some_class_name').click(function{.....}); than my code works fine and display the text value of the button i clicked.
I want to know what is wrong in the above code.
You must be looking for this, Use the e.target to get the text inside of the clicked element which is present inside the document.
$('document').ready(function () {
$(this).click(function (e) {
var node1 = $(e.target);
var a = node1.text();
console.log(a);
});
});
Try this code
Just change the this keyword to body
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type="text/javascript">
$('document').ready(function(){
$('body').click(function(){
var node1 = $(this);
a = node1.text();
console.log(a);
});
});
</script>
<body>
Test
</body>

How can I covert this inline javascript to jQuery function which is causing conflict?

I am using a jQuery language switcher and below is the working script.
<script type="text/javascript">
window.lang = new jquery_lang_js();
$(document).ready(function() {
window.lang.run();
});
</script>
Switch to Japanese
However, the inline JavaScript is causing conflict with other jQuery scripts in the page.
I've tried to create a function like this below but obviously, this is not correct. By moving the .click function inside the document ready as suggested, it's working now.
<script type="text/javascript">
window.lang = new jquery_lang_js();
$(document).ready(function() {
window.lang.run();
});
$(".jp").click(function (e) {
e.preventDefault();
var $this = $(this);
var id = $this.attr('href');
window.lang.change('jp');
});
</script>
Switch to Japanese
Besides, I have other classes other than "jp" so this is not even the correct approach but I was trying to get rid of the inline javascript first; which I failed to do anyhow.
Can anyone please help?
/////////////////////Below works now ///////////////////
I guess now my question is, how can I rewrite it so that I do not repeat the code like this?
<script type="text/javascript">
window.lang = new jquery_lang_js();
$().ready(function () {
window.lang.run();
$(".jp").click(function (e) {
e.preventDefault();
var $this = $(this);
var id = $this.attr('href');
window.lang.change('jp');
$(".en").click(function (e) {
e.preventDefault();
var $this = $(this);
var id = $this.attr('href');
window.lang.change('en');
});
});
</script>
Switch to Japanese
Switch to English
.
.
. more classes
There is a better way than writing it like this, correct?
You should move the .click() inside of the .ready(). Right now, that JavaScript is running before the anchor loads, so the $('.jp') isn't finding it.
Also, don't use $this as a variable; this isn't PHP, and you're not using it for anything important anyway.

Categories