Storing post display order in database - javascript

I am developing a web application which will have images displayed in a slider. It is important that I am able to modify the order that they are displayed in.
Currently, I have a column in the table of images called 'order', which must be set to ensure the ordering works correctly, but changing it requires changing every other, too, which becomes tricky when dealing with hundreds of records.
This table, as well as queries for modifying it, are in development, so it's completely fine to change the way I do this.
My questions are:
When I'm inserting a new row, how can I make sure it appears at the end of the list? Auto-Increment in SQL tends to leave gaps if you delete entries from the table. How do I make sure that the row is assigned an order 1 greater than the highest order in the table?
How do I reorder the table? Imagine that I use a drag and drop interface (or similar) to reorder one image, bringing it to the top, or a different part of the list. If I do that, I need to reset the numbering of every item, which is, again, inefficient when dealing with hundreds of rows.
How do I prevent two rows from having the same order at any given time? The UNIQUE flag on the column? Presumably if I set that flag, changing the order from, say, 8 in one row opens up another to use that number. Right?
Thank you for your time, and I hope this isn't too vague a question to be easily answered!

Query the table you are about to insert into to find the MAX id in the table. Then on your insert just do this +1.
When re-ordering, say you want to set image order 6 to order 3. You will want to update all rows from order 3 and onwards to order+1 then set the image to order 3.
UPDATE table SET id = id+1 WHERE id IN (SELECT * FROM table where id >= 3)
If you are using unique on the order column to re-order you will have to update the current value to a temp value such as 99999, then use method in 2. However method 2 should keep this table from receiving any duplicated values.
sidenote
You could on delete of a picture re-evaluate the ids to keep no gaps
UPDATE table SET id = id-1 WHERE id IN (SELECT * from TABLE WHERE id > 3)
Where 3 is the deleted id

It will be in the end of the list. Just use auto increment feature and do not set ID manually (like lastID + 1) and you'll never have described problem.
You can allow user to change order of the list and then just update all order cells (for each member of the list). Or you can use Ajax and exchange order value for two members every time user drag-and-drops.
Use one of approaches described in 2 and you'll never have this problem.

Related

Getting row data on Interactive Report

Morning,
I'm currently using an Interactive Report on APEX that contains several columns, some of them being checkboxes that represent if a certain number is present in the table that is being used to fill the report.
For example, row 1 has a telephone number "99091021", row 2 a provider, and the following 5 rows are checkboxes that should represent branches in certain areas. If a checkbox is clicked, it means that this number is present in that area.
Now, I'd like to create a dynamic action that inserts that number into that table when I click the checkbox (and it becomes checked), and a delete for when it's also clicked (and becomes unchecked). Problem is, I don't know how to access the rest of the data in the row of the IR to use as a comparison for the delete and insert statements.
Say I try to click the Checkbox 3 on the row where the telephone number is "99091021". A dynamic function would get the data row, then a true action would compare the necessary data to perform either an insert or delete, depending on the state of the checkbox. That's the plan.
I've done something similar before, using localStorage, but it didn't quite work, because before I used it on an interactive grid. Is there a similar function for interactive reports?
Also, is there a way to check if a checkbox is checked or unchecked in a PL/SQL Code?
Here's the solution I found:
I had a select that got the necessary data for the Interactive Report, but because I kept getting an error of temporary data table being exceeded and always breaking the server, I had to change the checkbox query to something like this:
apex_item.checkbox (1, '1_'||a.pk, case when max(decode(b.nr,1,1,null)) is null then '' else 'CHECKED' end) as checkbox1
The '1_' part represents me selecting the first checkbox. With the value still there as the selection, I was able to do the following:
$s("P165_GET_PK",this.triggeringElement.value)
The result would basically be "1_PK_number". With this function I was able to get the value (a.pk) hidden in the checkbox to an Apex item, and then continue using it for my insert and delete statements. It's just a matter of separating the value in it with substring functions and so on.
Now I can delete or insert new data inside that table with a simple click.
I hope it helps in case someone tries doing something similar.

Add dynamic column to table in smart-table [angularjs]

I needed a little help over here on adding dynamic columns to table and I'm using smart-table project https://lorenzofox3.github.io/smart-table-website/
Please look at plunker
https://plnkr.co/edit/uTDa6hfwdgGtGWkYqL7S?p=preview
Click on add new column, it will update the table header, but I can't update the td element because I haven't created or binded any td element for new column.
Need help on two things.
1) Any number of new columns might come in future from server dynamically, so I can't bind any element statically in html like I did right now.
2) This is a little long one(I want to create a only one header as MV and in colspan I want current and next) and How do I accomplish that one ? If I divide like that, how do I go frame the data ?
Additional Note on Question 1: I have tried dynamically showing the data in table. please look at line 27 in index.html. But again, If I go with this approach, the values get binded to different different columns since, data's are framed dynamically on controller. To be simple, there is no guarantee that data will be in in this order.
(SNo, companyName, companyFullName, MarketValueCurrent, MarketValueNext, QuarterCurrent, QuarterNext)
companyName might come first or at last. If I go by dynamic looping using ng-repeat, it binds MarketValueNext in first column, then companyName, etc in whichever the order the data is coming.
Thanks in advance.

Reloading or Refreshing JSON and HTML div load order

I am trying to create some code that will allow me to pull and display stock data for a Smart Mirror Project that I am building.
I have gotten it to display all the information but am not able to update the stock data. I want it to update the information every 5 seconds but when I do this, it basically goes on repeat and continues to output all the stocks over and over, off the page.
How can I get it to reload the data without reloading the entire page and how can I tell that it is working? Is it possible add a css element that flashes the prices yellow whenever the price changes?
Here is my code in fiddle: https://fiddle.jshell.net/Aurum115/2kbpt91z/17/
Edit: To clarify the second part. I basically want to still store the old price and compare it to the new price temporarily and quickly flash the text yellow if it has changed.
The problem you have is that you are appending the new HTML to the existing HTML.
To solve your problem, you need to delete the existing contents of the divs that your are updating. You should add the following code after the setInterval(,,, line:
$("#title").html("");
$("#livePrice").html("");
$("#stockTicker").html("");
$("#livePercent").html("");
$("#liveData").html("");
Unfortunately, it does result in a "flicker" each time you reload. To reduce this, in cases where you have a fixed number of rows, you can label each row 1-X (and use the same number for the cells in each row) and then simply overwrite the contents of each cell on each row as you update...
In my view, if you aren't worried about the order that the stocks appear, you should use a table and give id's to the cells that relate to each stocks price and change (e.g. for Apple the cell ids could be: price_NASDAQ:AAPL, change_NASDAQ:AAPL). You then simply use $("#price_NASDAQ:AAPL").html(...) to update the price and $("#change_NASDAQ:AAPL").html(...) to update the change.
If you want something to happen (like a flash) use $("#price").css("background-color", "...") to change the color and use setInterval(...) to wait for a short time before changing the color back...

how to display the which was inserted recently in to table

I have a table in MySQL test_info . This table gets an insert command at random times such that a new record is added. This insert can be fired from anywhere.
Actually what have to do is?
front end should display the data which was inserted into the table recently in a real-time fashion.
please suggest me how solve this problem
You would use $mysqli->insert_id to retrieve the id that was auto generated and used by the last query. Check it out here.
Edit: Based on Thorsten Kettner's comment, you could also use SELECT LAST_INSERT_ID(); which to my understanding isn't based on the current connection and instead is referenced globally.
You could even use SELECT MAX(ID) to get the last ID within a table, which most likely would be the most recent if set to AUTO_INCREMENT.
First, for your client side, check out the Server-Sent-Events.
Secondly, you need a mechanism to check for latest updated data at your server side
You can use a mysql query to get last records. In my example shows how to get last 10 records.
here is the example
select * from table order by date DESC LIMIT 10
insert_id has some restrictions and I'm not sure how you will differ inserts from deletes.
What I would do will be *on insert trigger in each table where you need to track the insert
(may be you will want to track on update and on delete as well)
triggers
.
what you probably need is a separated table - historical_data_tab which holds all the historical data triggered by any event which you want to track.
for mysql :
USE `db_name`;
DELIMITER $$
CREATE DEFINER=`root`#`%` TRIGGER track_insert AFTER INSERT ON your_table
FOR EACH ROW BEGIN
insert into historical_data_tab
values (new.ID, 'INSERT',NOW());
END
pay attention to new.ID and NOW(). In case you don't need the original PK, just insert NULL in place of new.ID and any Auto Increment PK will take care of the rest. NOW will populate historical_data_tab table with a timestamps of the time the event was triggered. INSERT should tell you what type of event it was.
Replace it according to the trigger you'r using.
you might want to keep data about any of the following events*
after delete, insert, update
or
before delete, insert, update
p.s. There are a lot of ways to do what you need. Don't go crazy with triggers and try catching front end events in the front end itself
select * from your_table where ID = Max(ID)

Slickgrid: Checkboxs + Pagination: getSelectedRows for all pages, and not only the current one

I got a grid, with checkboxes plugin and Pagination.
I can get selected rows only for the current page I'm at, but not of all the rows. How one can do that?
I search the code, tried finding the global array slickgrid is taking the selected rows when it enters a new page (dataView.syncGridSelection(grid, true)), but didn't manage doing so till now...
Thanks for any help.
You can subscribe to the onPagingInfoChanged event - which gets triggered when you navigate to a new page - then store the selected rows from that page into a global array for your reference.
dataView.onPagingInfoChanged.subscribe(function(e,pagingInfo) {
console.log(grid.getSelectedRows());
// add selected rows to a global array
}
Note: further to what you mentioned, the grid.getSelectedRows() returns the row number relative to the visible rows. So rows on page 2 will start with 0. I would advise to instead get the id of the row and store that in the global array instead (you know, the one each row in the dataview should have and which is unique).
Hope this gives you a start. Let me know if this helps!

Categories

Resources