Is there a way to click on a div and save this click sequence value in the db.
Say I have ten items in 10 small small divs and I want them to be sorted in the sequence i click on them. So clicking on the first one will be sorted first and the next and then next.
Want to be able to do this with Javascript. Have seen this happening in desktop application where form fields are sequenced for tab order as you click on the fields.
The easiest way to do this is to bind to the click event of the divs, and pushing the div elements onto an array whenever they're clicked. Then you can use .prepend() to the container array by popping the elements from the array. Here's an example..
I can give you a conceptual format, because a full-fledged deal will be quite long, and also because you've posted no code.
Ensure that each div has a unique id, and has at least one common CSS class e.g. sortable - this is critical, as it will allow you to query the DOM for those elements for further sorting. And, regarding ideas for the id of the divs, I have seen variations of usually some identifier like post id from a database;
You have a listening function is run when the window is loaded, that listens for when any div that has the class sortable is clicked. You override the default action, and use the class in tandem with the div id to keep a record of which elements were clicked and sort them accordingly by whatever criteria you deem fit (id, date, content). However, then you have to manipulate the DOM to be modified to properly represent your new ordering. This can be done in two further ways:
Your sort can be real-time (which is laborious and involves higher RAM usage and a lot of DOM manipulation, but it is doable).
Or, option 2: perform a static sort where this information is passed via a form to another page, which redirects to the same page or a new page with the reordered DOM. Another way of doing that is to purge the DOM tree and rebuild it in the same page with Javascript using the sorted information upon the submission of a form, or the click of a button.
Related
I'm learning HTML, CSS and JS with Angular and JQuery at the moment. I have a div "eventBoxes" where you can add as much divs called "eventBox" as you want. Therefore, I have one template of such an eventBox in my HTML file, which i clone, make displayed and add to the div "eventBoxes" when the user wants to add a eventBox.
I now want to get the inputs, that are made in the eventBoxes (one eventBox has several textfields), but obviously they all now have the same id.
What is a good practice in JS to differ between these same eventBoxes, sothat i can handle each eventBox separately? Do I really have to change the ID's before adding or is there a better way to do so?
If your templating a list then the individual list items should not carry an ID or the ID should also be templated as well in order to avoid duplicate IDs. Event handling on those elements should be performed using the event handler context element. For example if you handle click for an input, then the context of the click event handler would be the specific input that was clicked. Also the event object gives you access to specific context for the event like for example event.target carries a reference to the specific element the click was performed on.
What's the best way to "preserve" and "re-display" portions of an html page, along with jquery event handlers you've set up?
More detail:
I'm writing a "one-page javascript application" that lets users perform two different calculations. The user selects which calculation they want by clicking a radio button.
When they click radio button A, a big part of the UI needs to get displayed with appropriate html controls (and jquery event handlers) that allow the user to enter the parameters for calculation A.
Likewise, if the user clicks radio button B, that section of the page needs instead to show all the controls (and its associated jquery event handlers) that allow the user to enter the parameters for calculation B.
My question is how to best handle the swapping of calculation A and B's html controls and their associated jquery event handlers?
I had thought about just using jquery's .html() to get and set the parameter section part of the page, but I'm thinking that will not preserve any event handlers that I'd set up for those controls. Is that right? In that case, I'd need to either re-wire up the event handlers as the user switches between calculations or do something else.
(In essence I think what I want to do is to be able to preserve a chunk of the dom (which hopefully includes jquery event handlers) but I don't write a ton of jquery and am I'm not sure how to approach that... I'm wondering if I could get the whole parameter section of a page represented as a jquery node, and save that off (to a js variable) and restore it, as needed, if that would do the trick??
Thanks for any ideas!
Michael
Honestly, usually it's easier just to hide()/ show() elements rather than removing them/ re-adding them.
Add a calculation-1 class to elements you want to be visible for the first calculation, and calculation-2 for the second calculation elements. This will let you get a jQuery variable of all calculation 1 and 2 elements via $('.calculation-1') and $('.calculation-2).
You can then add an event handler for the radio's that hide() and show() the elements accordingly.
If you use html(), you'll lose events bound to the elements children. Unless you attach your handlers to an ancestor which you don't remove.
You can also use detach(), which will remove the elements from the DOM, but persist the event handlers you added. However, if your elements are dotted all over the DOM, it's hard to track their origional position, and TBH is more effort than it's worth.
I'm aggregating network data from all our Cisco switch ports, plus other stuff from other databases, and am outputting into an HTML file that renders strikingly like this (except I'm an idiot and just realized I drew "tbody" everywhere instead of "thead"):
I'm only displaying 10 rows of data for now in each table (which they are HTML tables with tbody, thead, and tfoot tags assigned; No PHP, Javascript, etc. at all yet, just pure HTML) to keep everything neat and similar (some switches have 48 ports, some 24, etc.). I'd like to use those "Prev, 1, 2, [...], Next" buttons to cycle through the data of each switch, preferably without the page refreshing.
What I've used in the past is this setup:
Give each possible data set to show up its own "div" id
Make their "style.display" attribute = 'none' (except the first page)
Have a Javascript function that puts these divs in an array
The function can hide and show divs and will show only the div I pass
as an argument
Tie this function to an HTML button's onClick event
Is this the best way to go? Since I'm creating this HTML dynamically (I'm outputting text from a C++ program to index.html like a boss), it would mean an issue of assigning div ID's to many different sections, and even then could I create the function to update only the div that the button's parent is in?
I'm thinking this is possible and certainly time-consuming, but I'm not a great web programmer. If there is a better way out there, I'd like to hear it before I proceed to spend too much time on this.
If you don't mind an additional library, datatables would make paging easy (and, as you mentioned, just pre-populate then let JS do the work).
The downside is it's an included library (which means either directly including it in the HTML within a <script> or find a CDN reference to it). The upside is that the paging is built-in and all you have to worry about is getting the data in there. Then, with a few quick config options, and optionally some .CSS changes, you have the desired result.
You can use event delegation to set only a few event handlers:
var footers = document.getElementsByTagName('tfoot');
for(var i=0; i<footers.length; i++) {
footers[i].onclick = function(e) {
console.log(e.target); // the clicked element within the footer
}
}
This will create a single click handler for each table footer, and you can detect which button was clicked by looking at the event object's target property (or srcElement on oldIE). Then you can traverse the DOM relative to that element, using standard properties like parentElement (see MDN for reference).
I have a list of items for which I want to show a couple of items, then a "more" button. I would like the more button to show the new items in a popup box. There are many ways to make this work, but I'm trying to figure out what is the best practice.
Here is my approach. We use MooTools and Clientcide on our site:
Directly following the "more" button, I include a div that contains the content I want to put in the popup (the full list, including a duplication of those items that are visible by default), with a class that includes the style "display:none".
I attach an event to the more button that runs a script called "popupNext". popupNext takes the next element after the button (using getNext from mootools), and creates a new StickyWin (via Clientcide and stickywin.ui) with that element as its content. Then (and this is the part that feels especially hacky) it removes the class that includes the "display:none" style from the content element.
Finally, I use element.store() (from mooTools) to store the StickyWin (with the key "win") in the event element. I neglected to mention above: when popupNext runs, it first checks via element.retrieve() whether there is an existing StickyWin, and shows it, if there is.
This all seems OK, I guess--the biggest disadvantage is page bloat--while I'm showing only first couple of elements of each list, there may be more that are loaded with each page but never seen. But I'm curious whether there is some better, standard way of doing this. For example, I could reduce bloat by retrieving the elements via ajax, at the expense of slower response when a user wants to see the full list.
Check out StickyWin.Ajax - it seems to be closer to what you need than the plain StickyWin.
I am using partials in Rails combined with jQuery child field templates to dynamically generate forms with multiple nested child attributes. Within these partials is JavaScript that is fired when various events (e.g. onChange) occur in the form, and the code that executes needs to change the DOM for a related but different form element. In this particular case, I'm using it to add multiple sale transactions in a point-of-sale type solution to a particular group of transactions and control what data is collected for each transaction. So, for example:
User clicks on a link that adds 3 new transaction records to the transaction group.
User sets different values in each of those three transaction records, each of which fires an onChange event that calls a JS function that needs to manipulate the DOM for each of the events in different ways. (Example: transaction 1 may be a return, so it changes the text of the transaction from cost to refund, transaction 2 may be for a service, so it changes the taxable status, etc...)
The JS function has to be able to change the DOM for the correct transaction.
My problem is #3 - the DOM elements being modified are not the same as the element generating the event, so I can't use JS this. They are part of a common parent element (i.e. they share a parent <div>), so it may be possible for me to use jQuery parent/child selectors to navigate to the correct element in the DOM. However, even this requires some uniqueness in the div id attributes, and I'm not sure of the best way in Rails to dynamically generate these.
I suppose I could use random values, but this seems bad because it's not truly guaranteed to be unique and just seems like a hack. I suppose I could try to introduce some kind of counter, but this seems to violate the principles of Rails development.
Any guidance is appreciated. Thanks!
Using the current time is recipe for pain and unexplained bugs. I highly recommend you use something like a GUID generator for generating unique IDs.
you could use Time.now as unique-id when creating a new tag
Time.now.to_i
it's not an hack or something that goes against Rails principles ;-)