I am new to programming. I have been learning php and mysqli and I know that this question requires more knowledge than that. I am working on a grid 3 rows by 3 columns. Only up to one square within a raw can be selected.
I want the user to be able to click on a square (called A, B, C within a row) and the square would change a color. As the user clicks, I'd like the row and square info be transmitted to a table in mysqli, ideally. If not, I'd use a submit button.
How would such "complete" code looks like?
I will try to explain this without javascript now to keep things easy.
If you already draw the boxes based on your SQL table, you're good to go for this:
Wrap the boxes into <a> elements. These links should contain info about their position or id, as well as their state.
For example <a href='/changeState.php?boxId=1&state=green'></a>
Then of course you would need the corresponding script changeState.php which accepts $_GET['boxId] and $_GET['state'], and then does an SQL operation based on this info.
Alternatively you could even use the same URL (that you use to display the grid) and have it handle the MySQL operations if the expected GET parameters are present.
Does this help you?
Related
I was hoping to somehow implement a 10x10 table onto my webpage where you select a cell and then store the X and Y value of the cell clicked but I'm really not sure on how to store the values, or to make the cell interactive.
My end goal is pretty much something like this: http://materdeimath.pbworks.com/f/GraphPaper20x20AxesUnits.bmp
Where I can store the X/Y values of the clicked cell, is this possible?
If any of you guys have any idea how I would accomplish this I would really appreciate the help, Thanks!
For me I would start with this way but there are other ways to get you started. Here are my steps:
Bootstrap responsive grid system here. Make each grid an individual id and class e.g. id="x1y1","x2y1","x3y1",class="col-interactive" something like chess grid if you familiar with that. The reason for a separate class is to identify from the common class used by plugins.
Using jQuery to get the class/name/id of the grid clicked. You may find reference here.
Finally using ajax to call your server side (e.g. PHP) and database (e.g. MySQL) validation. Reference here.
I have a table with many entries (4000 - 5000) with 5 columns. These are paginated and only about 20 rows are shown at a time although all data exists at the client side.
I want the user to filter different column by categories (and if possible using some wildcards), this user input will be taken using something like Form input. Note that i can perform all the operations using Javascript code, however i am unable to understand what kind of UI elements do i need to use for this purpose (I am not from a web dev. background but learning the tricks). I tried using libraries such as selectize, researched some Jquery UI plugins. In fact i also found a spreadsheet specific library (slickgrid.js) but it is slightly beyond my skill to implement.
So in essence is there a simple way to get user input to select categories in a column(s) with all data in client array ? I would love to reach a stage where i may be able to group column categories and use them to give autocomplete/ dropdown menus etc. However i am just trying to figure out a reliable way to translate user input to string to be used in code.
I have an example working here - http://jsfiddle.net/BM3kX/5
It has a piece of JSON consumed by a YUI DataTable. I have a few queries regarding the same.
The JSON has a 'imageURI' attribute from which I need to render an image [16x16] along with the 'showName' attribute in the same cell. Also, the table can have multiple rows so as the images that should be rendered on each row efficiently.
When I click on a row, the table should alert me of the selected record. But there is a twist here - I need the data exactly as the JSON which is used to render it. (I should get even the 'type' attribute even if I'm not using it anywhere in my table.)
How can I meet the above requirements? Any solutions or possibilities?
1) There is not much you can do there. I assume the images are different for each of the records so there is not a lot to optimize except sending the images in the proper size instead of having the client resize them. If the images were some sort of icons representing status, I would recommend you sent the status coded somehow and let the browser decide on how to represent it, but if they are pictures of the people, you'll just have to let the browser deal with them the best it can.
2) It is easy to reconstitute the original data out of the model for the clicked row. You don't need to keep a copy of the JSON for that row, you can turn it into JSON whenever you want (after all, model has a toJSON method to make that easy). The model for each record in a table can hold more information than that shown in the table. The column property tells the datatable what to show, the datasource what it stores. Use getRecord to reach the underlying model and JSON-encode that. If the type was there originally, it will still be there even if you don't show it.
This could be an fun question. I'm planning to make a select box that looks like normal html at first, but when you open it there will be two exciting things:
The box will contain 2 different text-aligns making two neat rows.(see picture)
At the end of each line of the list item contained in the box, there will be a like/dislike button system.(see picture)
Some of you already know where this is going, I'll need to make the thing like you'd make any such menu in GUI programming. I assume some object oriented Javascript programming?
(I'm looking for technical details as I'm novice at Javascript and jQuery(but not at programming), I'm basically interested in info about transferring such a pseudocode construct into Javascript/jQuery or another more usable framework if really need be. I'm also perfectly aware that I'm normally not going to be using any actual html in this GUI.)
So my question is, how should I set out to do this according to you?
You will not be able to modify a normal select element to achieve this, you will have to
Create a proxy-pro-select-element and hide the original one.
Copy option elements and create equivalent one in your proxy
You will have to also keep both selects in sync.
Once you have that you can do anything in your proxy-pro-select-element, simplest would be to on click show a table with select able rows, with table it would be very easy to align all columns.
Technical details:
Read how to implement a jQuery plugin
In your plugin's init loop through options in target select and create corresponding rows in a div say dropdown, hide original select and replace it with your control which will be a select-div
onclick on select-div, show dropdown div after re-positioning correctly
See code like this and modify
You should be able to accomplish something similar to this with jQuery and jQuery UI comboboxing, http://jqueryui.com/demos/autocomplete/#combobox
And then modify _renderItem to change the layout of results in the dropdown. You can search for the following in the view source:
input.data( "autocomplete" )._renderItem
However, I would try to avoid having like/dislike buttons in a combo box because it goes against normal web conventions.
First off I'm open for suggestions of alternative ways of doing things.
To get going here is an image of what I want to achieve(kind of, sorry for the BAD paint job)
OK.. I have a request that gets fired off and sends back a ton of json containing information about Pupils Names, Sex, Age, Location.
I want to build a sort of table in the form of list elements, each tuple containing one unique student that the request returns.
I want to style it in a specific way, so it would appear as a row but each piece of data appears cellular, as in its a specific width with a border etc. As in each peice of data is a unique html element with a specific css style, but it appears to the user as a single row. (As in the 2nd and 3rd image in the drawing.)
Hovering over the data elements in a tuple(row) changes the hover state of all the cells in that row.
The end cell contains a plus..clicking this will update data in another div on the page. Whereas clicking the other cells in a row will take the person to another page related to that particular pupil.
Without using anything other than Javascript(librarys are okay i.e jQuery) and CSS how is the best way to go about this?
Is my thinking of how to do it okay or is there a better way?
Its also worth noting if my requests brings back 25 results, I only want to show 10 at a time but the person must be able to somehow view the remaining 15. How would I go about this also?
Thanks in advance.
I don't have the tools to test this at the moment, but it might work to set a hover property on the row-container, for example:
div.row:hover div.cell {
background: #006;
}
Or something like that.
For the part of your question about showing 10/25 elements...you could hide it with JavaScript and have a button to show them I guess, I'm not sure about why you are doing this. It might be better to implement something server-side if you want to paginate results.