Replace fields in columns on click with JS - javascript

I am trying to find a way to do something with JavaScript. I have a list of exercises, they are 5, and I want when I click on one of them, this exactly one to be transferred to another list(right one), this will be the exercises the user choose from the left list, and if he changes his mind, to be able to return this exercise to the left list. Also, when some exercises are chosen, to be visible only on the right site.
<ul id="left" th:each="exercise : ${exercises}">
<button type="submit">
<li th:text="${exercise.name}">
</button>
</li>
</ul>
<ul id="right" th:each="exercise : ${exercises}">
<button type="submit">
<li th:text="${exercise.name}">
</button>
</li>
</ul>
Something like that.
(I build the whole project with Java and Spring)

I assume the 2 lists come from the Back End and are rendered on the UI.
You need to send a request to the server to tell that an item that clicked on to the server "API endpoint" to move the item to the 2nd list
If you are using ajax you need to send a get request to get the updated lists
If you are using Spring MVC that will require reloading the View to update the UI
If the lists are built on the Front end and then will be submitted to the server
You need to remove the element from 1st list and then add it to the 2nd list
<ul id="left">
<li id="i" onclick="remove(this)">Item that clicked on</li>
</ul>
<ul id="right">
<li id="li1">li 1</li>
<li id="li2">li 2</li>
</ul>
<script>
function remove(el) {
const textContent = el.textContent;
// copy classes or id or anything
el.remove();
addElementToRightList(textContent);
}
function addElementToRightList(textContent) {
const parent = document.querySelector("#right");
const element = document.createElement("li");
// do stuff with element eg: set text by getting it from item that clicked on using textContent
element.textContent = textContent;
parent.appendChild(element);
}
</script>

Related

Adding Button Actions - GetUIKit

I'm using the following GetUIKit: https://getuikit.com/
I want to use the UIKit and JS to do the following:
When a button named "Next" is pressed, the active item on an unordered list is changed to the subsequent item and that content appears. I would also like for a second button to appear, "Previous", if the active item is anything other than the first item in the UL.
Here is what I have so far:
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
<li>Welcome</li>
<li>Get Involved</li>
<li>Sign-Up</li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Welcome!</li>
<li>Here is how you can get involved!</li>
<li>Fill out the following form to be added to our contact list!</li>
</ul>
<button class="uk-button uk-button-default">Previous</button>
<button class="uk-button uk-button-default">Next</button>
UIKit provides navigation from the subnavs. In other words, I can click on those and it will pull up the corresponding item from the subsequent UL.
My issue is how I do this using a Next and Previous button. Are buttons the best choice? If so, using JS, what is the best way to go about manipulating the HTML/CSS to change what appears based on user's selection of "Next" or "Previous"?
I suggest you to use "Tab" in Uikit, Just use that tabbing name as Next/Prev
<ul uk-tab>
<li class="uk-active"></li>
<li></li>
<li class="uk-disabled"><a></a></li>
</ul>

How to use an element's attribute value to target another element with an identical attribute value in jQuery?

I have a menu of a list of article names list-A, and a corresponding list of articles content, list-B. Each list A and list B item pair share an identical value in their class eg. class="orderCntrl-6062347".
I want to be able to select an item from list A to bring the corresponding article from list B to the top of list B.
I know how to re-order the lists by using the following to bring a selected item to the top of a list:
$("li.orderIt").click(function() {
$(this).parent().prepend($(this));
});
This is what my code currently looks like:
<!-- List A selecting an item here should bring selected item and paired item in list B to the top of each of their lists -->
<ul class="list-A">
<li class="orderIt orderCntrl-6062347"><a>Item 1</a></li>
<li class="orderIt orderCntrl-6062348"><a>Item 2</a></li>
<li class="orderIt orderCntrl-6062349"><a>Item 3<a></li>
</ul>
<ul class="list-B">
<li class="orderCntrl-6062347"><h2 class="newsTitle">Item One</h2></li>
<li class="orderCntrl-6062348"><h2 class="newsTitle">Item Two</h2></li>
<li class="orderCntrl-6062349"><h2 class="newsTitle">Item Three</h2></li>
</ul>
<!-- Script to bring accompanying article to top of list on selecting side menu - currently only bring elements in List A to the top of their lists -->
<script>
$("li.orderIt").click(function() {
$(this).parent().prepend($(this));
});
</script>
Here's a link to how things will look, the green side menu is list-A (it may be above the page title on screens under 1300px).
How do I adjust the script to bring the corresponding list B item to the top as well?
Is this kind of what you are looking for?
https://jsfiddle.net/stevenkaspar/61oL0Lfm/
<ul class="list-A">
<li class="orderCntrl-6062347" data-news-target='#news1'><h2 class="newsTitle">Item One</h2></li>
...
<!-- List B -->
<ul class="list-B">
<li id='news1'>NEWS One</li>
<script>
$("[data-news-target]").click(function() {
$(this).parent().prepend($(this));
var target_element = $( $(this).data('newsTarget') );
target_element.parent().prepend( target_element );
});
</script>
You can use data-news-target to say what element it will move
Working JSFiddle Example
What you need to do is:
Get the unique name you want to use to match with the article element.
Use it to find the article element you want to move to the top.
Move the article element to the top.
Recommendations:
Set the unique name as an ID on the menu item. It'll be easier to get and cleaner (id's are supposed to be unique anyway).
Use .on("click", function() { ... }) rather than .click(function() { ... }) for the many reasons mentioned here.
Now, on click you need to find the id of this using this.id. Then you need to add a . to it and grab the element as an object using the symbols $(). Then prepend it in exactly the way you did before.
Example HTML:
<ul class="List-A">
<li class="orderIt" id="unique-name-1">Item 1</li>
<li class="orderIt" id="unique-name-2">Item 2</li>
<li class="orderIt" id="unique-name-3">Item 3</li>
</ul>
<ul class="List-B">
<li class="unique-name-1">Article 1</li>
<li class="unique-name-2">Article 2</li>
<li class="unique-name-3">Article 3</li>
</ul>
Example jQuery
$(".List-A").on("click", ".orderIt", function() {
$(this).parent().prepend($(this));
target_article = $('.' + this.id)
target_article.parent().prepend(target_article)
});
It could be simplified to:
$(".List-A").on("click", ".orderIt", function() {
$(this).parent().prepend($(this));
$('.' + this.id).parent().prepend($('.' + this.id));
});
but that's much less readable, which will make it more time-consuming to figure out what's going on 6 months later when you've forgotten what you did.

How do detect current page to add an active class to corresponding menu button

I am trying to figure out how to detect what page I am on so I can add a selected class to my html with Jquery. I have tried a few bits of script but they have not worked. I am working on a local server and for now just need something that can somehow detect the page I am on and somehow link it to the li's. I'm not sure how to tackle it
HTML:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><img src="img/small-icons/access-icon.png" width="17" height="16" alt=""/>Access</li>
<li>Fader Layout</li>
<li>Patching</li>
<li>Wild Controls</li>
<li>Buses & Outputs</li>
<li class="submenu">Contribution
<ul class="sub-section">
<li class="go-back"><a>I AM BACK BUTTON for contribti</a></li>
<li><a>test</a></li>
<li><a>test</a></li>
</ul>
</li>
<li>Oscillator</li>
<li>Talkback</li>
<li>Meters</li>
<li>Automixer</li>
<li>Audio Follow Video</li>
</li>
<li class="submenu selected">test-page
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
<li class="submenu">Control Surface
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
</ul>
</div>
A solution would be to use get params with something like How to get query string params and form the URL's so that they append the param as ?page=mypage and then get the page name or ID with getParameterByName('page') and then check out where you handle your tabs and perform your desired stylings/actions.
This can also be handled from backend, depending on the backend technology you are using.
For example
if PHP, perhaps append the get params there or set specific $_SESSION['page'] variable and handle these clientside
if Django, it can be exported to context or, also appended to get params and handled in the template via javascript or template tags
...and many other possibilities.
If the question though refers to how to set a status based on what page you are on depends on where you want to set that status, for example you might write a script that when clicking a button/link it would first make an ajax POST request to your server sending the ID that you are interested in (setting it in the backend somewhere) and then redirect to wherever you need.

Onclick problems in list elements

Okey so I got a List that's beeing created depending on the information from a database. the end result looks something like this:
<ul id="menu">
<li onclick="testFunction(1, "text")">Title1</li>
<li onclick="testFunction(2, "text")">Title2
<ul class="sub">
<li onclick="testFunction(3, "text")">Title3</li>
</ul>
</li>
<li onclick="testFunction(4, "text")">Title4</li>
</ul>
Now, I want to send the id and the text to the function "testFunction". This works great with the primaty li elements, but when I click a li element from the "sub" class, the function is first run on the pressed li element and then on the li element above. So in this case, if i press Title3, the function will first be ran with id 3 and then with id 2 witch is the parent element. I am thinking it's somehow accessing the whole li tree somehow but can't really understand why. any thoughts?

Making simple Nested List where sublist appear to side of the main list

I'm trying to make a Simple Nested List which will be some what similar to this Image.In the Image Main list is on Left and if there's any sublist it will appear on the right on mouse over.
the Link to what I'm trying looks like -sample at jsfiddle you can see Here the Problem I'm facing is
Q1 The Sublist is not easy navigable if you hover from list first to second and to third the whole list will disappear. behavior is not consistent may be because of design.
Q2. In My main page where I have to integrate it,
it keeps Pushing down all the element below it How can i handle it.
Q3. Right now the list is displayed like normal nested list, any help on making/showing side by side as in attached Image
for reference I'm putting the codes here too.
<ul id="ScatList" style="list-style: none inside;cursor: pointer;position: relative;margin: 0px;height:10px;">
<li><span><em>List</em></span>
<ul id="liststart" style="display: none;position:absolute;padding:2px 2px 10px 2px;top:20px;left:190px;text-align:justify" class="search-menu">
<li> <a>First</a>
<ul >
<li><a>1.1</a></li>
<li><a>1.2</a></li>
</ul>
</li>
<li> Second
<ul >
<li><a>2.1</a></li>
<li>2.2</li>
</ul>
</li>
<li> Third
<ul >
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Javscript:
jQuery('#ScatList').hover(function() {
jQuery('#liststart').show(400);
}, function() {
jQuery('#liststart').hide();
});
jQuery('#liststart >li').hover(function() {
jQuery(this).find('ul').show(400);
}, function() {
jQuery(this).find('ul').hide();
});
jQuery('#liststart >li> ul').hide();
You might find my minimalistic navigation plugin useful for this. You're free to use the code and change it to your own liking.

Categories