I'm trying to bind a function when someone check the checkbox.
I've this jsfiddle it works fine, but I've the same code and it's not working.
I've used CDNs for JQuery and Bootstrap, hope that there is no issue with that.
In the code below even is not binding perfectly and I didn't see any alert, although the same code works perfectly fine in the fiddle mentioned.
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap FILES -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- font awesome for the icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<input type="checkbox" id='mark' name='mark'>
</div>
</div>
</div>
</div>
<script>
$(document).on('click', 'input[name="mark"]', function() {
// when the checkbox is checked then do the following
alert('thanks for checkcing me');
});
</script>
</body>
</html>
what is wrong with this code? if not, then why I'm not getting any kind of alert when I check the checkbox.
Please help, thanks !
Check the jquery loaded:
if (typeof jQuery == 'undefined') {
console.log("jQuery is not loaded"); // Or
alert("jQuery is loaded");
} else {
console.log("jQuery is not loaded");
alert("jQuery is not loaded");
}
Related
I have a code to generate a normal date time picker, but it is throwing me this error Uncaught TypeError: jQuery(...).datetimepicker is not a function
Can anyone help me, i guess it is because of arrangment of links and bootstrap , but i don't have a clear picture of it.
below is my code
<html>
<head>
<link rel="stylesheet" href="jquery.datetimepicker.css">
<script src="jquery-1.8.2.min.js"></script>
<!-- <script src="jquery-ui.js"></script> -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="jquery.validate.min.js"></script>
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function() {
jQuery('#datevalue').datetimepicker();
jQuery('#completed').datetimepicker();
});
</script>
</head>
<body>
<form action="#" method="post">
<div id="AlignMainDiv">
<div class="form-group last mb-4">
<label for="date">Date</label>
<input type="text" class="form-control" id="datevalue">
</div>
<div class="form-group last mb-4">
<label for="username">Completed Date and Time</label>
<input type="text" class="form-control" id="completed">
</div>
</div>
</form>
</body>
</html>
Press F11, open the Chrome debug, go to Network > JS tab and check if any of the included js libraries return a 404 status. Maybe you misspelled a script name or URL path.
You can also try to include the libraries directly from CDNs:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$('#datevalue').datetimepicker();
$('#completed').datetimepicker();
} );
</script>
</head>
I dont know whether your datetimepicker library is loading or not.
You can use following CDN.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
Following code will load todays date and will show datepicker on input click
<script>
$(document).on("click", "#datevalue" , function() {
$(this).datetimepicker({
timepicker:false, format:"d-m-Y","setDate": new Date(),
}).focus();
});
</script>
I am trying to change pages on in my project. I have two divs containing information and they each have a data-role of "page". In addition, they both have ids. On my js file I have a simple onclick event that calls a function that then uses the
$.mobile.changePage("#2");
To go from my first div to my second div. The only problem is whenever I try to change the page I am getting an error:
Uncaught TypeError: Cannot read property 'changePage' of undefined
I have already searched on other peoples posts on stack overflow and haven't found anything that can help me. Here is some of my code:
global.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<script src="js/lib/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/lib/jquery.mobile-
1.4.5.css">
<script src="js/global.js"></script>
<script src="js/lib/jquery.mobile-1.4.5.js"></script>
<script src="js/p5.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js">
</script>
</head>
<body>
<div data-role="page" id="1" style="background-color: #56f0b1;">
<button id ="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
</body>
</html>
global.js
$(document).ready(function () {
$("#startGame").on("click",getToNextPage);
});
function getToNextPage(){
$.mobile.changePage("#2");
}
As mentioned in comments, the core jQuery library must be loaded before jQuery Mobile.
In your code, it seems you're loading two jQuery versions and one of them is loaded after jQuery Mobile.
Also, according to comments in this question, the page IDs should not be only numeric.
Here's an example:
$(document).ready(function() {
$("#startGame").on("click", getToNextPage);
});
function getToNextPage() {
$.mobile.changePage("#page2");
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1" style="background-color: #56f0b1;">
<button id="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="page2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
I'm pretty new to JavaScript, I am trying to execute my external JS to html, what im trying to do is to see if the mouseover responds when my mouse hovers one img.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GWW- A Global Warming Warning...</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
<img src="poluicao/poluicao0001.png" alt="Mundo">
<div class="botao1">
<img src="poluicao/offbuton.png" alt="but1">
</div>
<div class="botao2">
<!--<a href="#" >//-->
<img id="readybotao" src="degelo/offbutton.gif" alt="but2">
<!-- </a> //-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="javascript.js"</script>
</body>
</html>
And this is my JS file:
function buttonon() {
alert("If it showed up it worked!");
}
document.getElementById('readybotao').addEventListener("onmousover",buttonon());
What am I doing wrong?
change external javascript like this :
var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}
and close tag script :
<script src="javascript.js"></script>
you have >missing on the line <script src="javascript.js"</script>
I am trying to find a way to show a pop up message when user is trying to highlight and copy text from a paragraph. I've searched around the net for possible solutions but I could not find any that will trigger pop up message when text or random part of the paragraph is selected.
I've looked at this. But it seems that it uses div block rather than pop up.
It seems that #Nishit Maheta answer solved my issue. Shortly I will update the post with my solution.
Try this:
tinyMCE.init({
mode: "exact",
elements: "test",
skin: "o2k7",
skin_variant: "red",
setup: function (ed) {
ed.onMouseUp.add(function (ed, e) {
var x = tinyMCE.activeEditor.selection.getContent();
if(x)
alert(x);
});
}
});
JSFIDDLE DEMO
Try Bootstrap Popover. Following is a sample 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<p data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</p>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
It works well for me, hope it will resolve your issue.
$("#myDiv").mousedown(function(){
$("#myDiv").mouseup(function(){
$("#myPopUp").show();
});
});
#myPopUp
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
hello please select the text and see
</div>
<div id="myPopUp">
popover message
</div>
For some reason, protractor is throwing the error angular never provided resumeBootstrap when navigating to the page using browser.get(). I tried switching data-ng-app to ng-app but that didn't help.
Full Error
Error: Angular could not be found on the page chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html : angular never provided resumeBootstrap
spec
var driver = browser.driver;
describe('Chrome Extension Control Page', function () {
it('Should be defined', function () {
browser.get('chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html');
expect(driver.getTitle()).toEqual("Control Page");
expect(driver.executeScript(function () {
return typeof window !== "undefined";
})).toBeTruthy();
element(by.css('input')).click();
});
});
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Control Page</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/navbar.css">
<link rel="stylesheet" href="assets/css/popup.css">
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/lib/angular.min.js"></script>
<script src="assets/js/lib/bootstrap.min.js"></script>
<script src="assets/js/lib/ui-bootstrap-tpls.min.js"></script>
<script src="assets/js/lib/angular-bootstrap-switch.min.js"></script>
<script src="assets/js/lib/bootstrap-switch.min.js"></script>
<script src="assets/modules/translate-filter.js"></script>
<script src="assets/modules/review-box.js"></script>
<script src="assets/modules/enable-switch.js"></script>
<script src="assets/modules/navbar.js"></script>
<script src="assets/modules/extension-interface.js"></script>
<script src="assets/modules/status-monitor.js"></script>
<script src="assets/modules/state-monitor.js"></script>
<script src="assets/js/control-ui.js"></script>
</head>
<body data-ng-app="controlPage">
<div ng-controller="ControlPageCtrl">
<extension-navbar></extension-navbar>
<div class="">
<div class="jumbotron" style="background-color: transparent; margin-bottom: 0">
<status-monitor-area></status-monitor-area>
<hr>
<div>
<div class="row">
<div class="col-xs-8">
<state-message></state-message>
</div>
<div class="col-xs-4">
<enable-switch></enable-switch>
</div>
</div>
<state-progress-bar></state-progress-bar>
</div>
<state-information-box></state-information-box>
</div>
</div>
</div>
</body>
</html>
EDIT: This did not fix the problem. I have no idea why protractor isn't working.
Weird fix. It worked after I upgraded to the latest version of Angular.
I didn't consider it because the upgrade available was from v1.3.15 to v1.3.16. Seriously weird stuff, Angular.