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
}
}
Related
I have a dropdown menu that has school subjects listed. I also have a countdown timer for each subjects test date (many subjects share a date). I want to make it so that when the user selects the subject, the right countdown timer appears without the page refreshing.
Right now I have this working using PHP: I have 9 different countdown timer made in JavaScript (I used this tutorial from w3schools) and 9 separate PHP files like this:
$newSubject = $_GET["chooseSubject"];
if ($newSubject == "Math" OR $newSubject == "Chemistry") {
echo '<p id="subjectSet1"></p>';
echo '<p class="dates">October 16. 2019 klo 9:00</p>';
}
I have a button that redirects to a page that then shows the correct countdown timer.
However, I'm looking to achieve something like this:
https://yle.fi/aihe/artikkeli/2019/05/15/ylioppilaskokeiden-pisterajat-kevat-2019
Under the "Ylioppilaskokeiden pisterajat, kevät 2019" there is a select menu, and when you choose a subject it automatically shows the correct table.
This is where project design comes into play. If you expect your dropdown set to be small, you can simply render all of the content on page-load and then use JS/CSS to show/hide each block of content on change of the dropdown.
Alternatively, if you are expecting a larger dataset this could potentially affect your page load times and also make it longer for the browser to render the data (even when it is in a hidden element). In this situation I would look into using AJAX and load in content when you click on a section instead. This is slightly more complex but is;
A good learning exercise
More efficient in the long-term
EDIT:
If you're wanting to go down the show/hide route. This is simple enough using jQuery. There are a few options you could take however I would suggest toggle as a start - see docs here
For AJAX, this will take a bit more reading into. I would also suggest using jQuery's ajax function - see docs here
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.
I'm having trouble and I wanna ask, if it's possible to have column-based tables when PHPMaker generates tables for records? Because when I generate it only generates row-based records. Copy-paste the link below to URL to understand. I'm sorry I'm not knowledgeable in PHP that much. It's just very easy to make a complete application with this program and the only thing stopping me is the format of how it's shown. An example of how I wanted it to look like would be this one
I hope somebody answers! Thanking you all in advance!
That kind of column based view is not suggested as it has many flaws when we try to display huge number of records. Adding pagination or sorting feature is very difficult and not user friendly.
As you have so many fields you could try to group them into tabs by relevancy. Once you put them under different tabs they can be easily navigated and easily fit into row based structure.
Creating tabs is PHPMaker is very easy, on field configurations screen you will get Page No config next to each field. By default it set to 1 you can set required page number as per your choice. Once you done go to Table config of the table which is second tab available for each table. Scroll down to bottom and and click on 3 dots next to Page Labels config (Under Multi Page Config). This will pop up a screen where you can add captions for your tab.
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 form where users are entering 35 different fields.
I have a Content Management System where I want to display the results of an order on the form.
I've thought about adding a horizontal scrollbar inside the table, or limiting the table to the 10 most important columns and then making it so the administrator has to click on an entry to view all of the information on its own details page.
Do you know any creative ways that I can display the 35 fields on one page?
A standard Master/Detail Form should work. The table/grid would have key pieces of data and below it, the detail form would have all the details in a user friendly layout. To see the detail a user simply needs to select or click a row in the table/grid and the information rendered in the detail area is updated by the On_Click/On_Hover/etc event.
I don't know if this will fit your needs, but the jQuery ScrollTo plugin might be an interesting alternative to just a plain horizontal scrollbar.
Edit: There is another addon you might want to look at called columnManager.
I have had instances dealing with grids that are wide. In my own opinion, I think it is best to use the browser's (horizontal) scroll bar instead of having an "inner" (horizontal) scrollbar. A problem with http://demos.flesler.com/jquery/scrollTo/
Also, no clicks are involved or whatsoever. The user will be able to see everything by just scrolling. On the other hand, allowing the user to hide/show columns would also be good.