CODEWITHSUNDEEP
javascriptjquery
Poissonvert
Poissonvert

Reputation: 35

Basic javascript questioning

I'm trying to set a script to dynamically change a textarea content.

After some Googling I got this :

$(document).ready(function() {

    // This is a first text modification that works fine
    $('textarea#modifyme').val('Some useless text');

    // Catching a select change
    $('select#changemyvalue').bind('change keyup input',function() {
        // This alert triggers but twice
        alert('I know you want to change text');
        // This is not displaying...
        $('textarea#modifyme').val('I do not want to be display');
    });
});

First value setting is good, but when it comes to select change detection it gets a bit odd. Alert is triggering twice, and the second value setting is not functioning.

Any help greatly appreciated! Thanks.

Thanks to your answers I've fixed the double trigger, but still the secon .val('sometext') is not triggering.

I'm trying to apply this to a textarea displaying as a wysiwyg editor, I can only change the text on load (first .val('xx') call).

I also notice that if I invert these 2 lines :

// This alert triggers now only once
alert('I know you want to change text');
// This is not displaying...
$('textarea#modifyme').val('I do not want to be display');

To :

// This is not displaying...
$('textarea#modifyme').val('I do not want to be display');
// This alert does not trigger if placed here
alert('I know you want to change text');

Code seem to break at the first line, preventing 'alert' to display.

Is the nature of wysiwyg editor preventing text change after page load?

Here is the short version of html code :

<select name="" id="selectMe">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<textarea class="textarea callhtml5" name="changeMe" id="changeMe"></textarea>

<!-- Bootstrap WYSIHTML5 -->
<script src="path to wysihtml5 bootstrap"></script>

<script>
    $(".callhtml5").wysihtml5();
</script>

<script>
$(document).ready(function() { 
    $('textarea#changeMe').val('Initial text setup');
    $('select#selectMe').bind('change keyup',function() {
        alert('Test');
        $('textarea#changeMe').val('Final text setup');
    });
});
<script>

Solved this problem by using :

$('.wysihtml5-sandbox').contents().find('body').html("I got you modified");

Instead of this method :

$('textarea#changeMe').val('Final text setup');

Upvotes: 1

Views: 130

Answers (5)

Grundy
Grundy

Reputation: 13381

You can add event parameter to your handler and check what event is raised

As you can see below: first - input event, then - change event
So you should select just one of them.

This interesting, but seems input event for select raised just in Chrome.

Sample:

$(document).ready(function() {

    $('textarea#modifyme').val('Some useless text');

    $('select#changemyvalue').on('change keyup input', function(e) {
    
        console.log('Now raised: '+e.type+' event');
        $("#events").append('Now raised: '+e.type+' event <br/>');
        // This is not displaying...
        $('textarea#modifyme').val('I do not want to be display');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="" id="modifyme" cols="30" rows="10"></textarea>
<select name="" id="changemyvalue">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="events"></div>

Upvotes: 0

Vadivel S
Vadivel S

Reputation: 660

You Remove keyup input on your Script

Try This Jquery like this

$(document).ready(function() {

$('textarea#modifyme').val('Some useless text');

$('select#changemyvalue').on('change', function(e) {

    // This alert triggers but twice
    alert('I know you want to change text');
    // This is not displaying...
    $('textarea#modifyme').val('I do not want to be display');
});
});

Upvotes: 0

Jai
Jai

Reputation: 74738

It's because of keyup and input. If you bind both events the callback executes two times.

To over come this use these two bind input. You can omit the keyup.

One thing I would like to mention about input event is that it can't be captured. What I mean is it won't let you capture event.

Just noticed that the element is <select> element so better to use change keyup. You should avoid using input event as you are not putting text values in it but changing it with mouse or keys.

Upvotes: 2

Sumit Sahay
Sumit Sahay

Reputation: 514

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. http://api.jquery.com/bind/

You could probably change your code like this to work. 

  $(document).ready(function() {

    $('textarea#modifyme').val('Some useless text');

    $('select#changemyvalue').on('change', 'keyup', 'input',function() {
        alert('I know you want to change text');
        $('textarea#modifyme').val('I do not want to be display');
    });

  });

EDIT: Instead to using three things, one would work properly. Use input or keyup

Upvotes: 0

Luke
Luke

Reputation: 2168

You need to either take out change or input from .bind(). Both events are triggering thus running the function twice.

Hope this helped! :)

Upvotes: 1

Related Questions