select jquery onChange not working with X-editable - javascript

In this fiddle, I'm using X-editable.
In the corresponding fiddle, I'm not able to make the below code working:
$('#practice').on('change', function() {
alert(this.value);
});
I'm already using anonymous function
I'm not using invalid expressions
I'm using this
I'm using select
Console is not throwing any error as such.
Where am I going wrong?

If you inspect the DOM when the editable is active (ie. the select is visible) you'll see that the select is not actually a child of the #practice span - it's in a sibling span named .editable-container. This is why your delegated event handler on #practice is not working.
That being said, if you read the X-Editable documentation there is an event you can hook to to achieve this directly without you needing to attach your own events - save.
Try this:
$('#practice').on('save', function(e, params) {
alert(params.newValue);
});
Updated fiddle

Related

Select2 off('change').on('change'.....) does not able to change the selected option

I use Select2-4.0.0 And
$gameSelect.select2().on("change",function(e){....}
works fine.
But when I chain it following off('change') like:
$gameSelect.select2().off('change').on("change",function(e){....}
The event is triggered but the selected item does not change at UI.
Why is that?
Looks like the select2-4.0 is adding its own change handlers to the select element, when you say off('change') that too is getting removed that is the reason.
To fix this kind of problems we have event name spacing so, use a namespace to your handlers and use it to remove them like
$('#my-select').select2().off('change.mychange').on('change.mychange', function () {
//your code
});
Demo: Fiddle
To preserve the settings of select2, use this code instead of the accepted solution :
$('#my-select').off('change.mychange').on('change.mychange', function () {
//your code
});
You don't need to reinstatiate the .select2(). It's unnecessary and also shorter.

Bind jQuery events to DIV with specific HTML TAG like TEXTAREA

I have one DIV element which contains dynamically created TEXTAREAs and <input type="file"/> and <input type="checkbox"/>.
Currently I have bound three events on above DIV like below
jQuery("#uniqueId ").bind("click change keypress", function(e){
....
....
});
Now problems occur are when I click on file input button to Browse and Upload a file or check on Checkbox I receives following error
Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.
myxFunction myXjavscript.js:1172
(anonymous function) myXjavscript.js:109
f.event.dispatch jquery-1.7.1.min.js:3
h.handle.i
and because of it file and checkbox inputs are not working and throwing errors. I just want to bind above events only on TEXTAREA and not other elements under a DIV.
Reason to use "click change keypress" events together because in Chrome I am performing Dynamic operations on Textarea to get cursor position after add/edit/delete texts from Textarea. So to record all those things I needed to add those three events.
How can I achieve this?
If you only want to bind the events to the textareas contained within #uniqueId, use the second argument (delegate selector):
jQuery("#uniqueId ").on("click change keypress", "textarea", function(e){
....
....
});
Edit: didn't realize you were using .bind, always use .on! It's awesome. http://api.jquery.com/on/
You should check the element before using it like,
if(jQuery("textarea#uniqueId").length)
{
jQuery("textarea#uniqueId").bind("click change keypress", function(e){
....
....
});
}
Or if the element is exists in page then write your code in document ready function like,
$(function(){
jQuery("textarea#uniqueId").bind("click change keypress", function(e){
....
....
});
});
Also id must be unique if you id conflicts with other elements the you should specify element with id like textarea#uniqueid

Using jQuery to select checkboxes with click events

Is there a way to use jquery to select all checkboxes on a page that have an associated click event? I considered adding a class, for instance HasClickEvent, that I could use to identify such classes, but I am editing a huge script where click events are sporadically added all over the place and I think this would probably end up being messier, so a single jQuery call would be perfect
jQuery.each($('input[type=checkbox]').data('events'), function(i, event){
jQuery.each(event, function(i, handler){
if(handler.type.toString() == 'click')
{
// do something
}
});
});
To check all
$('.checkbox').attr('checked','checked'); // checkbox is the class for all checboxes to be selected change it with our own
To deselect all
$('.checkbox').removeAttr('checked');
A quick google reveals this plugin, but it's pretty old. You may be able to read the code and see how they are achieving it though :D
If the click events are attached using the onclick attribute (instead of added dynamically via JavaScript/jQuery), you can do it like this:
$("input[type=checkbox][onclick]").each(function() {
//All returned elements have an onclick attribute
});

onclick event on Ajax output

Hi i am using Ajax to get a SELECT tag. I mean, if i click on a button it will generate a SELECT tag inside HTML, i have different outputs for different options of select.
I need an onclick event on that SELECT tag, i tried using JQuery
$('#id').click(function() {
alert('test');
});
Its not working. Can anybody help, please
Because the select tag is dynamically added to the HTML after the event was set, the event is not set on the select tag.
A simple solution is to use live() here:
$('#id').live('click', function() {
alert('test');
});
as you are dynically generating html use live instead of click
$('#id').live('click', function() {
// Live handler called.
});
Make sure
you have jQuery script file is inserted in your html page,
you have assigned id id to one and only one item on your page,
you give us a link to see your page if nothing else helps. :)
live is now deprecated. Use on instead.

Using jQuery on dynamically added content

I am newbie to jQuery and javascript. In my application I have a list of users. When a particular user is clicked from the list, a div element is replaced with details about the user dynamically. When another user is clicked, again I replace the same div element with this user details. So at a time only one user details can be seen.
I use jquery, so my code to the above description looks like.
$('table#moderate_users tr').click(function() {
$.get('/moderate/user/'+uid, function(data){ $('div.user_info').html(data);
});
});
This works perfect and the content is inserted dynamically.
I have a dropdown(html select tag) in the dynamically added content. So I get the dropdown only when i click on a user from the list and it changes repectively when I click on another user. I wanted to find the value of the select tag using jquery whenever it is changed. So I wrote
$('select#assign_role').change(function(){
alert(this.val());
});
Since this dropdown is added after document.ready, adding this script inside document.ready function never worked. I also tried to insert the above script along the with the user details which is dynamically added.For my surprise this script is not inserted into the document at all, while the rest of the HTML content are inserted perfect. I am not aware if i can add insert javascript after the document has loaded. I am not aware how i could use jQuery to find out the value of the select tag which is added dynamically.
Thanks.
you want jQuery's "live" functionality:
$('select#assign_role').live('change',function(){
alert($(this).val());
});
also notice I changed alert(this.val()); to alert($(this).val()); considering that this inside a jQuery event handler references the actual dom element, not a jQuery object.
From the looks of your code, it seems that you are inserting a chunk of HTML into that div. So even if you wire your event to the dropdown after the page load, it will not work, since all of your event binding will be ignored when you insert new HTML code into div.
Try moving your code inside the function that inserts HTML. Something like this:
$('table#moderate_users tr').click(function() {
$.get('/moderate/user/'+uid, function(data){
$('div.user_info').html(data);
$('select#assign_role').change(function(){
alert(this.val());
});
});
});
On IE the live function doesn't work for onchange on <select> elements.
http://www.neeraj.name/blog/articles/882-how-live-method-works-in-jquery-why-it-does-not-work-in-some-cases-when-to-use-livequery
You will need to either add the select then do a setTimeout and then bind with the jquery.bind type of functionality, or, what I have done, is when you create the element then just set the onchange event handler there directly.
If you don't need to support IE then the live function works great.

Categories