I have function which show 70.000 option values in webpage, is there any option to do "autosuggestion"? Now there is the problem with performance, the browswere are crashed after 2 - 3 searches
while($row_ICAO = $airports_ICAO->fetch_assoc()) {
echo "<option value='{$row_ICAO['ICAO']}'></option>";
}
Maybe there is another option to do this and browsers won't crash?
#Dayek,
I will prefer this.
First don't fetch any data when form load.
when user click on select2 input provide search functionality,
when user start typing for search at that time you need to implement ajax call for fetch related data ( user type in select2 search input ) from database table.
Please refer this link
Related
I have a send message form, with a list of recipients populated by a PHP query to the database. I want to be able to include multiple recipients by dynamically adding select boxes to the form, depending on how many people they wish to send the message to.
I don't know javascript all that well and I have been researching the web to see how I can dynamically add a select box to a form with the options populated by PHP, but the only thing I seem to be able to find is how to populate the options depending on what was selected in the previous select box.
This is my Javascript:
<script type="text/javascript">
function add_recipient_field(){
var container=document.getElementById('addanother');
var to_field=document.createElement('select');
to_field.name='to[]';
to_field.type='file';
container.appendChild(to_field);
var br_field=document.createElement('br');
container.appendChild(br_field);
}
</script>
This is my PHP :
$tosql = "SELECT UserID, FirstName, LastName FROM users WHERE Active = 'yes' ORDER BY LastName ASC";
$query = mysqli_query($dbc, $tosql) or die("Error: ".mysqli_error($dbc));
$tobox .= "<option value=\"None\">None</option>\n";
while ($row = mysqli_fetch_array($query)) {
if ($row['UserID'] == $to) {
$tobox .= "<option value=\"$row[UserID]\" selected=\"selected\">$row[LastName], $row[FirstName]</option>";
} else {
$tobox .= "<option value=\"$row[UserID]\">$row[LastName], $row[FirstName]</option>";
}
}
This is my HTML:
<div id="addanother"><li><label for="to">To: </label><select name="to[]" id="to">$tobox</select>add more$toerror</li></div>
When I click on the "add more" link, it adds another select box, however there are no options in the box so it appears empty. I know I'm missing something fairly simple, but if someone could help or point me in the direction of a tutorial I would very much appreciate it.
All add_recipient_field does is add an empty select. I know that's your quandary, but my point is that according to the function you have listed above, adding an empty select is what it SHOULD do since that's what it is written to do. You still have to fill the data somehow.
Keep in mind that PHP ONLY runs on the server and does not interact with the currently loaded page in the browser. You can use Javascript to call PHP on the server and use the returned data to modify the page in place, but PHP itself cannot change the document after it has been loaded.
You have 3 primary options.
You can reload the page every time the user selects "add more" and have php rebuild the page with the new select. Keep in mind that for proper usability, you'll have to pass all your form data every time and refill it as you rebuild the form.
You can build the selects entirely from Javascript, which means the Javasript on the page will need to have all the required data at hand. PHP's json_encode method can be very helpful for doing this quickly. You load all your data into a javascript object at the top of the page and then every time you add a new select, you fill that new select from that data.
You can read up on what's generally referred to as "AJAX" where the javascript on the page interacts with PHP on the server in order to dynamically load your data upon request and change the already loaded page without a refresh. This is something of a mix of the two prior options and is probably the more advanced method, but the most rewarding to learn.
I'm building a CMS that have 2 database tables, subjects & pages ... I have two drop down lists..And i want to let the user to insert values in it ...
The first drop down list is to select which table to insert in. The second drop down list is to select the position of the inserted item in that selected table.
So I want the user to select the table first, then -using PHP- change the second drop down list to contain the available position in that table. Note that all the previous stuff is in the same web page without pressing any button or something.
So all I want, a method to make PHP check the selected option in the first drop down list, and change the options in the second according to the first drop down list, all that in the same page without pressing any button..
Is that possible in PHP ?
You can use PHP in the background, but as selecting an option happens on the client side you'll have to use a combination of JavaScript/Ajax.
Have a look at YUI Autocomplete or other Ajax autocomplete frameworks.
The short answer to your question is no. PHP is server side, i.e. it can't be changed by user interactions without refreshing the page as it has finished executing before the HTML reaches the browser.
To do this you will need to use javascript and ajax.
On php page in a form, One combo box has list of my Customer from mysql table customer. Another combo box has invoiceno stored in invoice table which has respective customer records. I want to select customer from first combo box and filter invoiceno from the second one according to the customer. Any one help me for php or java or Jquery or both codeings? Means if I select customer1 then in the second combo box should show all invoiceno respective to the custermer1. No Refresh or ReLoad or Post form Pl. If I get the first selection in a php variable format example $customer, it is enough for me. Thanks for any one help me.
Based on what is given, i think one is only restricted to pushing you in the right direction. In a case where you there a large number of customers, it most likely be that you are working with a database, thus the following process:
The Page of the selects is where you will need to make an AJAX request on change of the select element.
Using your JavaScript of your favorite JavaScript library you'll make the request passing a value that you'll query your database for.
Ofcourse you'll need to configure your PHP for GET or POST depending of you AJAX request, then query the database.
Format the databases output to be a valid HTML of your selected element.
Earlier you'll have configured your AJAX script to populate the proper element once the request has been successful.
You dont want to POST to the script. You dont want to invoke any server side activity. And you want to get the value user selects into a PHP variable. From what I understand, this means, you dont clearly get where PHP plays a role. The way you want it, you might want to use XAJAX : http://www.xajax-project.org But even this causes various REQUESTs to the PHP script internally.
I would suggest the below:
Do a natural join in the SQL query.
For a customer C1, there might be 100 Invoice numbers I1. The result of the query may be outputted in a JSON format. Something like this:
"RESULT" : [
"C1" : ["I1", "I2", I3"],
"C2" : ["I11", "I22", I33"]
]
ALL the data will be sent to the browser. This data can be stored as a Javascript Object. Use JSON.parse("<PHP response here>");
Whenever the users selection changes in a combo box, have a function in Javascript to load the corresponding values in the second list.
EDIT: In case, you are dealing with a larger database, and you expect a larger dataset, I would HIGHLY recommend XAJAX -- Simple and easy! :-)
If AJAX is not an option, you must load all the things (include customer & invoice), then you can use pure javascript/css to do that. It's a dirty work around, but it works.
First, let says that you have n customer, so you will have 1 combo box to select the customer; and n combo box for the invoices that associated with them. Those invoice combobox may have id = their ids in database.
Hide all the invoice combobox, with css : display: none
Use javascript: onchange to get the change event in the customer combobox, then show the approriate invoice combobox(display:block). This can be done easily by css property of Jquery, or simply manipulate by javascript replace function (to replace the html class of the combobox)
I'm sure that this way works, but the price is that you must load all data of customers & invoices, which maybe huge. So that if possible, you should try the AJAX approach like Thrustmaster & Babiker propose.
I have a small PHP page which contains two drop down lists
I need to populate the second one according to the result selected in the first drop down list .... is this possible? In other words I need to use the value selected from the first drop down list and use it in the dB query used to populate the second drop down list (but this should be populated upon selection of the first drop down list.
If this is possible any hints please? (you can assume that I am able to populate the first drop down list from the dB)
Option 1: embed the data for the second select in the document as hidden elements or JS objects. A change event handler on the first select will populate the second select. A List Apart has an example dynamic select page.
Option 2: use AJAX. When the first select changes, make a request to the server for the contents of the second select, then populate it. With a JS library (such as jQuery), this becomes quite easy.
$('select#one').change(
function (evt) {
$('select#two').load('/thing/'+this.value);
}
);
"/thing/<val>" identifies your server side script to generate a list of items based on "<val>" (use the rewrite facilities of your webserver to resolve the URL path to the actual script). You could simply have it always generate <option> elements, but a better design would be to include a way to specify the result format, so it could output the list as <li>, using JSON or some other format.
$('select#one').change(
function (evt) {
$('select#two').load('/thing/'+this.value, {fmt: 'option'});
}
);
You will have to use AJAX to send the selection of the first dropdown to the server. You can then query the database and generate the second dropdown and send it back to the user.
You'll need an asynchronous call back to the server, without a page reload. (I doubt that you actually want to have a button that posts back to the server) So AJAX is something that can do exactly that. Add an AJAX call to your first dropdown's onchange event handler that posts the selection back to the server and returns the contents of the second dropdown. When the AJAX call returns the new values, you will use it to build your content for the second dropdown. Most of this is done in Javascript, of course, besides the actual server part, which will remain in PHP.
There's two ways of doing it. The old-school "select an option and submit to rebuild the page" method, which works pretty much universally, and the newfangled AJAX methods, to load the second dropdown's contents without refreshing the page.
Both have advantages/disadvantages, so it boils down to what's best for your purposes. The oldschool method doesn't require any javascript at all, but since it does round-trip the form through the server, you'll get the "clear the window and then redraw the page" flickering.
The AJAX method bypasses the refresh flicker, but also would no work on Javascript-disabled browsers. It does require a little bit more code, client-side, to handle the AJAX calls and population of the dropdown, but the server-side code would be pretty much the same for both methods: same queries, same retrieval loops, just different output methods.
#outis has good point use .change in jquery otherwise use onchange event in select code.
like
<select id='my_select' onchange='javascript:myfunc()'>
<option value='a'>a</option>
.
.
<option value='z'>z</option>
function myfunc(){
//write code to populate another dropdown based on selected value
}
You can see this Dynamically Populating Dropdown Based On Other Dropdown Value
I am new to Jquery and taconite
I want to have a page that does the following
It has multiple panels
the first contains search criteria to submit a request to a mysql database
The second panel contains the results of the search
I would like to use radio buttons on the second panel to get more specific details from the data base and display them in a third panel.
I have got the second panel being populated as I want (using taconite etc)
The "front-end" php file creates the page with the required panels and the second panel is populated using teconite contentsReplace
I have a radio button function in the "front end" program but it doesn't work. I want it to query mysql and populate the third panel
Finally the second panel contains three tabs which are populated by the search.
All working as expected except the radio buttons.
any suggestions ???
PS Originally I used php/mysql to display all of the information from the records but the final page was unattractively large.
you don't need ajax-requests for do such things. the answer of haroldo is correct. taconite is useful for full-dynamic webpages.
if you create a search engine and you want get the results live without page-refresh, you can use taconite. if you want to change many parts of the page by one ajax-request, you can also use taconite. but when there are fix elements with static function: why a request? any request is traffic.
I'm not familiar with tactonite, but as far as the jquery goes there should be a an easy solution where the tabs id is the same as the radio's values:
$('.radios_class').click( function(){show_tab();})
function show_tab(){
var desired_tab = '#'+$(this).attr('value');
$('.tab_class').hide();
$(desired_tab).show();
}