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.
Related
This is a bit of an edge case, but I have custom event handlers attached to elements embedded in the fancytree node title element. I bind these handlers to child elements in the title span during the createNode() callback using jQuery selectors and on(). This approach accounts for new elements being added when the folder nodes are expanded. However, when I also use the filter extension, these event binding are lost - even when I reset the filter to show the full tree again. The createNode callback is not called again after the filter reset, so I'm wondering if there is some other callback I should use to bind events once such that the are not unbound by the filter. Thanks!
I've identified the issue. The Fancytree filter replaces the html/text content of the node title span (whether hidden or not) which results in local event handlers being lost. A partial fix for this is to attach delegate event handlers on the parent fancytree-container div. This works while the filter is not active; however, when a filter is applied, the html content of highlighted nodes is replaced with new content generated by the filter extension, thus any custom embedded/active html elements are missing on these nodes. I don't see an easy fix for this problem short of writing an application-specific tree filter.
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.
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.
Say I have a JQuery object, el, that has selected an element. Is it legal, safe, and reasonable to call el.trigger("change") if the selected element is a DIV? What about other element types? For that matter, can I call el.change()?
The JQuery documentation for .change() says:
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements.
It's not clear to me what "limited" means here. It might be referring to the fact that these are the only three element types that will produce these events automatically, but it could instead mean that other elements aren't allowed to.
Empirically, Chrome v28 seems to allow it, but I want to know if I can expect it to work in general.
Goal
I have a pseudo-control that's composed of a set of buttons and spans wrapped in a div. Each instance of the control maintains and manages a value, which is modified by clicking the control's buttons. When the value changes, I need to send an event out from the div so that the rest of the page can react. I don't want to listen for the click events outside the control, since that couples the surrounding code to the controls' internals and not all clicks change the value.
I could create a new event name, but the built-in "change" event seems like conceptually correct, so I'd rather use it if I can. As an added bonus, my page already a "change" handler bound the right place with the right behavior (because I have some input and select controls on the page, too).
I need to support IE8 and up, in case the answer varies by browser make and version.
There are no restrictions, you can trigger any event type you like on any HTML element.
The jQuery documentation is simply telling you that change is only automatically triggered on <input>, <textarea> and <select>
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.