Generating menu with javascript? - javascript

I'm trying to make a form where people can add or delete menus and options for those menus in order to generate a menu for a game. I need to be able to grab the value of the form data for each specific menu and the options for that menu, so my current idea is to have a variable put into the id of each menu and then a new variable into the id of each option. Each time they add a menu, that variable increases and each time they add an option for that menu, the variable specific to that menu increases. The problem is that if they add a ton of menus or options and then delete them, the number still increases and I could end up have menus and options with huge gaps between their id values.
Is there a way to do this with arrays? I'm not sure how much sense this is going to make if any, so let me rephrase:
Is there a way to make an array of elements?
I'm having a very hard time just trying to describe what I'm trying to do. Do any of you have AIM or another means of live chat?

Am not sure I understood correctly what that you are trying to do, but if I did this is my solution:
have jQuery .size() run every time someone deletes a menu or option, and then reassign the ID of each element with a .each() loop.
jQuery size() page

Related

How to create page items with dynamic action defined on other item in page in oracle apex

I have a page with multiple text fields and select lists with the list of values. What I want to do is defining a dynamic action on one of the select lists that display numbers and returns same numbers and according to the selected number, I want to create or duplicate another select list in an amount of selected number. Then, after the end-user finish his work, I want to be able to take the selected values of select lists that are created within the dynamic action within the on-submit process.
Example:
In short, I want to create a dynamic action that duplicates the instructor list as many as the selected number of the number of sections list. How can I accomplish this?
If I understood what you are saying, you'd rather switch to a tabular form (or interactive grid, depending on Apex version you use). Using it, you can "Add row" as many times as you want (which would be your "Number of sections") and use the same LoV (i.e. Select List) in every row.
As far as I know (which really isn't that much), Apex isn't capable of doing that "as is". Maybe you can accomplish it the way you want it using some other techniques (blindly guessing & mentioning: JavaScript, Ajax, jQuery or whatever you might need).

Transfer selected item from select to div and back

I'm trying to achieve something, but I don't know if it is even possible.
On a page I have a selectbox with a number of options. There's also a div section on the same page.
I would like to be able to select one or more options, press a button and make the selected items disappear from the selectbox, and appear inside the div. And all this sorted as well.
Now, I have got this part of the code working (have to admit that I "borrowed" the code from several places...)
code:
JSFiddle
The second part I'd like to achieve is to be able to select the elements in the div, click another button, and have the elements removed from the div and re-appear in the selectbox. Sorted again.
I think I have to change the type of the element when transferring from selectbox to div (maybe into an li ?), in order for them to be selectable, and on the way back, convert the type to <option> again, but I don't know how....
What happens now when I select an option and bring it to the div, the text in the div also has the form '<option>'...'</option>' , because it has been exactly copied.
I'm hoping I'm making sense here, and I hope there is someone who can point me in the right direction. If I'm going about this in the completely wrong way, please tell me.
By the way, it's easy if I was using two selectboxes, but I can't. It has to be one selectbox and one div......
Thanks, Hans
As we said in main post comments, here are some issues you have :
How to select elements in jQuery
I know that you know, but in your example you want to move elements from a div to another, you'll need for that to put each value in a div (then you'll be able to select each one).
How to make div selected
Your second issue is that you want to be able to select divs in the right box to copy them back in the select :
$("body").on("click", ".rightElements", function(key, element){
$(element).addClass("selected");
})
Then you can do :
$(".rightToLeftButton").click(function(){
// Your $(".selected") divs value go to the select
});
This piece of code provides new issues :
How can I unselect selected on clicking other divs ?
How can I select multiple divs ?
Etc. etc.
(I'm sure with practice, tests, and logic you'll do it!)
If you achieves these points, you can achieve all others of your problems, when you have a problem you can't explain with an unique phrase (who can be long :)), ask you if there are not several issues, separate them and look for answers !
It seems rude but you should take a look at :
http://eloquentjavascript.net/
https://jquery.com/
https://developer.mozilla.org/en/docs/Web/JavaScript
https://stackoverflow.com/tags/javascript/info
Regards,

Force order between two jquery UI sortable lists

Surprised this question hasn't been asked before, at least I haven't been able to find it.
I have multiple lists or elements that are all connected together using jQuery UI sortable. Its all working as the docs say it should, however I would like to make the lists force sort. For example, when each list is loaded in, the items are ordered by date. When you move an item from list 1 into list two, you can place that item anywhere in the list, regardless of its date. Similarly you can move items within the same list so they are out of date order.
Is there a way to make it calculate the date ordering and render the items in the correct order once an item has been moved?
Once an item is moved from one list to another it performs an ajax request to save that item to that list, a possible solution would be for that request to return that list in a sorted order and then re-render that list, however that doesnt seem like a particularly clean approach as you already have all the data.
Any easier/better ways of doing this? If its also possible to prevent reordering within the same list that would be ideal.
thanks.
JQuery Sortable does not handle the behavior you are trying to achieve. You have to do it your self. I think the receive eventHandler is a good starting point. you can use ui.item.prev() and ui.item.next() to retrieve the previous and the next elements then check if the insertion point matches your requirements and insert the element to that position or turn the element back to it's old list/position ( $(ui.sender).sortable("cancel"); )

Wordpress widget adding variables

I want to add a filter feature to my wordpress widget. For this, I must be able to add as many filters i want. For its implementation, I am adding filter select box and text box to accept filter value, on the fly through javascript.
My problem is;
How can i save these values to widget instance variable. So the next time they should be visible.
How will I access these values for processing.
Please let me know if I am not clear on some point.

How to implement dynamic taxonomy navigation / hierarchical drop down list using ajax/jQuery?

I'd like to provide my users a way to navigate a taxonomy by successively drill down ono drop down lists.
A simple example would be something like ebay's categories. Say you pick the category "Clothing", the next drop down list would display all the sub-categories under Clothing such as "Shorts", "Pants", "Coats" etc. And this can go on arbitrarily deep.
I looked at the jQuery plug-in mcDropdown. The interface looks really nice. However it seems to require the entire taxonomy to be passed to the plug-in in one go. Other plug-ins I looked at also have this limitation.
I need somethinig that retrieves & displays data dynamically. So after the user picks "Clothing", the UI sends that selection back to the server, which then sends back a list of sub-categories of "Clothing", so on and so forth.
Is there any jQuery plug-in that does that? Or what would it take to implement that in plain jQuery?
I'd prefer jQuery, but other frameworks would be fine too.
I do not know of some plugin for this so here is a breakdown of the process..
Should not take long to implement.. (i do not attempt it as it relies on your server-side technology and preference between html/xml/json for the ajax call returns..)
jquery Ajax call to bring 1st level data
create dropdown with jquery and add fetched data to it
List item
use jquery .data() method on the new dropdown a autoincrementing counter (will be used to remove all later instances when you change something in a dropdown that is not the last)
bind a handler to the .change() event of the new dropdown that will repeat the entire process, passing as parameter to the ajax call the id of the selection (should create the logic once and just invoke it manually the first time..)
in the same handler, check if the counter of the select box is not the last one, find all dropdowns and remove those with counter greater than this dropdown..
add the new dropdown in the DOM..
I hope it makes some sense..
I once wrote a plugin that might be what you're looking for; if not, at least it should give you a good place to start coding from (hopefully :)

Categories