I create and save questions list in sequence in mongo dB database but
I want to change questions sequence. Every question is in div. how to make div draggable and save in same sequence in database
Related
Title is maybe confusing but I will try to explain what is that I need.
I have application that shows tables of some place (e.g restaurant). This tables are shown to end user.
But I want owner to be able to rearrange these tables position from admin panel. He will be presented container ( just a rectangle to keep it simple ) and I want them to be able to take table (it can be icon or whatever) and place it wherever they want (literally in any direction or position in this container). They can add as many tables as they want and place them where they want. This part is for frontend and I am not too scared of this. But problem for me is how can I save this information using Laravel? because I want owner to save this position of tables and then when end user comes to page of that place I want them to see the positioning of these tables that owner provided.
How can I achieve this? Is it possible?
I don't need Laravel specific answer, just to point me in right direction so I can understand the logic of how this can be saved on backend.
I am using Vue.js on frontend and Laravel for backend.
I made this sketch so you can see what I mean : https://prnt.sc/1tcv3lf
Off the top of my head:
Frontend
In Vue, you can implement a reusable component for the tables. These components will have a top and a left props which define their absolute position from the container's top and left (CSS rules). You can easily make them draggable using jQuery by calculating mouse pointer's position relative to the container's top-left corner. Pass them as props into top and left for the table components. Store them in an array [{ top: _, left: _ }]. Append to this array whenever a new table is added.
When save button is clicked send this array to the backend.
Backend
Not sure what exactly is bothering you about this, you can simply store it in a database with top and left columns, each row representing one table in your frontend.
Then you can query this database to fetch all rows whenever users visit the page, pass it as an array to the frontend. The frontend will use this array to construct all the tables in the right positions.
I have max limit of 3 items I can add in database, and I can add the items in DB whenever I want to.
How can I make it so when I have for example already 1 item in database and I want to add another one, it makes a new tag automatically?
code blocks
For now I was trying to make a simple if statements to check if there is something under that tag, but it doesn't seem to be working.
The correct logic for the checkDB procedure would be
if not is text empty ...
then ...
you can find the not block in the Logic drawer and the is text empty block in the Text drawer
also the text in the socket valueIfTagNotThere should be an empty string
Using goldenlayout, and I have a slickgrid loaded inside a container (as the tutorial outlined).
I have a timer that goes out and pulls new data.
I would like to know how to update the data in the slickgrid with the new data.
Question 1) - How do i create a div inside the container and give it a name
Question 2) - How do i do a refresh of content in the container
Question 3) - How do i do a refresh on the container
I guess i need more detail in the question to meet quality standards.
I can create the and load the grid at creation time, as per the examples, now i need to reload and present the new data from the web service.
Have you checked out the examples, particularly 'AJAX-loading Data with Search'?
I have a page written in Vue, where there is a table with 3 columns as shown below:
https://i.stack.imgur.com/Ox7gn.png
Each column is a whole entity, and each row are the properties of the entities.
At the bottom of each column, there is a group of buttons for each column.
What I want to do is to append some additional attributes (strings) to possibly more than one properties of an entity when a button is clicked, like below:
https://i.stack.imgur.com/lnUzt.png
And when another button is clicked, more strings are appended.
When a button is clicked again, the corresponding properties will be removed. For example, if the "a" button in the second image was clicked, the table will revert to the first image.
Since there are many properties (around 10), I don't want to hard code all the strings as div's under each and every property and render them conditionally using v-show/v-if.
I have also thought about storing an array of the number of active buttons and re-render the whole table when any button is clicked. (The reason why the whole table has to be re-rendered is because each individual rows are rendered with a for-loop, so I cannot just modify a single element in a row.) But this does not seem very natural, and I believe there should be a better solution.
Is there a good way to do it?
I am using the tablesorter and tablesorterpager plugin and I really like it.
http://tablesorter.com/docs/
http://tablesorter.com/docs/example-pager.html
However I need help with a problem I have. I use checkboxes for every row in a table for selecting items. I also have a “select all” checkbox in the table header.
When looking at the pager script I understand that the plugin completely removes all the table rows from the DOM and only renders the visible rows, the rest of the table is cached.
So when using code similar to this:
$("#theTable").find("input[name='cbitems']:not(:disabled)").each(
I will only get elements currently visible. Not elements in "hidden" pages.
So my question is; is there anyway to make the cached table accessible?
For example:
$("#theTable").cachedTable.find("input[name='cbitems']:not(:disabled)").each(
I have tried reading up on object oriented javascript (or what to call it), but no success.
To answer my own question:
The cached table is accesible, I had just left out the [0] part.
$($("#theTable")[0].config.rowsCopy).each(function() {
$(this).find("input[name='nodeitems']:not(:disabled)").attr('checked', check);
});