I have a little problem with jQuery Tabs.
I get it to work well. But when I open the pages dynamically (eg. I click to open a new tab for a product) it may be several tabs open to different products. But each side has of course the same id and so on (eg. div tags). This means that when I change something on another tab so it's affecting the other tabs.
How do you solve this problem?
You can use a scalar ID (1,2,3,4,5, ecc) for these DIVs and just store the "reference ID" in another field.
The use of the same ID for different nodes is just a bad practice. It also breaks the validation of your document.
Take a look at the .data() method on jQuery that allow you to store data in an arbitrary way
Related
There are a bunch of question on this but no answers on how to do it without javascript.
If you have one form that has 2 select boxes. The second select box has different options based on what you choose for the first select box. Here is a js example. Not all users have js enabled so for these users this option would be unavailable.
Can this be achieved solely using CSS3, HTML5 and Ruby? I would show what I've got so far in trying this but I got nothing.
What you are asking is how to manipulate the DOM after it has loaded without a client-side scripting language. This is not possible as far as I am aware; unfortunately that is not what you want to hear.
The proper solution in this case would be to have the user submit the page and generate the second selection box at that time. You will have to rely entirely on server-side logic to handle the problem. So basically something like:
Serve a page with just a single selection box
When the page is posted generate a similar page where the first selection is locked and display a second selection box with the possible options.
Continue the iteration until you have all of the required selections filled out by the user.
Serve the result that the user requested.
I'm new in Rails, I have a Meal model which has many Products. Meals are assign to User (maybe this is important for a concept). In meals/new.html.erb I want to create new Meal as follow:
Click the button "Display Products"
On the same page (meals/new.html.erb) open modal (pop-up) with all products assigned to current user ( I have help method for current-user). It should be displayad like a list or grid with checboxes for example.
Then user can check few products and click "Confirm".
After that in meals/new.html should be appeared list of chosen products with additional input to fill their quantity.
So I have two problem here.
How should I display modal? Is needed any Ajax (I'm not so familiar with this technology)
How can I pass products between view and modal?
Could you help me a little to achieve these goals?
Regarding your first problem, displaying the modal is fairly straight forward. Essentially you will create a div with the proper bootstrap classes to be hidden when the page is loaded, and then create a button that makes it visible. I would recommend either reading over the W3Schools entry on modals, or from the appropriate part of the bootstrap javascript documentation.
Regarding your second question, this depends on exactly what you mean. The modal is part of the view, so if you're only trying to put information that is currently on the modal back onto the "page" behind it, you can do so fairly simply with javascript (copying content out of one element into another, or updating states of inputs). If, on the other hand, you're trying to use the modal to retrieve information from the server (for instance if you wanted to show a list of possible options, and then display detailed information about the selected items from the database) that would require Ajax.
If you have any snippets of code that aren't functioning as you expect, feel free to add your View to the question. In cases like this, usually the best way for us to provide help is for you to take an early crack at this, post the relevant code, and then seek answers for the things that behave unexpectedly.
I hope that helps.
I was wondering if there are any ways to place a Listboxfor inside a Texboxfor? I am using Bootstrap in a MVC project for a registration page and have a text field for character name input and a dropdownlist field for a server select. Currently, they are placed consecutively, but I was thinking it would be visually appealing to have the dropdownlist inside the textbox as they are interrelated.
Thanks for the help!
It's not clear what you're trying to achieve here, but you cannot place a drop down list inside a textbox. That's not how the HTML elements work.
If you just want the drop down list next to the textbox, just put one directly after the other. They're both inline elements (by default, though you may have CSS that changes that behavior), so they'll naturally flow together.
If you're talking about having a combo box, where you start typing and options appear based on entered text, that's JavaScript-based functionality. There's tons of plugins online for that type of thing. Just do a search on Google and integrate one that works best for your needs.
I am looking at converting a legacy application to use jQuery UI Tabs (using AJAX to acquire the data for each Tab).
We are able to, easily, configure the legacy application to only respond with the HTML "guts" of the page, without the HTML for the surrounding header, left, right and footer panes, and the performance improvement (perceived and actual) is significant, plus it makes the application look a lot slicker and more up-to-date.
However, the legacy application uses 3 separate pages for database CRUD operations:
Page-1 : Criteria form - which posts to:
Page-2 : SQL Query and display Results - with links to:
Page-3 : Form for maintenance of record with DELETE and SAVE options
and there are duplicate IDs, Form Names and FormField Names on all three original pages. Changing the legacy application to make the IDs unique would be a huge amount of work (vast number of such pages), so I would like to work around it if possible.
My first attempt was to "move" the innerHTML from a Tab to an associative array when it loses focus, and reinstate it when the tab gets focus. This works fine from a display perspective, but it seems to break all the Javascript associated with the underlying code (once it has been moved to associative array and back again).
Before I start trying various other approaches I would appreciate any experiences / suggestions you may have. My thoughts are:
A. Sort out whatever is broken by the method I am using
B. Apply a PREFIX to all the Names/IDs when the Tab loses focus, and remove the PREFIX when the tab gets focus.
but maybe there is a better way?
Many thanks for your help.
Other info:
The legacy application has OnClick calls to JS functions [for actions such as SAVE, DELETE, FIND, etc] that assume fixed names for Forms etc. and Validation of the form has JS that defines rules based on names of FormFields ... so changing that across the system would be a lot of work, and require lots of QA testing, hence I am keen to find another route if possible
I have a list to display from a database. Each item in the list is associated with an ID. I want to know the best way to keep track of the ID of each item in the list. So when I click on the item, I can use the ID to map to other attributes of the item in the database.
I don't know about the "best way", but one way you can do this is through embedding the id in the anchor tag and then using a client side routing solution to work with that (check out jQuery mobile router).
Alternatively you can maintain a reference in a js object for each item in your list, keeping the id in the object. The easiest way to do so is probably by using some sort of javascript mvc type framework like backbone.js where you would have a collection of models representing each item and a view for each item that is hooked up to a particular element in the DOM (in your case an li) and can be wired to respond to events on that element (for example when you click the item that items view responds to its click event and acts accordingly).
Edit:
Personally I've been using backbone.js to structure my own code, if your interested in it you should be able to find many tutorials for it. Anyway here's a jsfiddle with the basic idea of using backbone.js to maintain a reference to each item in the list. Of course you can do this also in vanilla JavaScript.