Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have spent far too much trying to get a simple jquery and input box example to work.
When someone finishes typing something into the input box, I want jquery to popup an alert. Eventually I will be doing some more code with this but right now I just want to get this working!
Here is my example, which doesn't seem to work:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#selector').change(function () {
alert($('#selector').val());
});
</script>
</head>
<body>
<input type="text" id="selector">
</body>
</html>
Any ideas?
Wrap your jquery inside document.ready() as shown :
<script type="text/javascript">
$(document).ready(function(){
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
Read More here about document.ready().
EDIT :- If you want to alert on 'someone finishes typing(as given in your question)' then use .focusout() event as shown :
<script type="text/javascript">
$(document).ready(function(){
$('#selector').focusout(function () {
alert($('#selector').val());
});
});
</script>
DEMO
Add Document ready.
$(function(){
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
You must use .focusout
$('#selector').focusout(function () {
alert($('#selector').val());
});
working example http://jsfiddle.net/2w7gyjgy/
You need to put your code in a document ready handler -
<script type="text/javascript">
$(document).ready(function() {
$('#selector').change(function () {
alert($('#selector').val());
});
});
</script>
Use Document.ready in your script yo bootstrap on page
$(document).ready(function(){// apply this
$('#selector').change(function () {
alert($('#selector').val());
});
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
I do not know where to put the function
setTimeout('history.go(0);', 10000)
how do I code on a page?
One place you could put it is here:
<html>
<head>
<script>
setTimeout('history.go(0);', 10000)
</script>
<head>
<body>
..
</body>
</html>
another, better way is to write the script as follows
<html>
<head>
<script>
//console.info('initial load');
addEventListener('DOMContentLoaded', function () {
setTimeout(function () {
//console.info('reloading');
window.location.reload();
}, 10000);
})
</script>
<head>
<body>
my body
</body>
</html>
because this will wait for the whole document to be loaded before executing.
I would recommend reading up on AJAX and only fetching the parts you need as an asynchronous event, instead of loading the whole page again and again...
You don't even need a script...
Just add
<meta http-equiv="refresh" content="10">
in the headers.
Why do you try to do this via JS???
You need a timeout function to execute after 10 seconds (10000ms)
You can reload the page with window.location.reload()
setTimeout(function () {
window.location.reload();
}, 10000);
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Hi I am trying to include a simple jquery plugin: menuFlip into my project. When I try to call the plugin within the script tags it does not work on the webpage, and according to Sublime text 2 the script is never closed, as the closing script tag doesn't turn purple (stays yellow) and everything following stays yellow as well which is a sign that the script tag isn't closed..but the script tag is closed! Here is my code. (This is just the footer.php where I am attempting to load my scripts.)
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.menuFlip.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#flip_nav).menuFlip({
li_height : '20px',
flip_speed : 150,
flipped_class : 'flipped_item',
mouseover : function() {},
mouseout : function() {}
});
});
</script>
</body>
</html>
The script tag that won't close is the one that I call document.ready in.
Now looking at the stackoverflow coloring, it appears SO considers those script tags to be closed at least according to their color coding..Thanks
There is typo in your code . You are missing ' in your id selector
<script type="text/javascript">
$(document).ready(function() {
$('#flip_nav').menuFlip({
//----------^------ missing closing string selector
li_height : '20px',
flip_speed : 150,
flipped_class : 'flipped_item',
mouseover : function() {},
mouseout : function() {}
});
});
</script>
!function(i){i.fn.menuFlip=function(e){var t=i.extend({li_height:"20px",flip_speed:150,flipped_class:"flipped_item",mouseover:function(){},mouseout:function(){}},e);this.find("li").css({overflow:"hidden",height:t.li_height}).hover(function(){var e="-"+t.li_height;i(this).find("a:first").animate({marginTop:e},t.flip_speed),"function"==typeof t.mouseover&&t.mouseover.call(this,this)},function(){i(this).find("a:first").animate({marginTop:"0px"},t.flip_speed),"function"==typeof t.mouseout&&t.mouseout.call(this,this)}).find("a").css({display:"block","line-height":t.li_height}).each(function(){var e=jQuery(this).data("flippedText")?jQuery(this).data("flippedText"):jQuery(this).text();i(this).clone().text(e).appendTo(i(this).parent()).addClass(t.flipped_class)})}}(jQuery);
$(document).ready(function() {
$('#flip_nav').menuFlip({
//----------^------ missing closing string selector
li_height: '20px',
flip_speed: 150,
flipped_class: 'flipped_item',
mouseover: function() {},
mouseout: function() {}
});
});
li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="flip_nav">
<li>Home
</li>
<li>Web
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
This question already has answers here:
Works in jsFiddle but not on live site
(1 answer)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I have a very simple HTML file that looks like this:
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="mainScript.js"></script>
</head>
<body>
<button id = "theButton" type="button">Click Me!</button>
</body>
</html>
mainScript.js looks like this:
$("#theButton").click(function() {
alert( "Handler for .click() called." );
});
Nothing happens when I click though. If I put an alert into the JS file it will happen. If I run that snippet of JS in the console, then when I click the button it will work. I've tested that jQuery is loaded, and it is. I've also put this code in JS Fiddle and it works (http://jsfiddle.net/ds59ruvu/). What stupid thing am i doing locally that's preventing this from working?
Wrap your code inside ready handler:
$(document).ready(function(){
// your code here
});
OR,
$(function(){
//your code here
});
OR, move your script file before the closing of body:
<html>
<head>
</head>
<body>
<button id = "theButton" type="button">Click Me!</button>
<script src="jquery-1.11.1.min.js"></script>
<script src="mainScript.js"></script>
</body>
</html>
You should wrap your code with $(document).ready:
$(document).ready(function()
{
$("#theButton").click(function()
{
alert( "Handler for .click() called." );
});
});
The problem is in fact, that script is executed before element with id "theButton" is loaded, so you can't select it using $("#theButton").
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
When I get on one of my pages I want an lightbox to be loaded. I cant figure out how to make it happen.
Part of the jQuery:
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jss/jquery.js"></script>
<script src='http://fliphtml5.com/plugin/LightBox/js/fliphtml5-light-box-api-min.js'></script>
<script>
$(document).ready(function() {
$(".foo").trigger('click');
});
</script>
</head>
The image/link that should be clicked automaticly:
<img class="foo" src="imgs/logo-growpact.png"data-rel='fh5-light-box-demo' data-href='http://online.fliphtml5.com/classified' data-width='1280' data-height='720' data-title='Rootcage'>
First Just remove your
<script type="text/javascript" src="jss/jquery.js"></script>
And try this :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src='http://fliphtml5.com/plugin/LightBox/js/fliphtml5-light-box-api-min.js'></script>
</head>
<body>
<script>
jQuery(function(){
jQuery('.foo').click();
});
</script>
<img class="foo" src="imgs/logo-growpact.png" data-rel='fh5-light-box-demo' data-href='http://online.fliphtml5.com/classified' data-width='1280' data-height='720' data-title='Rootcage'>
</body>
</html>
Here is the Fiddle: CHECK THIS
UPDATED
<script>
jQuery(function(){
setTimeout(function(){
jQuery('.foo').click();
},400);
});
</script>
FIDDLE
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
<html>
<body>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('img').click(function(){
var getTitle = $(this).attr('alt');
alert(getTitle)
});
</script>
</head>
<body>
<img src="http://localhost/wordpress/wp-content/uploads/2013/02/chair-228x300.jpg" alt="alt" width="228" height="300" class="size-medium wp-image-92" />
</body>
</html>
This will basically display the alt attribute of the image in a popup once clicked but it seems not working. What am I missing? Please help.
The DOM is not ready to be manipulated/accessed when your code executes. Use the document.ready shortcut:
$(function(){
$('img').click(function(){
var getTitle = $(this).attr('alt');
alert(getTitle)
});
});
Wrap your jQuery in a document ready call.
$(document).ready(function() {
$('img').click(function(){
var getTitle = $(this).attr('alt');
alert(getTitle);
});
});
You're executing your code before the actual elements you want to apply it to have been loaded.
You need to wait for the DOM to fully load.
$(function() {
// your code goes here
});
example: http://jsfiddle.net/4Y6sL/
Try this
JS CODE
$(function(){
$('img').on('click', function(){
var getTitle = $(this).attr('alt');
alert(getTitle)
});
});