Jump to content
UBot Underground

[SOLVED] Update Drop Down Menu Without Refreshing UI


Recommended Posts

I know this has been an issue with Ubot for a long time and since it was never fixed in Version 4 (not sure about 5??) then here is a good solution.

 

Basically this will allow you to add a project and have the dropdown menu include it automatically instead of having to refresh the ui or use a dropdown dialog or something else. Give it a shot and you will see how it updates it after adding a new project.

 

To test this out make a folder on the desktop named Projects and add some projects in there as csv files.

 

I wish I could do a video to show it working right now but I can't. Possibly in a couple of days when I'm back on my desktop.

 

Some more things you should know, the select has an id of changeable_dd if you change that then change it in the js. The textbox has an id of project_name if you change that then change it on the onclick of the button.

on load("Bot Loaded") {
    clear list(%all_project_names)
    add list to list(%all_project_names, $get files("{$special folder("Desktop")}\\Projects", "No"), "Delete", "Global")
    loop($list total(%all_project_names)) {
        comment("This will replace .csv but you can change it to .txt
or whatever else you need")
        set(#cur_project_name, $replace($next list item(%all_project_names), ".csv", $nothing), "Global")
        comment("Basically add the select options into the variable #dd")
        set(#dd, $append line to text(#dd, "<option value=\"{#cur_project_name}\">{#cur_project_name}</option>"), "Global")
    }
}
ui html panel("<html>
<head></head>
<body>

<select variable=\"#select\" fillwith=\"value\" id=\"changeable_dd\">
{#dd}
</select>

<div>Project Name: <input type=\"text\" variable=\"#save_project_name\" id=\"project_name\"></div>
<div><input type=\"button\" value=\"Add Project\" onclick=\"addToDropDown(document.getElementById(\'project_name\').value);ubot.runScript(\'add_project\')\"></div>


<script>
	function addToDropDown(p_name) \{
		var sel =document.getElementById ( \"changeable_dd\" );
		var elOptNew = document.createElement(\'option\');
		elOptNew.text = p_name;
		elOptNew.value = p_name;
		sel.options.add ( elOptNew );
	\}
</script>
</body>
</html>



", 200)
define add_project {
    comment("This is where you save everything we need at least the name
but you can add anything else to save as well")
    save to file("{$special folder("Desktop")}\\Projects\\{#save_project_name}.csv", "")
}

  • Like 3
Link to post
Share on other sites

Nice post, I would like to add when using this method and editing larger bots when switching from code view back to node some times ubot will escape the (#dd Variable),  so you end up with \{#dd\} and your drop down will not populate.

 

To stop this from happening I generate the dropdowns option code save that to a .txt file and then add a read from file into the html panel where Insomnia has his  (#dd Variable).

 

Next we need a way to refresh the html panel when the when the dropdown options have been updated.

  • Like 1
Link to post
Share on other sites

Nice post, I would like to add when using this method and editing larger bots when switching from code view back to node some times ubot will escape the (#dd Variable),  so you end up with \{#dd\} and your drop down will not populate.

 

To stop this from happening I generate the dropdowns option code save that to a .txt file and then add a read from file into the html panel where Insomnia has his  (#dd Variable).

 

Next we need a way to refresh the html panel when the when the dropdown options have been updated.

 

That's a good idea.

 

This should update the dropdown though so no need to refresh the ui html panel that is the whole point of this. The javascript should add it in without the need for a refresh.

Link to post
Share on other sites
  • 1 month later...

There is actually an easier way to solve this now... 

 

Here is the code:

ui html panel("<select variable=\"#Selection\" list=\"#Options\" list-fillwith=\"options\"></select>", 100)
set(#Options, "Option 1,Option 2,Option 3,Option 4,Option 5", "Global")

Thought it might help so posted...

 

Carl  :)

  • Like 1
Link to post
Share on other sites

There is actually an easier way to solve this now... 

 

Here is the code:

ui html panel("<select variable=\"#Selection\" list=\"#Options\" list-fillwith=\"options\"></select>", 100)
set(#Options, "Option 1,Option 2,Option 3,Option 4,Option 5", "Global")

Thought it might help so posted...

 

Carl  :)

 

Thanks Carl,

 

That's what I am using now as well :)

Link to post
Share on other sites
  • 5 months later...

There is actually an easier way to solve this now... 

 

Here is the code:

ui html panel("<select variable=\"#Selection\" list=\"#Options\" list-fillwith=\"options\"></select>", 100)
set(#Options, "Option 1,Option 2,Option 3,Option 4,Option 5", "Global")

Thought it might help so posted...

 

Carl  :)

 

I just saw this. Thanks Carl!

Any other UIhtml tricks? :)

Link to post
Share on other sites
  • 1 month later...

i think nick javascript is updating when file created.

and i tried carl code and it does nothing, do i miss something? do i need to use javascript?

 

this is a real pain for updating ui, someone please come up with a plugin that i can buy and use.

pash have the plugin, but he can't distribute it for some reason....

Link to post
Share on other sites

Yes you miss some thing, Carl's was the best solution

 

ui html panel("<select variable=\"#Selection\" list=\"#Options\" list-fillwith=\"options\"></select>
<input type=\"button\" value=\"Options\" class=\"btn\" onclick=\"ubot.runScript('Options()')\"></button>
<input type=\"button\" value=\"OptionsB\" class=\"btn\" onclick=\"ubot.runScript('OptionsB()')\"></button>", 100)
define OptionsB {
    set(#Options"OptionB 1,OptionB 2,OptionB 3,OptionB 4,OptionB 5""Global")
}
define Options {
    set(#Options"Option 1,Option 2,Option 3,Option 4,Option 5""Global")
}

 

Link to post
Share on other sites

ok got it now, thanks

 

the method above require clicking on a button to update the dropdown.

 

how about this:
 

- user select an option from dropdown 1 (user select a main category)
- the sub category apply to dropdown 2 (user select a sub category)

the process do not use any button, any workaround for this?
 

Edited by fastlinks
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...