Jquery - customize ui.ja - javascript

I am using jquery´s "ui.js" and "ui.css".
When i have this snippet:
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
Everything works fine, but when user chooses one item, i want to fire an event:
$(document).ready(function () {
$('input#tags').on('change', function() {
alert("event")
});
});
It doesnt work, anybody knows how to fire event´s when user select´s item?
Greetings!

Your code works fine as-is:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Vnhd8/
Couple of notes...
As you are using change and not keyup you need to leave the field for it to fire the event.
The modern/preferred onload syntax is simply $(function{...});
As id's are supposed to be unique on a page, and are the fastest lookup method, adding an input selector before the id may actually slow down the search.
Neater version
$(function () {
$('#tags').on('change', function() {
alert("event")
});
});
If you were to allow for dynamically created elements, use the deferred syntax of on applied to an element that does not change (and is an ancestor of the target):
Deferred "on" version:
$(function () {
$(document).on('change', '#tags', function() {
alert("event")
});
});
If you want per-keypress events instead:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Vnhd8/4/
$(function () {
$(document).on('keyup', '#tags', function() {
alert('event');
});
});
Only the last JSFiddle above uses jQueryUI (just to make sure it made no different to the events).

Related

JQuery On change, keyup not firing

I have an issue with a really simple function that is trying to fire when a text box changes. This seems to be a commonly asked question, but most of the time seems to revolve around the top $(document).ready being missing.
however this is stumping me. I have a number of other JQuery elements firing correctly, but this one doesn't seem to want to. Any ideas guys?
detection: <input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
$(document).ready(function() {
$('#txt_detection').on('change, keyup', function(){
alert "oops!";
});
});
I have it in a fiddle too: https://jsfiddle.net/hzmjjzd9/
Any help gratefully received.
You have two issues in your code. Firstly on() accepts each event in a single string that's space delimited, not comma delimited. Secondly, you're missing the brackets when you call alert(). Try this:
$(document).ready(function() {
$('#txt_detection').on('change keyup', function() {
alert("oops!");
});
});
Alternatively you can use the input event as it convers additional methods of amending the content of an input element, such as pasting using the mouse.
jQuery($ => {
$('#txt_detection').on('input', function() {
console.log("oops!");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
detection:
<input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">
What if your both concerns solves by single change event as follows,
Your jsfiddle doesnt have jquery library and your alert syntax was wrong.
$(document).ready(function() {
$('#txt_detection').on('input', function() {
alert("oops!");
});
});
Here is working jsfiddle.
Give it a try, this should work.
Document-ready Document

event listner not working for appended items

hey all i am appending a form to a page on click the form has some text boxes and i need to add event listner like on keypress but the function dosent works dont know where is the problem the function works well everywhere but not for this form here is the code.
appending the form
function activityCHART(thisobj){
var theidis=$(thisobj).attr("id");
$("#FULL_FADE").fadeIn();
$.ajax({
type: 'post',
url: 'newpage.php',
data:{'actde':theidis},
success: function(dataa){
$("#the_APPEDEDr5").empty().append(dataa);
}});}
newpage this textbox is present and some more text areas
<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi"/>
add this event listner
$('#detp_names09o').keypress(function (e) {
alert('ok');});
these are some script links
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
i think there are some script link problem
alert comes when i does it like this onkeyup="thisisfun();" function thisisfun(){ alert('ok'); }
You should use live(), delegate() or on() to attach event listeners to dynamically added DOM elements. bind() and keypress() doesn't work for elements that are dynamically added to DOM[see this]
$('#detp_names09o').live("keypress",function (e) {
//do some stuff
});
.on() is mostly syntax sugar that can mimic .live(), or .delegate() depending on how you call it.
$('#detp_names09o').on("keypress",function (e) {
//do some stuff
});
Also, you have specified two different versions of jQuery. Though CDN's do have some advantages over locally referenced libraries, they might break your code at-times.
If thats the reason you've referenced to local jQuery file(along with CDN version), you might consider looking at CDN fallbacks. In either case, you should be careful about the version you are using.
Cheers!
To attach event to dynamically added elements,
Try binding the event using 'bind'
$('#detp_names09o').bind("keypress",function (e) {
alert('ok');
});
or use 'on'
$('#detp_names09o').on("keypress",function (e) {
alert('ok');
});
Also you dont require two versions of jquery in your page, also make sure this id is not duplicated
use onkeyup,.. attribute inside the element and call the function like this
<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi" onkeyup="functionName()"/>
in javascript
function functionName(){
//your code
}
First of all you should decide what do u want to use, keyup or keypress ? For example if you want to use keyup and you are using jquery version greater than 1.7 then use
$(document).ready(function () {
$('#element').on("keyup",function () {
alert('result ok');
});
});
else u can use
$(document).ready(function () {
$('#element').live('keyup', function() {
alert('result ok');
});
});
Make sure that you are calling working script (check your script link), try not to make duplicate ids of elements instead use class and avoid using inline use of javascript. Happy Coding !

Disable select elements using jquery

I have a function which simply disables all select elements using following line of code
$('select').prop('disabled', true);
It works fine for all those select elements which already exist in DOM, however. There are several places where select elements are added using javascript/jquery. And above line of code does not disable those elements. One way to work around is that call that particular plugin everytime those select elements are added to the DOM but this would be a lot of work and needs.
Is there a better way to disable all these select elements?
<a id="myBtn" href="#">Insert select</a>
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script>
$(function() {
$("#myBtn").click(function() {
$("body").prepend("<select></select>");
});
$(document).on('DOMNodeInserted', function(e) {
if (e.target.tagName === "SELECT") {
console.log("doing stuff!");
}
});
});
</script>
You need this
$(document).on('DOMSubtreeModified', 'select', function () {
$(this).prop('disabled', true);
});
you can try somoething like this:
$('body').on('DOMNodeInserted', 'select', function () {
$(this).prop('disabled', true);
});
EDIT: it seems that DOMNodeInserted is deprecated. So you should use MutationObserver.
If you need IE9/10 support you can take a look at Polyfill.

jQuery not working after loading additional content

I am quite new to javascript, but I am using it at my website. Last week I found a script that loads additional content to my page via jQuery. Everything was all right until I noticed that my other scripts stopped working because of that. For example I have a script that binds checkboxes:
<script>
$(document).ready(
function() {
$('.class_of_checkbox').click(
function() {
if(this.checked == true) {
$(".class_of other_checkbox").attr('checked', this.checked);
}
}
);
}
);
</script>
It is inline code. I have read that it could be caused by function ready(), which fires only when the DOM is loaded, but I am not sure how to solve this problem.
Dynamic elements loaded with ajax needs delegated event handlers :
$(document).ready(function() {
$(document).on('change', '.class_of_checkbox', function() {
if (this.checked)
$(".class_of other_checkbox").prop('checked', this.checked);
});
});
Replace the second document with the closest non-dynamic parent, use prop() for properties, and use the change event to capture changes in the state of a checkbox.
Use $.ajaxComplete to rebind your actions when the ajax call completes
http://api.jquery.com/ajaxComplete/
$(document).ajaxComplete(function() {
$('.class_of_checkbox').click(
function() {
if(this.checked == true) {
$(".class_of other_checkbox").attr('checked', this.checked);
}
}
);
});

Trigger a jQuery Event Handler Assigned in a Different Code Block

I have a case where a click handler is defined/assigned in one jQuery code block (file) and I want to trigger it from another click event defined/assigned in a different jQuery code block. How can I accomplish this?
The following code is a greatly simplified version of what I am trying to accomplish. The behavior I want to see is a JavaScript alert "Element One" when I click #Element2.
Example HTML:
<p id="Element1">Element One</p>
<p id="Element2">Element Two</p>
First jQuery code block:
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
Second jQuery code block:
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').click();
});
});
UPDATE: My original example actually works. I was building upon my field hint jQuery UI Dialog solution, and didn't account for about the 'clickoutside' handler that I was using. Adding a check to for the second element in my 'clickoutside' handler allows the dialog to display.
You need to trigger a click when you click on the first element. You can use the trigger method for this.
function element1Hanlder () {
alert('Element One');
}
$(document).ready(function() {
$('#Element1').click(function() {
alert('Element One');
});
});
$(document).ready(function() {
$('#Element2').click(function() {
$('#Element1').trigger('click');
});
});
EDIT: This is based on JohnP's "trigger" suggestion (so you should choose him as the right answer)...
If I load this block from an external js file...
$(document).ready(function() {
$('#Element1').click(function () {
alert( $(this).text() );
});
});
Then load this in a script tag within the HTML itself...
$(document).ready(function() {
$('#Element2').click(function () {
$('#Element1').trigger('click');
});
});
Seems to be working as intended.

Categories