Develop Reference

Trigger the change of text in text box

I am unable to trigger the change of the text in the current scenario.
If i click on the button i am changing the content of the text. So how can i trigger the change of the text which is caused by external event.
For example in a click of a button I can able to fill any text in the textbox, able to paste texts and using mouse and keyboard. In these all scenarios and scenarios like these also I want the event to be fired.
I have already tried the following.
$('#text_id').on('change', function () {
alert('This is not trigged when i changed the text');
});
The alert should come when the text is changed. There might be many possible sources to change the text.
This is the Fiddle i created.
Thanks in advance.
This is my updated fiddle

Updated Fiddle - http://jsfiddle.net/upa2A/1/
$(document).ready(function () {
$(document).on('click', "#button_id", function () {
$('#text_id').val('TExt changed')
});
$(document).on('change', "#text_id", function () {
alert('This is not trigged when i changed the text');
});
});
Issues in original Fiddle -
Code has to be inside $(document).ready()
Missing () after function
Incorrect use of $.on (Read more about it on http://api.jquery.com/on/)
Edit based on comment from asked -
Updated Fiddle - http://jsfiddle.net/upa2A/4/
$(document).ready(function () {
$(document).on('click', "#button_id", function () {
$('#text_id').val('TExt changed').change();
});
$(document).on('change', "#text_id", function () {
alert('This is not trigged when i changed the text');
});
});
More edit based on comments thread -
From http://api.jquery.com/change "but for the other element types the event is deferred until the element loses focus."
Since, when changing via button click, text box wasn't focussed, the trigger does not happen automatically.

I saw your code in jsfiddle. you missed in some brackets and semicolon . otherwise ur code write . pls check jquery library code.
$('#button_id').on('click',function()
{
$('#text_id').val('TExt changed');
}
);
$('#text_id').on('change',function() { alert('This is not trigged when i changed the text');
} );

Try the below code. But for this you should use jQuery. It'll raise the event whenever the text changed.
$('#text_id').on('input propertychange paste', function() {
alert('Text Changed');
});
the working fiddle is here

This event surely raised on text change. If it is not useful for you surely someone else will be happy for this.
var txtVal = '';
setInterval(function() {
if ($("#text_id").val() != txtVal) {
txtVal = $("#text_id").val();
alert("Text Changed");
}
}, 10);
working fiddle is here

Fire an event only when an focused element looses focus

This is my Fiddle JsFiddle
$(function() {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').removeAttr("readonly").focus();
});
$('.form-control:focus').blur(function() {
$(this).addAttr("readonly");
});
});
What I am trying to do?
I am trying to create a dynamically editable form.It should have
When someone click on edit icon, the corresponding Input field should get focussed and become editable. (I completed this part).
Next i want is when an element is in focus state and it looses focus then i want to add readonly attribute again to that element. This part in not working. can somebody explain me why. and give a solution for it
EDIT:
In the later part i was trying alert("some msg") to check whether the event is getting fired or not. while posting i just replaced it with addAttr. it was a typo

You could use instead:
--DEMO--
$(function () {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').prop("readonly", false).focus().one('blur', function () {
$(this).prop('readonly', true);
});
});
});

There is no addAttr() function. The setter for attr looks like this:
$('.form-control').blur(function() {
$(this).attr("readonly", true);
});
Also, the :focus psuedo selector here is redundant, as to fire the blur event the element has to have focus in the first place.

Select all elements except ... in jQuery

I am working on a project, what includes a smartsearch engine.
I'd like to write a method what makes the client write inside the smartsearch, even when it's not focused. F.e. browsing the site, the client hits down a key, and the focus jumps to the smartsearch.
That's working fine with this simple code:
$(document).ready(function()
{
$("*").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But, yeah as You can see, it unfocuses other inputs too, and that's not the way I want it.
I have tried several 'possible-solutions', like :not() and even .not() method like:
$(document).ready(function()
{
$("*").not("input").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But it still unfocuses fields with "input" tagname too. What should I do to force jQuery not to select input fields for this event listener?
Thanks, Steven.

$(document).keydown(function() {
if (!$('input').filter(':focus').length) {
$('#b').focus();
}
});
Working fiddle

$(document).ready(function () {
$(document).keydown(function (e) {
$("input.ss-24#b").focus();
});
});
Does this work?
http://jsfiddle.net/Xbbu8/

Containers with same class to have separate jquery effect

Okay so I made a quick program that shows the hidden text when you click on a box. The problem is, when you click on either box, it shows the text in both of them. I only want it to show the text from the box you clicked in.
Javascript:
$(document).ready(function(){
$('.insidebox').hide ();
$('.box').on('click', function(){
$('.insidebox').fadeToggle();
});
});

You need to specifically access the current element, for instance, via this.
$( this ).find( '.insidebox' ).fadeToggle();
Without that, jQuery will just query for any .insidebox element within the entire DOM.

$(".box").on("click", function(){
$(this).children(".insidebox").fadeToggle();
});

Use the implicit object:
$(document).ready(function(){
$('.box').on('click', function(){
$(this).fadeToggle();
});
})

You can do that:
$(document).ready(function(){
$('.insidebox').hide ();
$('.box').on('click', function(){
$(this).fadeToggle();
});
});

In Chrome, while selecting the selectbox the jquery event is not fired

$("#form_field_field_type").live("click", function() {
console.log("I reach over here");
});

It seems to work to me. This demo shows that clicking the <select> will clone the first one and prepend it to <body>.

I got the idea... You can fire the change event instead of the click event, so use the following code;
$("#form_field_field_type").live("change", function() { console.log("I reach over here"); });
I hope it will work it out!!!