Getting data from javascript drag and drop - javascript

I want to make a few boxes that I can drag and drop into other boxes/tables. After searching around the web, it doesn't seem like a big problem to solve. But how do I know where the boxes have been dropped when i submit the page? I'm using mvc3 so my viewmodel needs to know how the boxes have been placed when the page is submitted. The page consists of other forms that need to be filled out too.

Use some library like jQuery UI droppable to provide the drag and drop functionality. The library will always expose some event that you can hook up and react to appropriately (e.g. by modifying the values of hidden input elements).
What you would do exactly inside the event handler depends on the particulars of your application and ViewModel.

Related

ViewModel like validation in AngularJs

I'm having some difficulty envisioning a potential solution to a dilemma I'm facing, and I need some creative inspiration.
Essentially, I'm struggling to picture a good way to validate a form that can be thoughts of as having multiple nested forms. The challenge is that these nested forms are only rendered when a line item in the main form is clicked, causing a modal to open, at which time the rendering, model binding, etc. takes place, and the nested form can be validated.
The goal is to know whether or not there are validation errors down inside any of the main form's line items without having to open/render a modal for the item to find out. I'd also like to make sure that there's no duplication of validation logic, and that things are drawing from a single common set of validations rules that can be shared/accessed everywhere needed.
Ideally, I'd like to abstract out the validation logic such that it can be used by any ng-model bound element, but can also be used independent of rendering a form.
If anyone knows of any plug-ins that work well with AngularJs and sound well suited, please let me know.
Clarification
Though I'm open to checking out any plug-ins that might help, that's not really what I'm after. My main objective to is to find a way to validate my nested item data without opening/rendering the item's modal.
I would use something that ensures that the user fills in these forms in a predefined format in the first place.
I use something called inputmask in my angularJs applications.
You can use a regex to define the format you want the inputs to be in.
You can also make sure that all the fields in the modal are in the right format before letting the user close the modal(This validation logic can come from a shared or common component).
Another option would be to make the modals hidden and not removed from the DOM so that the bindings remain even when the modal is no longer visible. You can add a red asterisk or something against the line which opens the modal to indicate errors in that modal's form.

Creating a carousel-like form using CSS/HTML

I'm, just wondering what the best approach is to create a carousel form like the one shown Here
is. For further explanation, I am looking to create a form where users may input some information, Click next, a transition of some sort will happen, and the form will change to different inputs without leaving the page, similar to a carousel.

Is tabbing behavior affected when used inside an iframe?

I'm currently attempting to tab through some react components that I've (text inputs, checkboxes, radio buttons, etc) implemented (using material-ui). Something I've discovered is that tabbing through my components locally works as expected but as soon as I put it on the server, it skips through my checkboxes & radiobuttons (but tabbing to text inputs works fine).
The website that I'm displaying my react project on is built on backbone and I'm basically displaying an iframe with my react project inside that. Is it possible that this has some effect on a user's ability to tab through the components inside an iframe?
Thanks for your help!
With some help from above, I was able to figure out that when I render my react project inside the backbone project, some components such as my checkbox and radio buttons are wrapped inside a <span> tag and in order for it to be able to be tabbed I had to add the tagIndex attribute to it. Thanks everyone!

JQuery Event On Clearing A Div

I have a div that is used to display one of several wizard interfaces; which wizard is dependent upon a menu selection.
Unfortunately, if a user clicks a different menu option, the div is cleared and the new wizard is displayed. There is no chance to clean up the session (which I am using as a conversation scope).
Is there a way to trap the jquery .empty() command, in order to make sure I can clean up any mess before new content is displayed?
With no real code it's hard to answer, but as I can see in docs empty() has no method for binding another function (http://api.jquery.com/empty/) - so my suggestion is to write own function for clearing and allow it's manipulation.
Another way could be with some "dirty form" handling (check if form changed and allow/disallow etc).

How do I fill a dropdownlist on mouse event with jQuery?

Lets say that I have a drop down list that I want to create "on the fly" when the user interacts with it.
For example: the drop down list only has the the option "Attach a file". When the user clicks/interacts on the drop down list, I need for it to generate, at that moment, all the available files they can attach (which depends on other interactions of the form... hence why I need an "on the fly" method).
My problem is trying to find the appropriate event as a trigger.
If I use onFocus, then IE tries to load the original drop down list and then generates the new drop down list, resulting in the user to essentially need to double click the drop down list to interact with it. In Firefox, there are no problems with this method.
I then tried switching to onMouseOver which works great in IE, but not so much in Firefox. The difference in the two is that in IE onMouseOver only triggers on the drop down box and not the drop down list and in Firefox it triggers on both (so you are trying to select an option from the list and it keeps re-generating the list on the fly, which is preventing you from interacting with it).
Any ideas?
Have you tried onClick?
Also you should put some logic into the code that fills in the options. If nothing has changed on the page, then there is no need to refill the drop down list. So if you store the state of the page somehow, you can check if the new state is different from the old state, and then fill in the dropdown if it is.

Categories