Is it compulsory that all dynamic dropdown menus must be called from the database? I want to include one for my latest project, although I dont know how to do it, but after searching from Google, I found that almost everyone was talking about MySQL. I was thinking <select name=""> would be enough.
Well, there are obviously alternatives to this, you can use PHP to read a file (XML is popular for configuration files) and then use the data to generate the menu or just generate the dropdown menu based on an array and so on. What you should do obviously depends on what you are working on. Basically the point is that you have data stored somewhere (an array, file, database...) and then you retrieve it and build the menu.
EDIT: To specify, I'm not saying you should use XML file etc. for dynamic content.
A database is definitely useful, but not strictly required.
I have a jQuery javascript I often use for dynamic drop-downs. It updates the drop-downs from a javascript variable (json object). Most often I generate this from a database, but it could be hard coded if the site doesn't use a database.
Edit (adding explaination)
I've updated the sample code to be somewhat more related to your application (only knowing it relates to classes and sessions. The example has dynamic dropdowns as follows:
Select course
Select the semester
Depending on the course some course may have multiple options or only run in one particular semester. Also a 'full year project' for which semester is not applicable.
Select daytime/evening classes
This may only be applicable to some courses
(A few levels of dynamic, just to cover the script capabilities)
Now the implementation. We include a script at the top of the page (+ jQuery, which the script depends on). Then we have the HTML, we only need empty select fields with names and ids. The dynamic options are handled by the javascript.
The onload is the only javascript that needs to be modified for the application. We have an array of 'option' objects with their id, parent_id, and display.
And the jquery onload function adds the options into the dropdown and if course changes then semester dropdown should update, and if semester dropdown then time dropdown is updated.
The scripts has one additional property in that it hides the field and it's label if there are no related options for a given selection.
A complete html page combining these parts can be viewed here: http://snipt.org/Uul0 (Just sav to an html file to demo it)
So this shows how you can easily create dynimic dropdowns without a database and even without server side code (PHP). This is purely JQuery and HTML). Now, that said, I'm not saying you are better off without a database, just that it's not strictly needed for dynamic dropdowns.
Sorry this is already a long essay. That's all I have to offer here.
The included script
function loadOptions(jquery_identifier, options, parent_id)
{
var $select = jQuery(jquery_identifier),
i, option;
$select.children().remove();
if (typeof(options)=='object'&&(options instanceof Array))
{
var toAppend = [];
var toAppendIndex = 0;
for (i = 0; i < options.length; i++)
{
option = options[i];
if (option.parent_id == parent_id)
{
// repeatedly appending to select was too slow, instead
// appending to array and appending to select once at the end using toAppend.join
toAppend[toAppendIndex++] = "<option value='";
toAppend[toAppendIndex++] = option.id;
toAppend[toAppendIndex++] = "'>";
toAppend[toAppendIndex++] = option.display;
toAppend[toAppendIndex++] = "</option>";
}
}
if (toAppendIndex > 0)
{
$select.append("<option value='' selected='selected'>- Select -</option>").append(toAppend.join(''));
$select.parent('.field').show();
}
else
{
$select.parent('.field').hide();
}
}
$select.change();
}
Sample usage
The HTML
<div class='field'>
<label for='course'>Course</label>
<select name='course' id='course'></select>
</div>
<div class='field'>
<label for='semester'>Semester</label>
<select name='semester' id='semester'></select>
</div>
<div class='field'>
<label for='time'>Time</label>
<select name='time' id='time'></select>
</div>
The onload
var dynamic_options = [
{"id":"1","parent_id":"0","display":"Database fundamentals"},
{"id":"2","parent_id":"1","display":"Semester 1"},
{"id":"3","parent_id":"1","display":"Semester 2"},
{"id":"4","parent_id":"3","display":"Daytime classes"},
{"id":"5","parent_id":"3","display":"Evening classes"},
{"id":"6","parent_id":"0","display":"Games technology"},
{"id":"7","parent_id":"6","display":"Semester 1"},
{"id":"8","parent_id":"6","display":"Semester 2"},
{"id":"9","parent_id":"0","display":"Industry project (full year)"}
];
jQuery(function(){
// initialise course dropdown with the choices with no parent (parent_id = 0)
loadOptions('#course', dynamic_options, 0);
// if course changes update semester dropdown with the appropriate child options
jQuery('#course').change(function() {
loadOptions('#semester', dynamic_options, jQuery(this).val());
}).change();
// if level 2 changes update level 3 with the appropriate child options
jQuery('#semester').change(function() {
loadOptions('#time', dynamic_options, jQuery(this).val());
}).change();
});
Something interesting to take a look is Google Fusion Tables.
Anyway, at some point you'll have to rely on a DB.
MySQL is a good choice for many PHP applications, because they work well together. Also, extremely many hosting providers host MySQL. Add to that you own Google experience and you can see why many people use it. Plus, MySQL is a very good database system, which is free to boot.
However, you can build your drop down menus any way you want. However, sooner or later you'll want to have some way of storing all your site's data, and then turn those into drop down items somehow, and using a database system is a good way to go. The reason is that a database handles annoying file opening and searching code for you, so you can focus on your data itself.
EDIT: a good database system will make your data juggling life very easy. It's easy to get all the people in the class with an average grade between a B and a C with a single statement. Or one statement to find out whether girls really are smarter than boys, based on their grade. Or to get a list of the number of students by age, by grade, or both. In pure PHP this takes a relatively large amount of code, compared to the single query that MySQL needs.
Related
I'm looking to create a poll/form that will allow the user to select a starting 11 for a football game (or soccer if you're American), and then submit it and then see an image of the most popular team selection among the fans (maybe most popular for each position instead of most popular team selection all together).
Ideally I would like the form to have options for formation (4-4-2, 4-3-3, 4-5-1 etc) that would change the layout/inputs on the form (but this is definitely not essential, would just be a nice touch - I would just stick with 4-4-2 otherwise).
My dream idea is that there will be a dashboard on the bottom that had player profile pictures that can be dragged and dropped into their positions; However having simple drop down boxes would work too (as long as a player cant be used twice - which is another stumbling block because you don't want the same player to be in both CB positions.)
Design Concept (Results page would basically be the same just without the bottom dashboard):
I have absolutely no idea how to approach this as it is way more complex than anything I have attempted in the past. (Forgot to mention I would like to be able to reset the results every week or so if possible)
So if someone could let me know if its do-able, and if it is, take me through how to do it step by step or even mock one up for me it would be much appreciated.
Thanks.
It doesn't have to be a form.
Here how you do it:
Create the divs for the squares on the field.
Assign each of them a unique id e.g.
id="square-1"
and give them a common class e.g class="field-square"
Create the divs for the squares outside the field. Give them a common class, and a unique id for each.
When you drop the squares, have a function that extracts the ids when they are dropped.
Then simply post them to your PHP site with jQuery.post()
Update
To extract the ids, in your callback (after you have dropped the square) do something like this:
square_id = square_id.replace('square-', '');
Since you've not assigned number ids (which you should, so that you can easily change the players in future by getting them from a database), you can simply get the ids using $(this).attr('id') in your callback.
Also look up http://api.jquery.com/jQuery.post/
I wouldn't even think about dragging and dropping at this point. Outline what the minimal viable product would be and come up with a set of steps to do that.
Going off the data you provided I would suggest something like this...
1) Build an html form that list simply a list of all the positions and a dropdown of all the possible players that can fill that position.
2) Fill out the form (select the players) and on form submit get the data echo'd as an array.
3) Create the graphic...I see two approaches....(1) server side (GD or Imagick are probably what you are going to want to use) or (2) CSS/html images
Either one will a fine approach....this step should probably be broken into little steps...start with simply displaying a list and an image of the player next to it...
HTML would be
echo "<img src='/images/players".$_POST["position1"]."' alt=''/>";
//(NOTE YOU HAVE TO CLEAN ANY DATA YOU ARE OUTPUTTING PROPERLY)
Imagick would be something like..
$bg = new Imagick("/images/bg.jpg");
$position = new Imagick("/images/players".$_POST["position1"]);
//Second image is put on top of the first
$bg->compositeImage($position, $position->getImageCompose(), 5, 5);
//new image is saved as final.jpg
$bg->writeImage('final.jpg');
I am building a web application in php (actually cakephp), HTML5, & Jquery.
In one page I have a form which will make too many calculations. In it there is a form with maybe 30 input fields. These fields are related to each other with formulas.
Whenever a field value changes, I want to update all others. How to achieve this?
Note: if there is some SDK which will help me in this, it will be better.
Update 1
I will make a short example: it is about designing some industrial product, let us call it a cabinet.
A cabinet consists of too many items, and these depend mainly on: Width/Height/Depth + some additional characteristics (around 5). I need to calculate the specs of the components which constitute a cabinet. There are maybe 15 components. each component has a specific formula, and may depend on all mentioned inputs. If I change the width, many of the components specs should automatically update.
The general idea is, you need to use a generic selector:
$(".my_inputs")
Add an 'on()' EventHandler:
$(".my_inputs").on('change', function() { }
Then, within it, do whatever type of data manipulation you want:
$(".my_inputs").on('change', function() {
// use jquery to repeat through all .my_inputs and alter their data
// or set all .my_inputs to a specific value
// or do anything else you want
}
Now that you have the general idea, look through the jQuery API to find details on however you'd like to manipulate the data (or just use good ole' Javascript! :)
It is still a JS solution. Give each of the input boxes a class name (e.g. "myClass"), then you can do this:
$('#myInputfield').keyup(function(){
$('.myClass').each(function(index){
$(this).val($('#myInputfield').val());
});
});
NOTE: You need JQuery to achieve this and it is assuming you are looking for changes in just one textbox (i.e. textbox with ID:myInputfield). The main textbox should not have the same class.
Hey guys, there is a form where the user select some of his friends and I'm curious on how I can implement a list that searches simultaneously while the user is typing a friend's name and when he selects the name the name is written in the text box(jQuery). And if the user wants to select more than one friend, when I'm inserting the names in the database, how can I separate the names that are written in one input field?
You should take a look at the jquery auto-complete plugin:
http://docs.jquery.com/Plugins/autocomplete
Also, you could separate the names using commas.
Are you looking to write your own plugin or would you like to use an existing one?
If you want something ready made, here are a few examples
if you want something extremely light, only 6kb packed, this one would be the best choice
Autosuggest jQuery Plugin
Older one but still good
Tokenizing Autocomplete
This what already asked here on this site.
Facebook style JQuery autocomplete plugin
The accepted answer cited this jQuery code.
https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin
http://jqueryui.com/demos/autocomplete/
Although think twice about including the whole jquery ui library for this one plugin
I've implemented this a couple of times, it is not that difficult to achieve decent results and the basic idea that I used was...
1) create an input box.
2) create a div positioned directly underneath the input box.
3) create a jquery keypress handler. if there are more than x characters typed, ajax request.
4) loop through the results, and if they exist, append result divs to the result box.
5) show the result box.
I can dig up some example code if you would like. Not sure what you are talking about with the select multiple, but you could keep a variable of selected, and change the color of the result div when it is clicked on, this way many results can be selected and then processed later.
i need in an php file three drop down boxes or multiple select boxes.
the entries from these boxes are in a mysql database.
the single problem is that the entries in the thrid box depend on the second, and the entries in the second depend on the first.
can someone help? know any examples?
There are basically 3 ways to achieve this:
Use JavaScript to submit() the form to the server side during onchange of the dropdown and let PHP load the options and render the child dropdown accordingly based on the selected dropdown value. Technically the simplest way, but also the least user friendly way. You probably also want to revive all other input values of the form.
Let PHP populate all possible child dropdown values in a JavaScript array and use a JavaScript function to fill and display the child dropdown. A little bit trickier, certainly if you don't know JavaScript yet, but this is more user friendly. Only caveat is that this is bandwidth and memory inefficient when you have relatively a lot of dropdown items. Imagine three dropdowns which can each hold 100 items, that would mean a JS array of 100 * 100 * 100 = 1 million items. The page might then grow over 1MB in size.
Let JavaScript fire an asynchronous (ajaxical) HTTP request to the server side and fill and display the child dropdown accordingly. Combines the best of options 1 and 2. Efficient and user friendly. jQuery is extremely helpful in this since it removes the concerns about crossbrowser compatibility with regard to firing ajaxical requests and traversing the HTML DOM tree. You would otherwise end up with double, triple or even much more of code needed to achieve this.
If you let know in a comment or an update of your question which way you would prefer and where exactly you're stucking while implementing the solution, then I'll maybe update the answer to include a basic kickoff example.
I'm from Portugal, so, what we do it's based on Portuguese language, never the less, we've made many working websites and platform's with what you want, please check this link...
if this is what you want, I can send you the code:
http://www.medipedia.pt/home/home.php?module=farmacia
I am using a combination of PHP, jQuery and Spry to serve a series of listboxes in which a user will select first the type of vehicle, then the make, then the model and finally the specific model.
All my listboxes (SELECT) are working fine, and they update properly using the Spry elements. Each listbox is populated from a different Spry XML Dataset, and this is my problem.
If I present all four listboxes to the user, the script has to go and fetch all four lots of XML to populate all four listboxes, taking several seconds. What I want to do is to create/enable the listboxes in order, so at the user selects from the first listbox, the second is created/enabled, when they select from the second, the third is created/enabled... and so on.
Setting the disabled attribute is no good because the script has already fetched the XML before this is processed.
Any ideas??
Si
UPDATE -- Sorry guys, don't think I made my problem quite clear.
At the top of my script I declare four Spry XML data set variables, each of which goes off (when required) and performs a complex SOAP query against a service, this service then returns a chunk of XML. Each query is dependant on the last, so once the user has selected the type of vehicle, the second data set is refreshed to give an accurate list of manufacturers. When they select the manufacturer, the third list is refreshed to give an accurate list of models for that manufacturer. When they select the model, the list of model derivatives is refreshed for that model (fourth list).
Further down my script I have four SELECT's, each of which is populated with the data from the spry queries. Now, the user must choose the desired option from each list in turn in order to get the right model in the final box. What I want to do is ONLY populate the first box when the page is generated, then populate (or create??) the second, third and fourth boxes when the user selects the desired value in each, much like happens in the Autotrader website (www.autotrader.co.uk).
As I said in the initial posting, I can't use the 'disabled' attr, or even the jQuery show() and hide() functions, as these do not fire until AFTER all four datasets have been fetched and populated into the SELECT's. I need something which ideally creates the elements from scratch as and when required, to stop the four lots of XML being fetched at the beginning...
Hope this clarifies
$('option').click( function() {
if($(this).val() != 'Select one...'){
$(this).next('select').attr('enabled', 'enabled');
$(this).next('select ~ select').attr('disabled', 'disabled');
/* or */
$(this).after('<!-- Generated select/option HTML -->').nextAll('select').remove();
}
}
This is wholly untested, but according to the API, may work. I'm not sure I understand your question completely, but if you're looking to enable the next option after selection and disable the options after that until the next option is clicked, this is would be your ticket if it works.
If it's a matter of adding (or removing) them dynamically, you can just use the .after and .nextAll methods to add and pinpoint select boxes for removal.
UPDATE: Whoopsie. Had the wrong selectors.
Instead of disabling them, why not just hide/show using jQuery? .hide() .show(),
I'm not sure I know what you're asking but it seems like you're looking for something like:
$("#select1").bind("change",function() {
var sel=$(this).attr("value");
$.ajax({
url:sel + ".xml",
dataType:"xml",
success:function(xml) {
$(xml).children("option").each(function() {
$("<option />",attr:{ value:$(this).attr("value") }).text($(this).text()).appendTo("#select2");
});
}
});
});
Am I way off base here? I mean, that's just a rudimentary way of going about it (and probably has a billion holes), but you want this updating live, right? You don't want it fetching all the XML on page load, right? You could also change $("#select1") to $("#formname select").each(function() { and then have it pick the .next("select") to append it to after fetching the XML.
I'll confess, I've never really used Spry. I've seen it in use a little and it seemed like I could do what I needed to using jQuery.