I have a function in the script tag that initializes a couple of scripts in a separate file called "filters.js". But for some reason it returns "initialize is not defined". Does wrapping the function in jQuery change the scope? Here is my html:
<!DOCTYPE html>
<html>
<head>
<script src="Scripts/filters.js"></script>
<script src="Scripts/jquery-3.3.1.js"></script>
<meta charset="utf-8" />
<title>ICTV Filters</title>
</head>
<body>
<div class="filterCategory">
<div class="categoryTitle">
Genome
<input type="checkbox" id="ssDNA" />
<label for="ssDNA">ssDNA</label>
<input type="checkbox" id="dsDNA" />
<label for="dsDNA">dsDNA</label>
<input type="checkbox" id="ssRNA" />
<label for="ssRNA">ssRNA</label>
<input type="checkbox" id="dsRNA" />
<label for="dsRNA">dsRNA</label>
<button onclick="initialize()">Apply Filters</button> <!-- Returns error on this line-->
</div>
</div>
<div class="filterReturn">
<p id="filterReplace"></p>
</div>
<script>
jQuery(document).ready(function () {
function initialize() {
getSelections();
updateObject();
updateLocalStorage();
$(document).trigger('filtersUpdated');
}
})
</script>
</body>
</html>
Related
I have a tree structure of div in my coding.. When click on Yes, child div appears and when we click on child , Grand child div appears.. and if we click on No then all children will get hide .. this is works fine in my coding but after hiding all children when m again trying to click on yes.. click function for Yes not working after hiding div using children().hide()
method. why this is happening ?
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form >
<div class="form-group" id="main">
<label class="lbl" for="parent" id="parent" > Click on Yes to see child . and click on No to hide all children. </label>
<div class="form-inline">
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="parent" value="Yes" id="parent-yes"> Yes </label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="parent" value="No" id="parent-no"> No </label>
</div>
</div>
</div>
<div id="children" style="display:none;">
<div id="child1">
I am Child. Click on me to see Grand Child
<div id="child2" style="display:none;">
Grand Child
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Javascript
$(document).ready(function () {
$("#parent-yes").on("click", function () {
$("div#children").show();
});
$("#child1").on("click", function () {
$("div#child2").show();
});
$("#parent-no").on("click", function () {
$("div#children").children().hide();
});
});
Not clear your requirement, but in your sample code, you set wrong id when selector.
And when you click No to hide, you hide all children, should call show() to click Yes $("div#children").children().show()
$(document).ready(function(){
$("#parent-yes").on("click", function(){
$("div#children").css("display", "block");
$("div#children").children().show()
});
$("#child1").on("click", function(){
$("div#child2").css("display", "block");
});
$("#parent-no").on("click", function(){
$("div#children").children().hide()
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form >
<div class="form-group" id="main">
<label class="lbl" for="parent" id="parent" > Click on Yes to see child . and click on No to hide all children. </label>
<div class="form-inline">
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="parent" value="Yes" id="parent-yes"> Yes </label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="parent" value="No" id="parent-no"> No </label>
</div>
</div>
</div>
<div id="children" style="display:none;">
<div id="child1">
I am Child. Click on me to see Grand Child
<div id="child2" style="display:none;">
Grand Child
</div>
</div>
</div>
</div>
</form>
</body>
</html>
I'm new around here. I'm working in an App Script add-on and I was wondering how do you use the checked value of a checkbox in a sidebar to start a particular GS function?
Here is the example HTML of the sidebar:
<!DOCTYPE html>
<html>
<head>
<link href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
rel="stylesheet">
</head>
<body>
<div class="sidebar">
<p>Please select the checkbox you need</p>
<form>
<div class="block form-group">
<div><input type="checkbox" id="CHECKBOX1">
<label for="CHECKBOX1">CHECKBOX1</label></div>
<div><input type="checkbox" id="CHECKBOX2">
<label for="CHECKBOX2">CHECKBOX2</label></div>
<div><input type="checkbox" id="CHECKBOX3">
<label for="CHECKBOX3">CHECKBOX3</label></div>
<div class="block">
<button class="action" id="useGsFunctions">Start Functions</button>
</div>
</form>
</div>
</body>
</html>
Now I would like to call, when the useGsFunctions is pressed, the GS function1 if the checkbox1 is true and/or the GS function2 if the checkbox2 is selected. But how do you do that?
Thanks in advance for your help and patience.
This may help you,
<!DOCTYPE html>
<html>
<head>
<link href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
rel="stylesheet">
<script>
function check(){
if(document.getElementById("CHECKBOX1").checked){
//Call your GS function 1
}
else if(document.getElementById("CHECKBOX2").checked){
//Call your GS function 2
}
else if(document.getElementById("CHECKBOX3").checked){
//Call your GS function 3
}
}
</script>
</head>
<body>
<div class="sidebar">
<p>Please select the checkbox you need</p>
<form>
<div class="block form-group">
<div><input type="checkbox" id="CHECKBOX1">
<label for="CHECKBOX1">CHECKBOX1</label></div>
<div><input type="checkbox" id="CHECKBOX2">
<label for="CHECKBOX2">CHECKBOX2</label></div>
<div><input type="checkbox" id="CHECKBOX3">
<label for="CHECKBOX3">CHECKBOX3</label></div>
<div class="block">
<button type = "button" class="action" id="useGsFunctions" onclick="check()">Start Functions</button>
</div>
</form>
</div>
</body>
</html>
I've been trying to apply iCheck plugins to my radio and check boxes and I just cannot figure out why my radio buttons keep selecting more than a single option, with no experience in JQuery, I think I might need help with this. I used minimal blue skin so I downloaded the blue.css with the blue.png sprite image, jquery-1.11.3.min.js and icheck.js.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="check.js"></script>
<link rel="stylesheet" href="blue.css">
<script>
$(document).ready(function() {
$('input').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue',
increaseArea: '20%'//optional
});
});
</script>
</head>
<label>
<div class="icheckbox_minimal-blue disabled">
<input type="checkbox" name="quux[1]" disabled>
</div>
Foo
</label>
<label for="baz[1]">Bar</label>
<div class="iradio_minimal-blue checked">
<input type="radio" name="quux[2]" id="baz[1]" checked>
</div>
<label for="baz[2]">Bar</label>
<div class="iradio_minimal-blue">
<input type="radio" name="quux[2]" id="baz[2]">
</div></br>
<body>
</body>
</html>
You have to give same name to all your radio inputs.
<div class="iradio_minimal-blue checked">
<input type="radio" name="quux" id="baz[1]" checked>
</div>
<label for="baz[2]">Bar</label>
<div class="iradio_minimal-blue">
<input type="radio" name="quux" id="baz[2]">
</div></br>
Guys I have this html with the following code.It has 2 forms.formA and form B.I have icluded a java script also.I want to make the formB slide down,when I click the link "Internet banking" above form A and when i click on "card payment" vice versa.
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Payment Page</title>
<link rel="stylesheet" href="demo1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
this is the javascript I added.
<script type="text/javascript">
$(document).ready(function(){
$("#formA").click(function(){
$("#internet").slideToggle("slow");
});
});
</script>
<div class="demo">
<form id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
</body>
here is the #http://jsfiddle.net/pz83w/5/ demo.Im new to java script,so this is my experiment.Couldsomeone figure how to do this?
You need to modify your function in the following way:
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(400).removeClass('show');
} else {
$(this).delay(400).addClass('show').slideDown();
}
});
});
});
Here is working fiddle - http://jsfiddle.net/pz83w/7/
Remember, since you have two buttons, it's better to use class selector than to use id, same with your forms. That you can add a blank class (like 'show' in the example) to selected item and animate it the way you want.
Fiddle is updated, check HTML section, since I added classes to your forms.
i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.