Excute JS in UI HTML Panel?

[Dillon 0]

Is it at all possible to execute JavaScript within a UI HTML Panel? Specifically I am wanting a text box to scroll to bottom every time it gets to the end of a thread. It's a log of what's happened and currently works as adding each new log to a list then making that list a variable. It works "okay" but not great having the logs all going to the bottom when it sits at the top of the box.

 

I've tried everything I can think of but from what I can find JS can only be executed in that way if used in an onclick that's already in the UI HTML Panel, be great to hear I'm wrong on that though.

 

Thanks,

Dillon

Edited June 23, 2014 by Dillon

[UBotDev 276]

You can use "onChange" event and you tie it to a hidden input with UBot variable. Whenever variable changes that event will be triggered and you can read variable value via JS.

[Dillon 0]

You can use "onChange" event and you tie it to a hidden input with UBot variable. Whenever variable changes that event will be triggered and you can read variable value via JS.

 

Thank you for you the reply, hearing there's a solution is awesome. I'm having a little trouble getting it to work though, any way you can provide just a quick example?

 

I figured it could just be:

      function updateLog() \{
var textarea = document.getElementById(\'tlog\');
textarea.scrollTop = textarea.scrollHeight;
\}

Along with the following on the textarea element:

onChange=\"javascript:updateLog()\"

Doesn't seem to be doing anything so I'm guessing I misunderstood.

 

 

Thanks,

Dillon

Edited June 23, 2014 by Dillon

[HelloInsomnia 1103]

Try just this:

 

onChange=\"updateLog()\"

[Dillon 0]

Try just this:

 

onChange=\"updateLog()\"

 

Thanks for the response. Unfortunately that's how I had it as first and how I'd normally write it, I had it the other way after an example of JS being used in the UI HTML Panel. Neither seem to work.

Edited June 25, 2014 by Dillon

[UBotDev 276]

I think you are not including JavaScript/Jquery into your HTML.

 

This sample works here:

ui html panel("<script src=\"http://code.jquery.com/jquery-1.11.0.min.js\"></script>
<input id=\"value\" variable=\"#test\" fillwith=\"value\" onchange=\"test_function()\" value=\"\"/>
<input id=\"status\" value=\"\"/>
<script>
function test_function()\{
 document.getElementById(\'status\').value = document.getElementById(\'value\').value;
\}
</script>", "")

To whatever value you set variable #test, the other input should follow...