add div from drop down menu selection jquery - javascript

I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked

The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.

Related

How to keep javascript updated with an editable HTML page and user-added elements at different levels

EDIT: for a general solution, this worked for me. Event binding on dynamically created elements?
So I have a interface that kind of looks like this:
User can toggle to show or hide the sublists. I used jquery to select the toggle buttons for them to work:
$(".dropdownBtn").click(function(){
//rotate the button
$(this).parent().toggleClass("caret-down");
//hide the sublist
$(this).closest("li").find(".active").toggleClass("nested");
})
They can also add new sub_elements to each element. For example, like this:
$(".fa-plus-square").click(function(){
//if there's no new list, create a new unordered list
if ($(this).closest("li").find("ul").length == 0){
$(this).parents("li").append(newUL);
//and add a toggle button
$(this).parent().prepend(toggleBtn);
}
//add the element
$(this).closest("li").find("ul").append("<li>newElement</li>")
})
But then the newly added toggle button under element 3 wouldn't respond. I believe that I need to "bind" the newly added button. But I'm not sure what's the best practice to do so.

Dynamically created selectors in jQuery

Hi I am trying to dynamically create a selector for jQuery instead of using a static one. The problem is, it is not working predictably/consistently.
I created a fiddle here: http://jsfiddle.net/Cc92f/
If you click run and click in each of the top radio buttons once, they work, but you cannot use the same buttons a second time.
If you click a top button, and then a bottom button, you can no longer click any of the buttons.
You may have to reload it a couple of times to see how different uses break it in different ways.
Thanks you for any and all help!
$(".concattest").click(function(event)
{
var radioid=event.target.id.split("_");
$('#r_2_'+radioid[2]).attr('checked', 'checked');
event.preventDefault();
});
Use .prop('checked',true) instead of .attr('checked','checked').
http://jsfiddle.net/5LWEk/
If you want to:
When changing selection in the top row, change value of bottom row
accordingly
When changing selection in the bottom row, select the last option in
the top row
Then use change event and prop() function, here is the demo

JQuery Mobile Listview Background Color

How can I adjust the background color of a listview item in jquery mobile? Basically I'd like a user to click a item and have it and only it highlight, very simple, so I thought.
I thought this might achieve it (.groupList is an unordered list with that class). The event is fired but nothing changes.
$(".groupList li").bind('click', function() {
logger.debug("list row click");
$(this).closest("li").siblings().attr("data-theme","a");
$(this).parents("li").attr("data-theme","e");
});
I think the reason this is broken has to do with the fact I can't seem to set data-theme dynamically at all on listviews. I also can't use the background-color css with any luck.
It seems li tags can only have their data-theme set before appending to a list, once appended I can't get it to change.
The logic I've described here works on table rows just fine. Just bind the click event to tbody tr. The jquery functions closest, siblings and parent help us turn on/off the css for the background color. Again, not entirely sure why a listview breaks this.

Select box with 50+ word select

I have a number of subtopics I would like to select using a select / dropdown box. The problem I have is that each subtopic is 30-50 words long. Does anyone know of any way that I can have multi-line selects within a select box? Right now I can show the select but because of my page size I have some data trucated.
I guess maybe jQuery has a solution but not sure as I'm not so familiar with jQuery
You better use autocomplete
To make the dropdown elements multi-line, just edit the css of .ac_results li making it taller (for instance, change line-height)
Instead of using a stock-HTML select element, perhaps consider using a div with n other divs inside it, each with their id as the ID of the subtopic (likely you'll need to prepend something if the Ids are numerical). Show the div on click of whatever, select the subtopic on click of the individual subtopic div. You can then style the divs how you want, allowing text to wrap, etc. This would also work well with an unordered list.
G
I'd change my mind using something different than a select, rather using a div (or dialog, or accordion) with selectable items in it using jQuery UI.

jQuery Selectbox Append Options OnChange

I'm working with jQuery and a plugin called jQuery.SelectBox
I have 3 selectboxes, selecting an option in the first selectbox will change the options in the second one.
My problem comes when I try to insert values in the second selectbox via append function in jQuery. Everything works fine but the new options are not clickable.
You can see the problem right here: http://incubadora.gelattina.com/impac/galeria.html (scroll down and to the right), there are the three selectboxes.
From what I understand, you put in a normal select, and this does a dynamic creation of a stylized 'select box' via jQuery.
The problem, I would guess, is that, since you're adding items after the select box's initialization, the new items don't have any sort of action listeners on them.
I can't seem to find any documentation on this SelectBox plugin, but you need to find a way to Bind the click and hover actions provided by SelectBox onto you're newly added items.
You can try calling the .selectbox(); function on the select elements after you've added the new options to see if that works.
Hey I wrote a select box plugin called Selectzor, just for this reason.
It should accomplish everything you need.

Categories

Resources