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.
Related
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?
I'm projecting a calendar and, although a little bit familiar with PHP for the backend, I'm struggling with the front end which will be in Javascript.
I'm trying to keep things simple as I'm still in the learning process, so basically, the table is created using bootstrap/CSS and it shows the present weekdays from Monday to Sunday.
I'd like now to add some front end in order to draw the boxes when I click/drag the mouse over the cells. When done the script will save the start date/ end hour in a MySQL database.
The problem is, how can I draw those boxes?
Ways I was thinking how to do that:
Keep things simple: basically, I will not draw any boxes but simply color the background and the line of those cells selected on the even .onmousedown
Try the hard way: try something harder and better looking and explore better the world of libraries in JS. I was looking in JCanvas thing, but for my level, I still have to understand better how it works.
The problem then is how to pass the parameter of these boxes to a backend script that saves the start/end hour. Of course, I was thinking to give to every cell a specifical id with hour/date, so I think it'd be easy to recall them both for drawing the calendar event with the mouse and also to draw all the present events on the database when the table is loaded.
What can approach do you suggest me to take? Any input would be great!
Thank in advance
Luca!
PS: I'm not expecting full code or whatever, just doing some projects in order to learn more!
I think the first option will work great. Adding the background color and border on the selected cell will help in highlighting.
You'll also need some of the things listed below:
AJAX: To communicate with the back end script.
Events - Bubbling and Capturing: You don't really have to put the event on every cell but the whole table, you could capture the event target with event.target.
I'm new to React and I'm studying how to use for building an extensive logger. We thought of this framework because we'll have plenty content to show, and we need it to be responsive and dynamic. One of the requirements is inserting custom cell content, like unsorted lists, or a couple of images in a single cell.
I'm having some issues figuring out how that's done. Placing simple content, like text, is easy, of course, but when I try to insert a list all falls down to pieces. Right now, I'm doing some tests on FixedDataTable, as it seemed to be the one with the most customization. The problem is that setting row content is easy, I just need to supply an array of values, but I have no idea how to turn a single cell into something else. I tried creating the by hand or even giving it the plain HTML, the first option does not work (I get a div with an [Object object] instead) and the second just writes the tags on the cell.
Could someone please provide an example on how to do this? Right now, I'm not stuck to any framework, but we do want something based on React, and any help would be much appreciated.
Thanks very much!
Please check the section "Create Reusable Cells" at http://facebook.github.io/fixed-data-table/getting-started.html
It encourages to use Cell API now.
I am looking for a way to sort columns programmatically.
Please bare in mind, I do not mean to sort the grid as you normally would with sortGrid() or whatnot. I mean to arrange the row order from left to right programmatically, after the grid has been rendered.
So, I am aware that with:
$("#myGrid").jqGrid({sortable: true});
I am able to sort the columns by dragging and dropping them in order. The idea is to allow users to sort their column, and to have a callback save the order in the database, so each user can arrange their own columns however they want.
I am doing something similar with showing and hiding columns, but have been unable to reorder the columns programmatically without actually dragging and dropping them.
Any help would be highly appreciated.
You can use remapColumns method to reorder the column programmatically without usage drag & drop.
In the answer you will find the code which shows how to save user specific choice of the column order in localStorage. I personally prefer the way as the saving of the same information on the server side in the database. Nevertheless you can implement saving of the same information in the database instead of localStorage. To do this you need just change the implementation of saveObjectInLocalStorage and getObjectFromLocalStorage functions and include the ajax call instead of usage window.localStorage.
I want to create this kind of graph on the basis of user entered data.
the main issue is regarding the display of boxes on the point.
Let me explain you a bit,background does contain a gradient image which resembles to the color of urine the patient want to mention.
Please suggest me something to create this graph.Whole data is need to be fetched dynamically.
If none of the many graphing tools out there can help you, you can think about this with plain old HTML :-)
Either a table or absolutely positioned DIVs. If you use a table, you can identify the cell and add a class to give that cell's border a red colour. You can do the same with DIVs. When you print the table cells or DIV to the page, you can identify them with 8-2-27 (unit-month-date) and your JSON data can match the corresponding cell/div and add a class.
Of course this is a bit more work than using an out of the box plugin. But it is possible. I have done a similar thing in the past. I found it easier to do everything on the server side and print the HTML (this was before jQuery had a plugin for everything).
gRaphael, JSChart, PlotKit, HighCharts are some common libraries used today to create chart in the client side. You need to provide JSON data and HTML Element only. Remaining task are not needed to be done by you. You can use JFreeChart to create a chart (image) on the server side and send it to the client side.