My pop up form is working very well in JSFIDDLE, but not working in my server. The following code:
I don't forget to put in <head>:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="assets/js/loginPopUp/jquery_popup.js"></script>
<script src="assets/js/loginPopUp/jquery_popup.css"></script>
</head>
HTML:
<ul id="topRight-link">
<li> Register </li>
<li id="popUp-login"><img src="">Login</li>
</ul>
<div id="login-PopUp-box">
<form class="form" action="#" id="login">
<h3>Login Form</h3>
<label>Username : </label>
<input type="text" id="username" placeholder="john.wick#yahoo.com"/>
<label>password : </label>
<input type="text" id="password" placeholder="************"/>
<input type="button" id="loginbtn" value="Login"/>
<input type="button" id="cancel" value="Cancel"/>
</form>
</div>
CSS:
#login-PopUp-box {
display:none;
}
Lastly, Script is here:
<script type="text/javascript">
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
</script>
And here is JSFIDDLE.
The code in both server and jsfiddle are totally the same. I tried to view source page in the browser, and the files for <head> are staying there. But it's not working in my server. Am I missing something?
JSfiddle is adding JS with onload - so that should work -
$( document ).ready(function() {
console.log( "ready!" );
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
});
Write your function as below
<script type="text/javascript">
$(function(){
$("#popUp-login").click(function() {
$("#login-PopUp-box").css("display", "block");
});
});
</script>
Just put this code below. Replace your $("#login-PopUp-box").css("display", "block");
$("#login-PopUp-box").show()
Related
I'm calling my function in my HTML, and even though the function originates in the same file I'm receiving an error stating that the function is undefined. I cleared the browser cache, but with no luck.
I tried calling the function in a click event in the same <script>, but the click event wasn't recognized at all:
$("#addFileButton").on("click", function() {
uploadFile();
console.log("click")
})
This is what my code looks like now:
<!-- HTML -->
<input id="getFile" type="file" multiple="multiple"/><br />
<input id="addFileButton" type="button" value="upload" onclick="uploadFile();" />
<!-- etc -->
</div>
<script>
function uploadFile() {
// code
}
</script>
JSFiddle link: https://jsfiddle.net/Tsardines/Lrcgfjhq/5/
I have validated, It is working fine.
see here - jsbin.com/nuzuqomoku/edit?html,js,console,output
Add a click event through jquery and then call the uploadFile method inside it
<html>
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- HTML -->
<input id="getFile" type="file" multiple="multiple"/><br />
<input id="addFileButton" type="button" value="upload" />
<!-- etc -->
</div>
<script>
$(document).ready(function(){
function uploadFile(){
alert('File Uploaded');
}
$("#addFileButton").on("click", function() {
uploadFile();
console.log("click")
});
});
</script>
</body>
</html>
If this is the code:
<!-- HTML -->
<input id="getFile" type="file" multiple="multiple"/><br />
<input id="addFileButton" type="button" value="upload" onclick="uploadFile();" />
<!-- etc -->
</div>
<script>
function uploadFile() {
// code
}
</script>
I don't see a problem with this code. Please make sure that you save and load the right file. You might just forget to load the right file. ^_^
I am trying to load MDL Switch through external file but it's not working.
Here is my main page code : index.php
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="material.min.css">
</head>
<body>
Load
<div class="demo-switch">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
<span class="mdl-switch__label">Bluetooth</span>
</label>
</div>
<script src="js/material.min.js"></script>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$.getScript("js/material.min.js").done(function(){
$(document).on("click",".lo",function(){
$('.demo-switch').load("new_test.php");
});
});
});
</script>
</body>
</html>
Here is file new_test.php
<div class="demo-switch">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
<span class="mdl-switch__label">Bluetooth</span>
</label>
</div>
Here are the result after i press load button:
possible js is not working properly but i can't find a way to fix this.
please help
You Will need to call componentHandler.upgradeAllRegistered() for dynamic dom.
Add componentHandler.upgradeAllRegistered() at the very bottom of your view (new_test.php, in this case).
I am trying to disable a submit button, and have it be enabled when a checkbox is ticked. Simple example works on jsfiddle
http://jsfiddle.net/8YBu5/522/
But not when trying it in my template (with bootstrap etc).
My template has the checkbox
<input type="checkbox" id="checky">terms and conditions
Then the button
<input type="submit" value="Submit" id="submit" class="btn btn-success btn-lg btn-block">Submit</button>
Then the javascript. Does the javascript need to be at the top or something?
<script type="text/javascript">
$('#submit').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#submit').removeAttr('disabled');
}
else {
$('#submit').attr("disabled","disabled");
}
});
</script>
Anyone see where I'm going wrong?
Thanks
UPDATE
Thanks for all the suggestions, I've now tried adding the $(document).ready(function() { to the start of my script and changed .attr to .prop , still not working. Little more info: The button isn't disabled from the start, so maybe I'm not referencing the button properly in the function?
UPDATE2
I've tried adding an alert to see if my javascript is being run, but the alert doesn't show, what could this mean?
<script type="text/javascript">
$(document).ready(function() {
alert("Welcome");
$('submit').prop("disabled", true);
$('checky').click(function(){
if($(this).attr('checked') == true){
$('submit').prop("disabled", false);
}
else {
$('submit').prop("disabled", true);
}
});
});
UPDATE3 The javascript is now running, I've added two alerts, to see what is executing.
//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
alert( "w" );
$('#postme').removeAttr("disabled");
}
else {
alert( "e" );
$('#postme').attr("disabled","disabled");
}
});
});//]]>
When I click the checkbox on or off, I get the e alert, telling me the if statement is always false. Any ideas why?
UPDATE4
The snippet works, just not in my page, alert 2 is always executed, never alert 1
Title
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row padding">
<div class="col-md-12">
<h1></h1>
</div>
</div>
<div class="row padding">
<form id="new_form" action="/page/" method="POST" >
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Creator submission form</h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<br>
<input type="checkbox" id="checky1">
<input type="submit" id="postme1" value="submit">
</form>
</div>
<div class="row padding">
<div class="col-md-12">
</div>
</div>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
$('#postme1').removeAttr('disabled');
}
else {
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</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="/static/js/bootstrap.min.js"></script>
<div class="container">
<footer>
<hr>
</footer>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
alert("1");
$('#postme1').removeAttr('disabled');
}
else {
alert("2");
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</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="/static/js/bootstrap.min.js"></script>
</body>
</html>
Your javascript code should be
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});
});//]]>
</script>
</head>
<body>
<input type="checkbox" id="checky">terms and conditions
<input type="submit" id="postme" value="submit">
</body>
</html>
This snippet is working fine for me.
Update
Use this as click event handler of the checkbox
$('#checky').click(function(){
if($(this).prop('checked')){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});
JSFiddle is a lovely resource. One of the lovely things it does is provide the wrapper for JQuery for you!
Have a little read of this:
Launching Code on Document Ready
To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function:
window.onload = function() {
alert( "welcome" );
}
Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:
$( document ).ready(function() {
// Your code here.
});
Make sure your include your <script> after the rest of your html. Or you can wrap it in:
$(document).ready(function() {
// your code here
});
Also you should use .change instead of .click, in case the user uses the keyboard to check the checkbox.
I have got a task to do Jquery tab. On this when I select a check box the corresponding tab must show on the page and others must be disabled.Multiple checkbox is also allowed.Then corresponding pages must be enabled.
My code is
<html !doctype>
<head>
<title>JqueryMenu</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
$("#tabs").tabs("option", {
"selected": 2,
"disabled": [1,2,3]
});
$( "input[type=checkbox]" ).click(function(){
$('#tabs').tabs("enable", $(this).val());
$('#tabs').tabs("select", $(this).val() );
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Nithin </li>
<li>Vipin</li>
<li>Sachin</li>
<li>Ganguly</li>
</ul>
<div id="tabs-1">
<p>Nithin</p>
</div>
<div id="tabs-2">
<p>Vipin</p>
</div>
<div id="tabs-3">
<p>Sachin</p>
</div>
<div id="tabs-4">
<p>Ganguly</p>
</div>
</div>
<input type="checkbox" name="tabs-1" value="1">tabs-1
<input type="checkbox" name="tabs-2" value="2">tabs-2
<input type="checkbox" name="tabs-3" value="3">tabs-3
<input type="checkbox" name="tabs-4" value="4">tabs-4
<br>
</body>
</html>
How can I do this? You can see the demo http://jsfiddle.net/2aQ2g/4/
You just need to add condition below
if ($(this).is(':checked'))
Please see fiddle here
I've been asked to prototype a login box for a project, with the goal of emulating how an AJAX-y login box would.
Idea is:
User types in username/password (any; again, this isn't hooked up to any DBs or anything yet) and hits enter
Throbber shows up for 3 seconds.
User info appears.
I've tried doing this with jQuery as per the below; anyone have an idea what I'm doing wrong? Many thanks!
<html>
<head>
<link href="c/main.css" media="screen" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<!--[if lte ie7]>
#header #logo {margin-right: 100px;}
<!-[endif]-->
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#login-form').submit(function(){
jQuery('#login-form > *').hide();
jQuery('#throbber').show().delay(300).hide();
jQuery('#logged-in').show();
return false;
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="utilities">VolunteerAbout Us<input type="text" /></div>
<div id="header">
<img src="i/logo.png" id="logo" />
<div id="pnav-wrapper">
<ul id="pnav">
<li>Upgrade Your<br /><span>Skills</span></li>
<li>Browse<br /><span>Events</span></li>
<li>Browse<br /><span>Jobs</span></li>
</ul>
<div id="login">
<form action="#" method="get" id="login-form">
Username: <input id="username" type="text" /><br />
Password: <input id="password" type="password" />
<input type="submit" style="visibility: hidden;">
</form>
<img src="i/throbber.gif" style="display: none;" id="throbber">
<p id="logged-in" style="display: none;"><strong>The Admin</strong><br />
Administrator
</p>
</div>
</div>
</div>
<div id="content"></div>
</div>
</body>
</html>
The delay() only affects the queue for #throbber (and 300 is 0.3 second).
Instead, use the callback of .hide() to show #logged-in after #throbber has been hidden:
jQuery('#login-form').submit(function() {
jQuery('#login-form > *').hide();
jQuery('#throbber').show().delay(3000).hide(function() {
jQuery('#logged-in').show();
});
return false;
});
(demo)
You need to change delay to 3000, make the whole login-form hide rather than just the child elements, and this part is key... put the logged in showing code inside a callback function to be executed after the throbber is hidden... like this:
jQuery('#login-form').submit(function(){
jQuery('#login-form').hide();
jQuery('#throbber').show().delay(3000).hide(function(){
jQuery('#logged-in').show();
});
return false;
});
Try this: http://jsfiddle.net/dbhCe/
jQuery(document).ready(function(){
jQuery('#login-form').submit(function(){
jQuery('#login-form').hide();
jQuery('#throbber').show();
window.setTimeout( function() {
jQuery("#throbber").hide();
jQuery('#logged-in').show();
}, 3000);
return false;
});
});
Here is a demo
http://jsfiddle.net/6UwDn/2/