I have a small project where i did a table excel-like. Each table cell contains a disabled input, and when you click any cell that input becomes enabled so you can type, changes the color of that cell+the entire row, and you can switch to next row using TAB, or next line using ENTER, or UP and DOWN for the cell above or below it. When the row is changed it will call an ajax function to update the data to the database.
That was the project description so far. My problem is:
I need to have auto-complete on some columns of the table. I tried so far Bootstrap typeahead, JqueryUI autocomplete and a couple of others more. None of them seem to work for my case. The main reason is that they overwrite my events.
I tried to add the autocomplete function on one specific cell only, to test how it works. And that cell won't become enable when i click it because my javascript is disabled by that autocomplete.
I tried to enable it from code to see how it works, and indeed the autocomplete seem to show up, but then my UP and DOWN arrowkeys are messed up.
Any idea on how to get an autocomplete to work on this case?
Thank you, any idea is much appreciated, I've been brainstorming on this for 2 days.
here is a very simple script that can do the Job... http://dev.twiip.ch/scripts/autocomplete/
they link provide an easy example to select some data from a mysql database using php and ajax.
it is in french, you can use google translate to understand.
Related
I'm using WP_Table_Lists in my custom plugin.
The tables are running fine, as are the bulk actions, the sortable columns and so on.
Looked up all around the internet but everywhere I find there's only pages showing how to create a custom field in posts screen, which is NOT what I need.
The function quick_edit_custom_box was a beacon of hope, but couldn't find anything to work on it.
I'm gonna use the quick edit box to make a field for tags (with autocomplete) to quickly edit one by one instead of having to wait to load and then come back.
I want to use some template for all the quick edit fieldsets instead of hard coding it all the way with AJAX / Javascript.
Is that possible?
I want to display my data coming from sql db to front end. I want it to be displayed in some special manner.
Lets assume I have 8 element in total. I want to display only 3 data field at first in a row, and below that a message saying 'show remaining 5'.
Once someone click that another three should load and below a message would show 'show remaining 1'.
I am not asking for a ..read more type option. I want to display remaining data into segments, but not all at once. If anyone can guide me, what can I use or if there is any useful plugin, I am already grateful.
Thanks in advance for anyone who put some effort.
This sounds like something that would be done by JavaScript. This means building the whole table right away, but hiding all but the top 3 rows. Then hook a function to the "Show three more" button, that displays three more rows (until all is shown).
jQuery is a JavaScript library that is easy to get into and would help you get this kind of functionality going, but it is of course entirely possible to do without it.
If you are entirely new to web development with php, sql, html, and javascript I suggest looking at basic tutorials on how to accomplish the basics first, such as fetching data from a db, displaying that in html and how to modify the DOM with javascript.
You need to provide more information, but im gonna answer according to what i understood.
First you need to put the data in a table using <table><tbody><tr></tr></tbody></table>.
Then you can hide the other 5 data fields using css, you can use visibility: hidden or display:none.
Then you can display a message using bootstrap alert class thats says 5 other fields remaining.
So simply put I'm trying to make a simple search engine where I've got a MySQL database and its contents being displayed on a HTML table (using PHP to get the information) and I want to make a search bar that as you type, filters the list automatically.
I've found tutorials on how to make that with plain text where it displays in just a list, but nothing on how to filter an already displayed table.
If someone could point in me in the direction of some helpful links or maybe some code I could use to start me off that would be great, sorry if this has been answered before, I've been looking for 20 odd minutes and just can't find anything that works.
TLDR: Making a search bar that as you type, filters an HTML table filled a with MySQL database table's information brought onto the page via PHP code, cant find any tutorials or helpful links/code after 20-ish min of searching and came here.
This is done with AJAX. You have to use javascript if you want to display it live when the user is typing. Since you want a shoot in the right direction, here is the place to go :
http://www.w3schools.com/php/php_ajax_php.asp
You will need to use SQL to populate the array in your case.
Concept is when you type some javascript trigger a event with the data you typed, like this.
$( "input[type='text']" ).change(function() {
var typedValue = $( this ).val();
//AJAX CALL HERE
});
Ajax calls a PHP page with the data posted, and use that data in your select Query.
Standard example of select query
Screenshot mockup: http://tinypic.com/r/y2qex/5
Problem: I have a table that has 53 columns; one for each week of the year, plus one with the user name. It will have anywhere between 10 and 80 rows, depending on the number of users for each area.
The users need to be set a “flag” for each week, such as Annual Leave, Training etc.
I currently have a table, which has a select box in each cell. The problem is this works for 5 rows, but once I start getting 20+ rows, the browser wont open the page, because there are just too many select boxes.
Whatever new selections are picked must be able to be queried, so I can save them in my DB.
What I’m after are some generic ideas (i.e. not specific code) on how I can better solve this problem. Once I get a good idea, I’ll go off an work out the exact coding.
My ideas so far:
- Make all cells text only, with the current selection, then have an ‘edit’ option beside each user, which opens their row as a modal window which can be editted
- Make all cells have a “onClick” event, causing a dropdown list to be generated at the point of click
But I’d be keen to hear how other people might approach/solve this problem?
If the options are the same for many select boxes, you could consider using one datalist for all of them, this would be more performant, and I'm guessing allow you to have more per page. Unfortunately this is an HTML 5 feature, so it would not be backwards compatible with all browsers.
http://www.w3schools.com/html5/tag_datalist.asp
Other than that, you could consider pagenating your table if it gets over a certain number of columns. Or do like a tumbr thing, where more columns load via ajax if they scroll to the right far enough. You idea also should work.
You might want to look at using a calendar feature, I'm sure there's a ton of Javascript calendars out there. I also have had a lot of success lately using DataTables. You could use DataTables + jEditable to create a click to edit table representation, that when clicked gives you a select box, but otherwise shows only text.
Perhaps you could have a single hidden select box on the page and display it on a cell when clicked, and handle the result of the click by writing a data-attribute to the cell, and perhaps doing a simultaneous XHR?
You could also just have a bunch of hidden form elements, but that would be gross.
Implementation-wise, you could do it with a single event handler attached to the table, with each cell having data-attributes representing name and week.
Anyway, this should be performant, even though it would require an extra 20 or so lines of js.
Maybe something like this could work for you:
var td=document.getElementsByTagName('td');
for(var i=0; i<td.length; i++)
{
td[i].id='cellID_'+i;
td[i].onclick=function()
{
//make menu appear on this element id
}
}
I wonder is someone can help, I'm building a website, which is driven from a database. It will consist of user submitted information.
Currently all the information is pulled from a record in the database and is being output via a PHP echo, what i would like too do is add a feature that would allow me to edit the information if incorrect from the websites front end.
I have seen many websites have some form of edit icon next to information in there databases, when clicking this icon the echoed text changes from text to a text field and you are able to update the field being echoed from the database.
Im a designer so have limited knowledge of how functionality for this kinda feature might work.
please could anyone let me know how something like this might be achieved.
many thanks.
You would need to build some kind of javascript functionality to allow the in-place editing of those data bits. One possible solution is a jQuery plugin like jEditable.
Then you need to build a server-side script in something like PHP or ruby where it would take the submitted information and update the database.
well the process is the same for the front-end and back-end. it depends whether you want you build a password protected editable forms or just editable for everyone.
One way you can do this is
echo your information into text inputs
give them a css class that removes the border and makes it transparent
make it readonly(so someone couldnt tab into it and change it)
add a javascript onclick event that changes the class to a normal
text box that is not readonly
add a javascript onchange event that uses ajax to save the new
information into the database when they are done typing, or press enter
after the ajax is done turn the text box back to the first css class
EDIT also add a onblur event that changes it back as well
you could even change the cursor for the text input to a pointer instead of the default (text) cursor so that is looks like you can click on it.
.
now html5 has contenteditable attribute which you can set for elements
simple example:
www.hongkiat.com/blog/html5-editable-content/
simpler demo:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable