I am using propertychange for ie's to capture the input values. it's not working with ie11. any one suggest me the correct way to use it to work with all ie's.
here is my code and html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PropertyChange</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="propChange.js"></script>
</head>
<body>
<input type="text">
</body>
</html>
script:
jQuery(document).ready(function($) {
$('input').on('propertychange', function(){
console.log(this.value);
});
});
In the console I am getting this:
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
and
HTML1300: Navigation occurred.
Use DOMSubTreeModified to make it work in IE11 (IE11 manipulates DOM) :
$('input').on('DOMSubTreeModified propertychange', function(){
console.log(this.value);
});
Related
The answer to this might be quite easy but I couldn't find a solution since everything seems ok. I'm trying to create a google chrome extension and it has a button like this,
document.getElementById("autof").addEventListener("click", autofill());
function autofill() {
console.log("ENTER");
document.getElementsByName("session[username_or_email]").value = "sylent";
document.getElementsByName("session[password]").value = "abcdefg";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>TWITTER</h1>
<button id="autof">Fill</button>
<script src="twt.js"></script>
</body>
</html>
When you add the event listener to the button, you should pass in the function without actually calling it.
document.getElementById("autof").addEventListener("click", autofill);
Using parenthesis with autofill(), you are assigning the result of calling your function to the click handler:
document.getElementById("autof").addEventListener("click", autofill());
Try this:
document.getElementById("autof").addEventListener("click", autofill);
I'm learning to use event listeners, I wanted to log pressing the "Start" button to the console to make sure the button works but I'm not getting any results when I test the .html file in devtools.
I've verified the index.js name referenced in the .html file is the same
I've tried the source code in the header
I've added the src=index.js jQuery library through Google to the bottom before </body>
I've copied the code to repl.it to try a different environment
JAVASCRIPT:
function startQuiz() {
$('#startButton').click(function(event){
console.log("Keep Going");
});
}
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Herbal Medicine: Adaptogens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="questions" href="store.html">
</head>
<body>
<div class="container">
<p>Intro to Herbal Adaptogens explaining what they are</p>
<button id="startButton">Start</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I expect the to see "Keep Going" in the console when I press "start" but instead nothing happens at all.
You have the JQuery click() function inside the startQuiz() function. So it won't work unless the outer function (startQuiz()) is run first. You should put it inside a ready function so that it loads once the page is 'ready'.
Change your javascript to look like this:
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
});
});
No need to go with jQuery , you can just use js events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Log Window</title>
</head>
<body>
<script>
function logMe() {console.log('clicked');}
</script>
<button onclick="logMe()">logMe</button>
</body>
</html>
You should put it inside a Jquery click function. This way it will fire when the document loads.
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
}
});
Good evening,
I am importing with the method load different form which changes when submit, unfortunately the elements are not recorded by javascript after the use of ajax, I found answers to my prolet but I can not remedy it in square...
My test.php file simply returns a text & submite input with a form ^^
Thank you !
$("#voteform").load("test.php", { });
$(document).ready(function() {
$("#vote").submit(function () {
alert('test');
$("#voteform").load("test.php", {
username: $("#username").val()
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>WorldCube.fr || Votes</title>
<link rel="stylesheet" href="vote.css">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="votesystem center">
<div class="votetitle">
</div>
<div id="voteform" class="voteform">
</div>
</div>
</body>
</html>
It's unclear to me what question you're asking, but if you're saying that your event listeners or selectors aren't working before/due to HTML changes after page load, then you can you a selector like this:
$(document).on("submit", "#vote", function(e){
// your code here
});
The difference here is that by applying the listener to the document then even after content loads, the event listener will be still work as expected.
You'll want to put this JavaScript code in a place that is loaded with the document only once, maybe initially, so that event listeners aren't attached twice.
I have got code as below. I want change content of Meta-tags IE=Edge. But this code only in browser"chrome", browser"IE11" inactive. The people help me, please!!!
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="IE=EmulateIE7">
<script src="../js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$('meta[name=description]').remove();
$('head').append( '<meta name="description" content="IE=Edge">' );;
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
please you can see this page:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
It forces the browser the render at whatever the most recent version's standards are. Just like using the latest version of jQuery on Google's CDN, this is the most recent, but also can potentially break your code since its not a fixed version.
Last, but not least, consider adding this little tidbit:
See the page
Page 2
I'm running a very simple enquire.js test as per the enclosed and finding that it doesn't get a response from IE9. Several other browsers are responding fine (FF, Chrome, Safari). I've tested the test-suite from GITHUB in IE9 which runs fine - so I must be missing something. Any help appreciated!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>enquire.js test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="frame">hello</div>
<script src="js/libs/jquery.1.7.1.js"></script>
<script src="../dist/enquire.js"></script>
<script>
$(document).ready(function(){
enquire.listen(50);
enquire.register("screen and (max-width: 1000px)",
{
match : function(){
$("#frame").css("background-color","#f00");
},
unmatch : function(){
$("#frame").css("background-color","#0f0");
},
});
});
</script>
</body>
</html>
IE9 does not support the matchMedia API so you have to include a polyfill to get it to work. You can add the polyfill to the page however you like, providing it's loaded before enquire. Personally I use Modernizr to conditionally load polyfills, but that's personal preference.
Hope that helps