Jquery .change() - javascript

For some reason this is non functional any help appreciated.
<script>
$(document).ready(function(){
$('select[name=materialSelect]').change(function(){
alert("Changed");
});
});
</script>
<select name="materialSelect" id="materialSelect">
<option value="-1">-----Select Material-----</option>
<option value="0">Material</option>
</select>

Your code doesn't have any issue, be careful that you've called your
$('select[name=materialSelect]').change(function(){
alert("Changed");
});
after which your html is loaded.
For sample binding the document load to a function that called your code.

There is a on change function of jquery available already you are binding it with body load which means your select doesn't exists when you call the function, you should do this :
$(document).on('change', '#materialSelect', function () {
alert('changed');
});

Your code is fine as long as the HTML element (on which you are binding the event) is present when the binding script is running.
To be on safe side, always bind to a parent element (body for example) which will delegate the event it to the child.
So, try this,
$('body').on('change', 'select[name=materialSelect]', function(){
alert("Changed");
});
Hope it helps.

First, I'd look into where jQuery is being loaded. jQuery needs to be loaded before any scripts that use it.
Incorrect:
<script>
$('.something').change(...
</script>
<script src=""></script><!-- jquery -->
Correct:
<script src=""></script><!-- jquery -->
<script>
$('.something').change(...
</script>
Secondly, you should be using some kind of document on ready function. This will ensure your HTML is rendered before applying your events (eg "onchange")
Correct:
<script src=""></script><!-- jquery -->
<script>
$(function () {
// DOM is now ready
$('.something').change(...
})
</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<select name="materialSelect" id="materialSelect">
<option value="">-----Select Material-----</option>
<option value="0">Material</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('select[name=materialSelect]').change(function(){
alert("Changed");
});
});
</script>
</body>
</html>

Related

Trying for .show() and .hide() not working

<div id ="instant-view">
<textarea id="upload-data-text" placeholder="Copy & paste your data here"></textarea>
</div>
<script>
$("#instant-view").hide();
</script>
here the the id "#instant-view" not hiding, i am not getting whats going wrong.
i am using jquery though
Wrap your code inside document's ready event like,
$(document).ready(function(){
$("#instant-view").hide();
})
Working Fiddle
Add $(function () {});
<script>
$(function () {
$("#instant-view").hide();
});
</script>
You are missing $(document).ready(function(){});
Use,
$(document).ready(function(){
$("#instant-view").hide();
});
use the code inside document ready
$(document).ready(function(){
$("#instant-view").hide();
});
Try this
$(window).load(function() {
$("#instant-view").hide();
});
Firstly, make sure you've included jQuery or reference it properly, normally I'd use Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Secondly, if you put your code at the end of your page then it's fine, but if you place your jQuery code in the <head> section then you need to wrap it inside DOM ready handler $(function() {...}); to make sure all DOM elements have been loaded properly.
$(function() {
$("#instant-view").hide();
});
Your final code should look something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$("#instant-view").hide();
});
</script>

click event does not fire on newly created li tags

With the following code:
<!DOCTYPE html>
<html>
<head>
<title>test list</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<style>
li{
display:inline;
}
</style>
<body>
<input type="hidden" value="4" id="value">
<ol></ol>
<button id="btn2">increase</button>
<button id="btn1">show</button>
<p></p>
</body>
<script>
$("li").click(function(){
$(this).nextAll().css({"color":"red"});;
});
$("#btn2").click(function(){
var text="<li> -> kkk</li>";
$("ol").append(text);
});
$("#btn1").click(function(){
$("p").text($("li").length);
});
</script>
</html>
any newly created "li" tags that appear after clicking "increase" button, do not trigger handlers bound to the click event.
$("li").click(function(){
$(this).nextAll().css({"color":"red"});;
});
Can you please tell me the reason why it's not work. And is it possible to make it work? If yes, How? Thank you very much.
Try like this : As your 'li' are generating dynamically ( For further reading )
$("body").on('click','li',function(){
$(this).nextAll().css({"color":"red"});;
});
From jQuery documentation: "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next."
try this code:
$(document).on('click', 'li', function(){
$(this).nextAll().css({"color":"red"});;
});
May help to put your script library before the closing body tag
...
increase
show
...
see here: fiddle link
$(function() {
$("#btn2").click(function(){
var text= " --> ";
$('ol').append('<li>'+text+'</li>');
$('ol li:not(":first")').css('color','red');
});
$("#btn1").click(function(){
$("p").text($("li").length);
});
});

Dissect my jQuery - can't use keyup function to insert number of characters into another textarea

I'm trying to figure out why my jQuery isn't working. I've got jQuery linked to, and then after that, I try to bind to the textarea content. I've used name=content and name=#content both.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length)
});
</script>
Why isn't it working?
Code is now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=#content]').bind('keyup',function(){
$('#desctag').val($(this).length)
})})
</script>
You need to put it in a document.ready function so it executes when the DOM is ready.
$(document).ready(function() {
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length);
});
});

Put a field as read-only with javascript or jquery

I have tried to set a item to read only, as you see in the code i have tried several way and can't get that to work. Can anyone help me with this?
<html>
<script>
//test.Attributes.Add("readonly","readonly")
//document.getElementById('testtt').setAttribute('readonly', 'readOnly');
// document.getElementByID('test').value=readOnly;
//document.getElementByID('test').readOnly = true;
// $("#test").attr("readonly", "readonly");
//$("#test").removeAttr("readonly");
//$('#test').attr('readonly', 'readonly');
$("#test").attr("readonly")
</script>
<body>
<input id="test" type="text" value="text" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</body>
</html>
$('#test').attr('readonly', true);
working example : http://jsfiddle.net/FBUDt/
this should work for you:
$("#test").attr("readonly", "readonly");
remember that the DOM needs to be loaded before you try to find the element
you could use jquerys DOM-ready
$(function() {
$("#test").attr("readonly", "readonly");
});
what version of jquery are you using?
You should try wrapping your code into $('document').ready();
According to the documentation,
The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
So it would be:
$('document').ready(function(){
$("#test").attr("readonly", "readonly");
});
You can't refer to an element that is created later in the document. Move the script down below the form, or place it in a document.ready block. Also, you should use $.prop() in jQuery 1.6+
$(function(){
$('#test').prop('readonly', true);
});
I would go with
document.getElementById('test').setAttribute('readonly', 'readOnly');
But that is not the issue. The position of your script is where it goes wrong. You are trying to change element which does not exist.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>testcase</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div class="some container">
<input id="test" type="text" value="text" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>
<script type="text/javascript" charset="utf-8">
document.getElementById('test').setAttribute('readonly', 'readOnly');
</script>
</body>
</html>
If you place your scripts right befor the closing </body> tag , then it is executes as soon as DOM has been built.
And please. Stop using JS libraries to do the most basic things.
you are missing
$(document).ready(function() {
$('#test').attr('readonly', 'readonly');
});
sample
http://fiddle.jshell.net/Pe4J5/

What's wrong with this jQuery example?

The following jQuery example should put some text into the div, but it doesn't. I tried Firefox, Google Chrome and Internet Explorer.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
$(window).load(function() {
$('adiv').html('<p>hello world</p>');
alert('done');
});
</script>
</head>
<body>
<div id="adiv">
</div>
</body>
</html>
Sorry, this might be stupid, but I'm stuck.
change $('adiv').html('<p>hello world</p>');to
$('#adiv').html('<p>hello world</p>');
You're not actually selecting anything in your select function
Directly after your $( opening, you need to use a CSS3 valid selector. Just a string won't select anything unless it's a HTML element (table, div, h2)
You need to preface it with a . or a # to signal either a class or ID name.
$('adiv') should be $('#adiv').
Unlike Prototype, in jQuery you specify a CSS selector, not just a string that is implicitly inferred to be an ID. I find myself forgetting this from time to time.
As e-turhan already mentioned you need # in front of adiv in your $() otherwise this is not a id selector. Also it's always better to call these .load() events inside the .ready() jQuery event whose famous shortcut is $(function() { //execute when DOM is ready }); . In your case:
$(function(){
$(window).load(
function(){
$('#adiv').html('<p>hello world</p>');
}
);
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script> <script language="javascript"> $(window).load(function() { $('#adiv').html('<p>hello world</p>'); alert('done'); }); </script> </head> <body> <div id="adiv"> </div> </body> </html>
Paste this code instead ur query
It Will Work
Try $(document).ready(function()... instead of $(window).load(function()...

Categories