CODEWITHSUNDEEP
javascriptjqueryajaxfunctiononchange
Constantin.FF
Constantin.FF

Reputation: 697

jQuery dont trigger .change

I have 2 functions: the first one will update an input field, and the second one will show an image if the input value is a valid image.

I can not merge them into only one function because they are working on separated pages (I have just putted them on one page for the example). Also I can not change the first function!

Instead of .change if I use .blur or .focusout I have to click in and out the input box to update the image. How can I get it working without extra clicks?

<script type="text/javascript">
$(document).ready(function() {
   $("input:radio").click(function() {
      $("#image").val($(this).val());
   });
});



$(document).ready(function() {
   $('#image').change(function() {
      var src = $(this).val();
      $('#imagePreview').html(src ? '<img src="' + src + '">' : '');
   });
});
</script>

<form>
<input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG<br />
<input type="radio" name="name" value="http://www.google.bg/logos/classicplus.png" /> IMG<br />
<input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG<br />
<input type="radio" name="name" value="http://www.google.bg/logos/classicplus.png" /> IMG<br />
<input type="radio" name="name" value="http://www.w3schools.com/images/w3schoolslogo.gif" /> IMG<br />
</form>


<input id="image" type="text" name="fname" />



<div id="imagePreview">

</div>

Upvotes: 0

Views: 3239

Answers (3)

Jeff B
Jeff B

Reputation: 30099

If you have no control over the first function, you might need to manually check the input field using an interval and trigger change manually. This is not ideal, but it would work if that's your only option.

$(document).ready(function() {
    setInterval(checkInput, 250);

    var prevInput = '';

    function checkInput() {
        if (prevInput != $('#image').val()) {
            prevInput = $('#image').val();

            $('#image').trigger('change');
        }
    }

    $('#image').change(function() {
        var src = $(this).val();
        $('#imagePreview').html(src ? '<img src="' + src + '">' : '');
    });
});

Example: http://jsfiddle.net/jtbowden/AWmNA/

If that is all the function is doing, you could eliminate a step:

$(document).ready(function() {
    setInterval(checkInput, 250);

    var prevInput = '';

    function checkInput() {
        if (prevInput != $('#image').val()) {
            prevInput = $('#image').val();

            $('#imagePreview').html(prevInput ? '<img src="' + prevInput + '">' : '');
        }
    }
});

Upvotes: 1

JAAulde
JAAulde

Reputation: 19560

The change event requires the following three things happen:

  1. Element gain focus
  2. Value change
  3. Focus blur from element

If you are changing the value of an input programmatically, then you must manually trigger the change event via jQuery's .trigger('change') or the .change() shortcut.

Ideally, you would modify the first function to trigger change:

$(document).ready(function () {
   $("input:radio").bind('click', function () {
      $("#image")
        .val($(this).val())
        .trigger('change');
   });
});



$(document).ready(function () {
   $('#image').bind('change', function () {
      var src = $(this).val();
      $('#imagePreview').html(src ? '<img src="' + src + '">' : '');
   });
});

However, per your question text, you cannot change the first function as I have suggested. This being the case, there is no good option for you, IMO. You could set up a timing interval to poll the input for its value and trigger the change event if you notice that it is different from the last check, but that's just ugly. Regardless, you need to cause the change event to fire.

Ugly:

//LEAVE FIRST FUNCTION ALONE

$(document).ready(function () {
  var $imageInput = $("#image"),
    $imagePreview = $('#imagePreview'),
    lastVal;

  $imageInput.bind('change', function () {
    var src = $(this).val();
    $imagePreview.html(src ? '<img src="' + src + '">' : '');
  });

  lastVal = $imageInput.val();

  setInterval(function () {
    var currentVal = $imageInput.val();

    if (currentVal !== lastVal) {
      $imageInput.trigger('change');
      lastVal = currentVal;
    }
  }, 500);
});

Upvotes: 2

musefan
musefan

Reputation: 48415

EDIT: I may have misunderstood you originally. You basically want to call the change function from within your radio button click event. As you said you have these on separate pages (not sure why) you should consider creating a function to do the update work. Something like this should help...

function doProcess(){
   var src = $('#image').val();
   $('#imagePreview').html(src ? '<img src="' + src + '">' : '');
}

$(document).ready(function() {
   $("input:radio").click(function() {
      $("#image").val($(this).val());
      doProcess();
   });
});

$(document).ready(function() {
   $('#image').change(function() {
      doProcess();
   });
});

of course with this you don't really need the second function (.change) at all unless the user can manually type a value

Upvotes: 0

Related Questions