I have 6 select boxes (sbs), 3 to a row so two rows. The top three sbs contain a list of options that gets populated via php, data is pulled back from mysql. When an option from each box is selected I'm using jquery (via ajax) to pull back option items for the sb immediately below it and populate said sb with corresponding data. I click 'create' and the data is sent via ajax to a php script which then stores the data in a table and returns the submited dropdown data (albeit formatted) in a table below the form. So you might have something that looks like this after creating a 'combination'. Eveyrthying to the left of the colon was an option on the top row of select boxes and then you have selected options from the corresponding box below displayed to the right.
Color: Red | Capacity : 4GB | Model : ABC | EDIT
Color: Blue | Speed: 2GHZ | Capacity : 2GB | EDIT
etc.
If I want to edit the record I click edit and jquery finds the id of the edit button clicked, passes it via ajax to another php script which then returns a json object with the relevant data and this is then used to repopulate the dropdown boxes with the selected options. Everything so far works fine.
My problem is this, only the top row of sbs get one of the options selected when edit is clicked. The child options don't get selected and I can't figure out why. I can get the right options to display but can't set the selected state for whatever matching value is returned in my json object. I've been 8 hours trying to figure it out and tried various things on SOverflow and other sites, none of worked - i'm not that experienced with javascript/ajax to be honest.
Upon a successful ajax process i.e success: I am doing the following:
var jObj = $.parseJSON(html);
//parentVariations# is the select boxes in the top row where
//Color, capacity, model options are displayed.
//The trigger fires off my ajax function which is responsible for
//populating the corresponding child select box with relevant data.
$('#parentVariations1').val(jObj.groupAttr1).trigger('change');
$('#parentVariations2').val(jObj.groupAttr2).trigger('change');
$('#parentVariations3').val(jObj.groupAttr3).trigger('change');
//childVariations# is the child option box, i have the same code for each child
//box but am only showing the first one here for simplicitys sake.
//What I thought I was doing here is getting each option then if the value
//matches that held in my corresponding json object set that option to selected...
//Doesn't work :'(
$("#childVariations1 option").each(function()
{
if($(this).val() == jObj.childAttr1)
{
$("#childVariations1 option").attr('selected','selected');
}
});
Any help would be very welcome as it's driven me over the edge.
$("#childVariations1 option") is an array of all the options. You need to specify which one:
$("#childVariations1 option").eq(1).attr('selected','selected');
If your case, use a for loop and use the index for get the current position, instead of using .each. (or set up a counter)
Related
I need to create 4 dropdown list where the options are the names of the candidates (ex. 5 candidates) in a certain position (ex.Representatives). When i select a candidate from the list in the first dropdown, there will be 4 options in the second dropdown, and in the third dropdown there will be 3 options and so on. To sum it up, what is the php code for removing the list in the next dropdown upon selection without submitting it yet.
Use jQuery......jQuery help you to do validations easily. So it may take less time for client side validation
For e.g.;
$("#id_of_dropdown").change(function () {
// Some Code Here like you want to change another dropdown put if else here
});
I have 2 select items.
In the first one I'm loading the options from a MySQL database table using PHP.
The second one I want to load the fields from another table where for example category field equals the value of the item selected on the first tag.
I have no idea about how I can make the second select tag load the options dynamically. I know I need to use Ajax I guess.
I've found this, but it doesn't help too much since the options of the first select tag depend on what it can find in the database.
// Given the options in the first dropdown are: "foo", "bar", and "baz"
var secondData = {
foo: ['lorem', 'ipsum'],
bar: [1,2,3],
baz: []
}
Then I need to add a 'change' event to the first dropdown, and given the value of that dropdown, load the contents of the second dropdown with the values contained in the secondData object, but I can't apply this.
If you want to get the values for the second dropdown from a database, then you do need ajax.
See this post:
Populate dropdown 2 based on selection in dropdown 1
A couple of other good posts re the basics of AJAX:
A simple example
More complicated example
I want to edit/update, multiple rows together in Yii CGridView.
Say, each row has a checkbox and a single edit/update button, I select multiple rows and by clicking on edit/update button all selected rows are opened for editing and update.
Is this possible with Yii CGridView..??
Use the selectableRows property of the CGridView.
According to Yii Documentation for CGridView
public integer $selectableRows;
the number of table body rows that can be selected. If 0, it means rows cannot be selected. If 1, only one row can be selected. If 2 or any other number, it means multiple rows can be selected. A selected row will have a CSS class named 'selected'.
You can use the the $.fn.yiiGridView.getSelection(containerID) to retrieve the key values of the selected rows.
Add some more buttons either at the top or bottom of the gridview with actions for edit, delete or whatever action you need to take and pass the key values retrieved above.
If you want to edit rows in-line you can use extension phaActiveColumn which I messed up to support multiple rows (the whole table if desired).
EDIT: well, the extension basically creates an input field replacing the grid cell when user clicks on the cell. The field will have the cell's value for starters and it then sends an ajax call to controller, as soon as the user presses enter, asking to save the value of the field, which will be the user's input.
My addition was to create one such field for every cell in the row and store user input in javascript objects which then get send all at once with one ajax call to the controller. Multiple row updates are supported (creating adequate number of javascript objetcs).
If anyone has any interest in this there it is.
phaEditColumn2
phaAbsActiveColumn2
I am using Dreamweaver to create a site.
I have created my database within phpMyAdmin and have two tables set up that contain the data I wish to display on my site. (it is a football team site and the page I am editing displays player profiles).
I have set up a drop down box, which is connected to my players table in phpMyAdmin. This I have set to display surname of the player. (I've set up the recordset to retrieve all data from my "players" table)
Below that, I have another div which contains text that I want to display based on the selection on the drop down list. For example, Position, appearances, goals, assists, etc.
Position: Dynamic text to be displayed here
Appearances: Dynamic text to be displayed here
etc
(This data would come from the "players_info" table - but the two tables are connected via the player_id field which is contained in both)
What I can't seem to do is work out how to get the text to update when the user would select a player from the drop down list.
Any help would be greatly appreciated.
Thanks
James
You can do these using ajax function.
when you select a player name ,then javascript or jquery event will be called which include a php file.
This php file must contain the sql which fetch your desired player information.
when server give response, then display it your corresponding div
Im trying to find a tutorial or something that will allow me to populate 3 textboxes with data from a mysql database based on whats clicked on in a select dropdown box.
For example, my select looks like the following:
<select name="imaselect">
<option value="USA">USA</option>
<option value="AUS">AUS</option>
<option value="NZ">NZ</option>
</select>
Then under that i have 3 blank textboxes.
If i click USA, it will go to the database, ask for 3 values, return them and then put them in the 3 text boxes, same if i click AUS and the same if i click NZ.
Any help would be greatly appreciated, im having trouble with this.
Cheers,
You need 2 things.
a php file that connects to the database and retrieve the three values for the country passed to it as a parameter.
a javascript script that calls the php file with country name and puts the returned values in the textboxes.
<script type="text/javascript">
jQuery(function( $ ){
$("select").change(function(e) {
$(".temp").load(\'index.php?parameter1=\'+ $(this).val(), , function() {
$(".textbox1").val($(".temp1").text());
});
});
});
</script>
Something like this. Of course you have to set a reference to the jquery file. And then you have an index.php (or name it different) and can give it parameters however you want via the load function. The element with the class temp will get the content, because you cant use the load to get data in the textbox directly. (So you need to create that element .. hidden!) Then it gets copied into the element with the class textbox1. copy the 2 inner lines as many times as you want (just use like textbox2 instead, temp can stay the same)