Dynamic ajax/php select tag - javascript

Good evening,
I got a small issue with my dynamic select thing like already said in the title. My goal is to reach the following result:
If someone selects an instrument from the first select tag, the other tag called "Besetzung" should filter a list of users who play the selected instrument, for the second select tag like shown in the
screenshot
(Instrument = instrument; E-Bass = electric bass; Besetzung = occupation; Offen = open)
This works fine so far. But my problem is, that i got like 3 to 10 of these blue boxes (screenshot). You can add these boxes manually over a button. And every single box should contain these "individual" select tags... So i need something like a unique ID for each select tag, each time a box is added. So this is my function for the dynamic selection so far:
function fetch_select(val)
{
$.ajax({
url: 'get_data.php',
type: 'POST',
data: {
get_option:val.value
},
success: function (response) {
document.getElementById("studentSelect").innerHTML=response;
}
});
}
If the function succeeds the element with the ID "studentSelect" is changed. But what I need is something like an array or so, which is used in my html, php and ajax to change every single element... I got no idea how to give every single select tag a unique ID because the number of tags will change while someone is using the website.
I hope you understood what I mean, was a bit difficult to explain for me.
Thanks for any help in advance.

What you would normally do is use a common class for all elements involved.
Then within the change events you can get the specific instance of the select class that was changed and use that to traverse to the corresponding other select to poplulate
Repeating structure
<div class="row">
<select class="select-1"></select>
<select class="select-2"></select>
</div>
JS
$(document).on('change', '.select-1', function(){
// traverse to closest row, then look within that row for matching select
var $otherSelect = $(this).closest('.row').find('.select-2');
$otherSelect.load('get_data.php', {get_option: this.value})
.fail(function(){ alert('Oops something went wrong')});
});

So you have two select lists, the second one depends of what is selected in the first one. That is a very usual task in questionnaires.
The first thing you did, is to change the second select list via ajax,trigger by a change in the first select list right? (that is fine)
So you basically need is the php(server side code) that returns the html of the 2d select list. Isn't it?
Whatever, what we need here is the list of options for each option of the first list. That info should go server side in tables or arrays if you want.
if you provide the options list for each option of the first list then I or somebody else can help you with the php for it.

Related

JQuery- is it possible to grab a nested sibling element after an onclick event?

I'm running into a problem with an old web forms app that I am adding some functionality to.
I have a table that is dynamically populated from a database and lives in a DataGrid. I'm attempting to add a drop down carrot that will show a certain section of the table when clicked. The problem is, the ID is set dynamically by the ASCX file/or it is going to not be unique so I am trying to figure out a creative way to grab it and display it.
Is it possible to grab the sibling p with a class name of problemDescription after clicking on P above?
I've tried using combinations of this function but that just returns either nothing, or the .problemdescription from the next row.
function expandDescription(buttonClick) {
//returns the problem description from the next row
$(buttonClick).closest('tr').next().find('.problemDescription')
//does not find anything
$(buttonClick).closest('td').next().find('.problemDescription')
//does not find anything
$(buttonClick).closest('p')
//does not find anything
$(buttonClick).next('p')
//does not find anything
$(buttonClick).closest('.problemDescription')
}
Thanks for any help!
$(buttonClick).closest('tr').find('.problemDescription')

jQuery clone misunderstanding

I'm not understanding this cloning process... this is what's happening, there are four pictures, three clicks, first photo is the initial state.
In the third picture there are two boxes, that's fine, but rather than each box having one project name input and add task button, there are two in the first box, and normal in the second box. Click the button again and it becomes 3:2:1, next click it would be 4:3:2:1, etc... I don't want that. I just want boxes to be added with one piece per box.
code
function addProject() {
$(project).clone().appendTo(".projectPanel");
$(projectNameInput).clone().appendTo(".project");
$(addTaskButton).clone().appendTo(".project");
}
Your problem is your appendTo it appends the element to all elements in the set of matched elements so everything with the class "project". for more information on it try looking at the jquery appendTo documentation. to fix it try something like this
function addProject() {
var newProject=$(project).clone();
newProject.appendTo(".projectPanel");
$(projectNameInput).clone().appendTo(newProject);
$(addTaskButton).clone().appendTo(newProject);
}
using the return value of $(project).clone() allows you to grab only the new project rather than all of the projects that currently exist

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

Dropdown-List - Multi-Selection should add text to Textbox in several Lines

Hello everybody! :)
I've made an easy random Drop-Down-list on our "Price-Request-Site" with all the Items in the List that we sell to our Customers.http://i.imgur.com/qg5jj0p.jpg
And because they need to request Prices for those items, they can select one or more items from the Dropdown-List and the Output goes to a "simple Textbox"
You have to Select one or more Items from that DropDown-list and the JavaScript should "paste" the selected List-items to the Textbox.
The Textbox is already a part of a "Formular" to send the Textbox-input as an E-mail.
My JavaScript does the following at the moment:
If click an Item from the List, the Item-name appears in the Text-box in the first Line.
If I click a Second OR/AND another item, the JavaScript will overwrite the now existing "Item/Textline" from the first Line in the Textbox.
http://i.imgur.com/9DoY7cS.jpg"
I need the following solution to my JavaScript and it should be easy as possible:
When I click to another Item from the List, it should be added to the Second Line, When I click another Item, it should be added in the next (3rd) Line...
Background-information:
This Script should make it easier for the Customer to write a Price-Request-EMail to us.
(Without searching through the Shop and looking for or Article-Numbers, instead he can choose Products from the Dropdown-list with an Output to this Email-form/textbox)
function favsports()
{
var mylist=document.getElementById("mylist");
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;
}
I would be very Happy if someone could help me with my issue, i'am really new to JS :D

How do I create a clickable grid of hours in a week, saving clicks to MySQL?

Just wondering if there is a system out there that will basically allow for the following :
Displaying a grid of hours in a week that a user can click on to select and reclick to deselect and when the form is submitted it will send the blocks off to MySQL to store.
Since I havent done this before Im not sure on the best course of action, intial thoughts were to load up a pixel.gif and use onclick to tally clicks but before I reinvent the wheel as a square I thought it best to ask questions first to save trouble later.
You could create a table where the checked td's have one class and the unchecked td's have another class, and all of them have a unique ID. Then set the onclick action for each of the two classes to send the id of the td as an argument to a javascript function that uses ajax to update the database and changes the class of the td to selected or unselected.
The html would look like:
<td id='19_09_2011_12am' class='unselected_td'/></td>
<td id='19_09_2011_12am' class='selected_td'/></td>
The css would look like:
.unselected_td{background-color:blue;}
.selected_td{background-color:yellow;}
And the javascript:
$('.unselected_td').click(function(){
var cell = this.id;
$.ajax({
type:'post',
url:'path/file.php',
data:"cell="+cell+"&checked=1",
success:function(){
$(this).removeClass('unselected_td').addClass('selected_td');
}
});
});
And vice-versa for the selected ones, sending a 0 to the server instead. I'm not 100% sure about the syntax I used in the jquery, but the idea of this should work
I think the easiest way to achieve this would be to use buttons or checkboxes to represent the dates/hours selected. Checkboxes would be the simplest, since they could just be set to a value of '1', and only the selected checkboxes would show up as $_POST variables when you submit the form.
Buttons could have more style applied to them, but you would have to use some javascript code to toggle the value and style of the button when it's clicked. This is very easy to do in jQuery.

Categories