Hook for modyfying widget content

I’m afraid my JS is rather weak, but clearly the current textarea content based on keyboard input is not being picked up when you do textarea.textarea=textarea.textarea + div;
I couldn’t say why though. It seems to me you could do away with the conditional and simply do the following in all cases:
`var current = $(‘.addhtml’).val();
$(‘.addhtml’).val( current + div );`

If current is an empty string then the textarea simply becomes the div value. Keep in mind the content of the browser’s textarea as seen by JS/jQuery is really unrelated to what value is stored on the server as seen by PHP, at least until a “save” action of some sort updates the server value. This is why you see different behavior when “save” is used — your script is at least picking up the server’s value correctly, just not the current value in the browser textarea.

No need to be the last question. If you can tolerate the time lag I can do this day in and day out – I’m happy to help ??

No, the behavior is not different when I use save. It’s different only when I hit save and reload the page. Then it works. But if I save and dont reload the page it doesn’t work.

I would think it’s simple solution like that:

$('.addhtml').on('keyup', function(e){
      textarea.textarea=$('.addhtml').val();
    });

I add a function which after a key is pressed on keyboard, supposing that the user is typing, the textarea.textarea value is updated with current texatrea value. But it doesn’t work like it should. The textarea value is not given for textarea.textarea, I checked with alert.

And then again client/server side is driving me mad ?? Probably I need to send the value to server somehow during typing.

OK, not different, sorry, I didn’t read carefully enough.

I don’t think hitting the server on every keypress would be a good idea, even if it does work — could have usability issues over dodgy connections or heavy server load. Unfortunately, I’m unsure what would be a good idea. I know there’s many questions in general (not just WP) regarding forcing page refreshes (not reload) in JS, usually due to the need for an element to be redrawn. I wonder if this is a related issue with a similar solution. Some sort of event to cause JS element values to be brought up to the current state. Could be the same event that causes redraws?? Not sure what that would be, I’ve seen several suggestions, might be worth doing a search and trying a few.

Sorry I don’t have a good answer, but if you keep asking I’ll keep answering as well as I’m able ??

This is crazy how couple lines of code solves my problem.

//this is the solution
$('.addhtml').on("input", function() {
    var input = this.value;
    $('.addhtml').val(input);
});
$('.addhtml').on('keyup', function(e){
    textarea.textarea= $(".addhtml").val();
});
//this is my button
$(document).on('click', 'input.press_div', function(evt){
    if(textarea.textarea=='') {
	textarea.textarea = div;
        $('.addhtml').val(textarea.textarea);
    }
    else {
        textarea.textarea=textarea.textarea + div;
	$('.addhtml').val(textarea.textarea);
    }
    return false;
});

Now my button does not replace the text I type with keyboard anymore. I am happy :).

However when I hit save it still replaces, but that’s not too much a problem. I just need to think off how to force page refresh after user hits save.

Ah! Awesome! I’m happy for you ??

Off the top of my head I’d think window.location() to the current page within the save click event would cause the page to reload. Not sure if that overrides the save or the data is posted anyway.

That’s really a workaround since the real solution would save the data without replacing the content or requiring a reload. I wonder if somehow keeping textarea.textarea current when save is clicked is a better approach. Well, at this point whatever works, eh?

Thank you for help!