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.
Related
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.
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 am researching web frameworks that are in common usage. In ASP.NET there is the notion of a "postback". Specifically, the framework automatically adds a hidden FORM to each page which can be submitted by JavaScript with various state parameters, etc. The "action" URL for this form is always the current page's URL, including its query-string parameters.
I am trying to find other frameworks that have this behavior, i.e. that automatically alter the page's HTML and add forms (or links) to the current page in some form.
If anyone can point me to frameworks that do this, preferably with a reference to a doc or an example, I would appreciate it!
Oracle Application Express, http://apex.oracle.com/
Generates a FORM element that contains all items on the page, and handles state for these items when the form is submitted.
I'm working with Ruby on rails 2.3.4 and I'd like to pass some parameters from one page to another ones the first one is submitted.
For example:
On the first page, I have a form that when it's filled a Preview button can be clicked to check all the info entered before submitting the form. That button redirects to another page with the info entered before, but I don't know how to get it in the second page.
There are two possible solutions:
You can emulate the stepped form filling by creating a record in first form and saving it with status "unverified" or "pending". This way you won't have to deal with hidden form fields in 2nd and 3rd pages. All you'll need to pass is the id of pending record. You'll just need to update record status to "active" once the data is confirmed.
Use client side paginated from (all popular JS frameworks have plugins for this). Hence you will only display different <div>s in single loaded page (something like an interface for a setup wizard).