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.
Related
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 am using the Knockout: Contacts editor example http://knockoutjs.com/examples/contactsEditor.html as the template to start my MVVM project.
At the top of my page I have a set of cascading combo boxes that allow the user to drill down to a master record. When the user clicks the refresh button, an AJAX call finds the corresponding detail records from the server matching the user's search criteria. I load them into my viewmodel using ko.mapping.
My viewmodel is not as nested as the example, so I don't have anything at the "phone number" level. I do still want to add and delete records at the "first name / last name" level.
I am familiar with making AJAX calls to the server. I've looked at countless examples, but I still haven't found a good example of what the server side code should look like. Could someone point me toward an example that uses a list of objects like the example I am working with and what the VB.Net code looks like on the controller for adding, updating, and deleting database records using entity framework?
Why do I need to have site unique form element id's when using jQuery Mobile? I would really like to know how the DOM works in order to create my app memory efficient.
I get this information about the DOM cache:
http://demos.jquerymobile.com/1.3.2/widgets/pages/
Whenever it loads a page via AJAX, it flags the page to be removed
from the DOM when you navigate away from it later (technically, on the
pagehide event).
So this information about Markup conventions seems to be contradicting, or at least incomplete:
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/forms/
...the id attributes of form
controls need to be not only unique on a given page, but also unique
across the pages in a site.
This is because jQuery Mobile's single-page navigation model allows
many different "pages" to be present in the DOM at the same time. You
must be careful to use unique id attributes so there will be only one
of each in the DOM.
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
I haven't even attempted this yet and am creating this question for advice really.
I have a strongly typed page which receives a form model composed of several components. It is to create a mitigating circumstance (MC) for a student at a university for my final year project. A MC can be composed of the initial problem, assessment extensions, and I use a multi select box to allow the user to select staff retrieved from the database which are able to view the MC once created.
The thing is I feel that a student could be granted many assignment extensions for one problem. I am wander if it is possible to include a button/image on the form which when clicked will create a new assessment extension object, and duplicate the form components to set the values for the object? This would all need to occur without any page refreshes.
Any advice, or links to good tutorials would be appreciated. I have so far been unable to find any suitable examples.
Thanks,
Jon
There are a number of ways to do this, but the fastest is to create a javascript handler which creates the form controls without any sort of server request, all you need to do is keep track of how many items are in your list so you can name the form controls correctly.
Start by making a button that when you click on it creates form controls. Once you get that, work on the naming.