We Keep Coding

Javascript - modal select option (unable to select item in modal)

Could someone kindly advise me how I go about expanding my code?
What I want to do is:
When the plots_container is clicked, this prompts up a modal with a list of charts in it
When the user clicks on a chart (eg: line plot in the modal), the content in the span stating hello hello changes to <span>line plot</span>
I would like to do something exactly like this
At the moment I have just managed to prompt up the modal when plots_container is clicked.
I would be very grateful if someone could take a look at what I've tried in the below files and provide suggestions or feedback.
index.html
<span class="modal_content">
<select class="hide seriesDetails" title="Type of Chart for this Series" id="ChartType" name="ChartType"><option selected="selected" value="17">Pie</option></select>
<div class="seriesDetails" id="plots_container">
<span>hello</span>
</div>
<div id="plotList">
<ul>
<li class="business">
<div class="image_text_content">
<div class="image_container"><img src="Content/images/plot-thumbs/1-scatter-plot.jpg" alt="scatter-plot"></div>
<div class="plot_title">scatter plot</div>
</div>
<div class="image_text_content">
<div class="image_container"><img src="Content/images/plot-thumbs/2-line-plot.jpg" alt="scatter-plot"></div>
<div class="plot_title">line plot</div>
</div>
</li>
</ul>
</div>
</span>
application.js
// modal to display types of plots
$(document).ready(function() {
$('#plots_container').click(function() {
$('#plotList').fadeToggle();
})
$(document).mouseup(function (e) {
var container = $("#plotList");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
});

A quick JSFiddle: https://jsfiddle.net/hxnm7q2L/1/ to show how you can use an
.addEventListener("change", function(e) {
to trigger showing the value changing of a selected value in a modal.

If I correctly understood what you want, you could try something like this:
$('.plot_title').click(function(event){
$('#plots_container > span').html(event.target.innerText);
})
Though it would work only with html-structure that you've provided, since it has very specific css-selectors.

Open dialog on button click for dynamically added list items

I have an unordered list of list items that each contain a button. When this button is clicked, I want my dialog box to open for the associated list item. Each list item has unique text that the dialog box should display.
Here's my html
<ul id="filter-list" class="scrollable-menu text-center">
#foreach (var filter in Model.GlobalFilters)
{
<li class="form-inline" data-id="#filter.FilterId.ToString()" style="margin-bottom: 8px">
<button type="button" class="description-button" title="View/Edit Description" style="background-color:transparent;">
<i class="fa fa-sticky-note fa-2x" aria-hidden="true"></i>
</button>
<textarea type="text" class="description" title="Filter Description" style="display: none">#filter.Description</textarea>
</li>
}
</ul>
And here's my JQuery
$(document).ready(function () {
$('.description').dialog({
autoOpen: false,
buttons: {
'OK': function () {
//var name = $('input[name="Description"]').val();
//storeData(name);
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
})
$('button.description-button').on('click', function () {
$(this).siblings('.description').dialog('open');
})
});
I was hoping that the jquery dialog init would be done for every single list element that my foreach loop generates, but it seems to only be done on the first element. Furthermore, the dialog doesn't even open for the first element when I click the button.
Any insight here would be greatly appreciated. Still very new to all things web development!

you can fix your issue using the event delegation technique, here is a medium article which explain how to approach it event delegation
small example
document.addEventListener('DOMContentLoaded', function() {
let app = document.getElementById('filter-list');
// attach event listener to whole container
app.addEventListener('click', function(e) {
if (e.target && e.target.nodeName === 'LI') {
let item = e.target;
alert('you clicked on item: ' + item.innerHTML);
}
});
});

In JavaScript, or jQuery, how do I accurately grab an attribute to manipulate the active selector?

Ultimately I'm wanting the user to click on the Landing Page next to an image on either Print or Mug. Then on the Order Page have the button for Print/Mug be active and then the image that's associated be marked as well.
So I have in Landing Page the following code:
<ul class="dropdown-menu">
<li>
Print
</li>
<li>
Mug
</li>
</ul>
Then in the Order Page the following code:
<div class="img-container1 image-container" image_var="main_image.jpg">
<%= image_tag('main_image.jpg') %>
<div class="wk-after">
<div class="centered-wk">
<span class="fa fa-check-circle check-circle"></span>
</div>
<div class="centered-wk wk-select">
SELECTED
</div>
</div>
</div>
My thought process was to then grab from the Order Page the image_var attribute and make it active.
So far I've been using:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('image_var');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
This isn't working. I don't know what the best way to grab the image_var or a url parameter. What am I missing?
I've also tried:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('[image-var]');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
With an update to the div on the container to be image-var to match. Still not touching the image.
I feel like this should be working with jQuery:
<script>
$(function(){
$.url.attr('image')
$.url.attr('type')
});
</script>
Wouldn't this be pulling out the main_image.jpg and then the print from type?

Adding List records into container only once in Jquery

I have two containers in top and bottom,
Top container initially it will have no records i'm adding list of text from bottom container to top container on button click as of now its working fine,
but one small change in my scenario currently now multiple records are adding to my top container i want only once no multiple/same list record should appear in top container
say for example if i have one record placed above in top container next time even if i click add button same list record should not be added into top container either button should be disabled after adding list record or no duplicate record should be allowed in top container
somebody help me out in achieving it Thanks!
https://jsfiddle.net/qx69o1bd/
html
<div>
<ol id="sortable">
</ol>
</div>
<br/>
<div>
<ul id="draggable">
<li>
<div class="qitem">
<label class='lbl'>
Lance
</label>
<button class="hello" >Add To Top container</button>
</div>
</li>
<li >
<div class="qitem" >
<label>
Adam
</label>
<button class="hello" >Add To Top container</button>
</div>
</li>
<li >
<div class="qitem" >
<label>
Rickey
</label>
<button class="hello" >Add To Top container</button>
</div>
</li>
</ul>
</div>
JQuery
$(document).ready(function() {
$("#sortable").sortable();
$("button").click(function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
});
});

only add a class to disable and validate it. With css also you can stylling the button. https://jsfiddle.net/mig1098/qx69o1bd/4/
$(document).ready(function() {
$("#sortable").sortable();
$("button").click(function () {
var label = $(this).prev().text();
if(!$(this).hasClass('disabledbutton')){
$("#sortable").append('<li>'+label+'</li>');
}
$(this).addClass('disabledbutton');
});
});

$(document).ready(function() {
$("#sortable").sortable();
$("button").click(function () {
var label = $(this).prev().text();
if ($("#sortable > li:contains("+label+")").length != 0)
return;
$("#sortable").append('<li>'+label+'</li>');
});
});
This checks if there is already an element which contains the name, and if so doesn't let the user add it again!

If you use the one method to attach your listener to the click event, the button will only run your listener once (per button the selector applies to):
$("button").one('click', function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
});
If you wish to actually disable your button, you can do this by setting the disabled attribute on the object:
$("button").one('click', function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
$(this).attr('disabled', true');
});

jQuery if radio button is selected then proceed to next element

I'm very new to JavaScript and jQuery. I know my code is not the prettiest, but I'm trying to start somewhere.
I have a series of questions that are shown one at a time, and want to create some sort of validation to prevent the user from going to the next question if a radio button on the first button hasn't been selected.
HTML (I have four of these .questionContainers
<div class="questionContainer">
<div class="question">
How much storage do you need?
</div>
<div class="answers">
<ul>
<li>
<label>
<input type="radio" id="storage">1GB or less
</label>
</li>
<li>
<label>
<input type="radio" id="storage">More than 1GB
</label>
</li>
</ul>
</div>
<div class="btnContainer">
<div class="next">
<a class="btnNext">Next</a>
</div>
</div>
</div>
JavaScript
(function(){
var Questions = {
container : $('.questionContainer'),
init : function() {
this.start();
if($('input[type=radio]:checked').length > 0){
this.container.find('a.btnNext').on('click', this.next);
}
},
start : function() {
this.container.not(':first').addClass('hide');
},
next : function() {
var container = $('.questionContainer');
$(this).closest(container).hide(function(){
$(this).closest(container).next().show();
});
}
};
Questions.init();
})();
The specific line that isn't working:
if($('input[type=radio]:checked').length > 0) {
this.container.find('a.btnNext').on('click', this.next);
}
The Problem
When I add the if statement and click a radio button followed by next, it does not go to the next question. I am not receiving any errors in the console.

This binds to the click event only if something is checked at the time that the start function is called (not what you want - it will never be true unless you pre-select a radio button for the user without their action):
if($('input[type=radio]:checked').length > 0){
this.container.find('a.btnNext').on('click', this.next);
}
Try replacing it with this instead:
this.container.find('a.btnNext').on('click', function () {
if($('input[type=radio]:checked').length > 0){
this.next();
}
});
This way you always bind to the click event, but the function that is bound only allows next to be called if something is checked at the time that the function is called (i.e. when the next button is clicked).