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
Related
I have a form in which user can select two players from a list (two separate select fields). I managed to do it using options_for_select helper, but
user shouldn’t be allowed to select the same player twice - it obviously can't be something like player1 vs player1. I was experimenting with ‘disabled’ option, but without success, because list of available users should change dynamically after selecting first user, which probably can't be done in Rails?
This is a very broad question, with little details, hence my answer will be generic to cover the majority of cases.
You'll have to use JavaScript to hide the same options from the other list. Rails works server-side, therefore you should reload the page if you want Rails to re-render the list without the selected option. But this is a terrible user experience.
However, you should also perform a server-side check. Even if you add the JS in place, it will still be possible to send a crafted request where the players are the same. This is something that must ultimately be verified at server-side level, in your Rails controller or wherever you have the logic to handle the comparison.
I am creating an Ember app that has a search engine built into it say for houses. My results change a lot as houses are found / added or removed / sold. Therefore my search results change all the time.
I also have pages for each house which has a similar houses section on it that shows always changing similar houses to this one.
I am trying to find the best way to make this app crawlable to search engines.
I could like discourse use noscript tages for each page but as all my houses pages can hold different information and structure depending on the agent/ seller this would be a lot more work basically duplicating what the client is doing!
I could go down the phantomjs route and cache all my pages and serve via the escapedfragment_ method but i am thinking this would be a resource intensive approach with content changing so much. Also with my house pages having similar houses on them that can change depending on the user / location etc, i am not sure how to cache these sections.
Another method i am toying with is to convert my page / section templates into a serverside template so i can render it on the server. For example when a customer creates a house page via my ember app in the format they require they click publish and i convert the rendered html into serverside template with placeholders etc for data.
Anyone help with this ? Any ideas / suggestions / advice would be great!
I think you've kind of answered your own question. This is all about trade offs and finding the solution that is best for your particular case. There is no silver bullet. Personally I go with something close to the noscript route, but instead of putting things inside noscript tags, I put them in regular divs with a class of no-ember, which are visible by default. Then when the document is ready I test to see if the client supports push state. If so, I initialize my Ember app and hide the no-ember divs. If not, then all of the no-ember divs are visible so that the client can see/use the content like normal.
I'm building a web site (using ASP.NET, MVC 3, Razor) and I'm not using an off the shelf CMS. This is because I evaluated a lot of existing CMS's, and found them all to have a massive learning curve, tons of features I didn't need, and they force you into a page oriented model. By "page oriented model", I mean that you can specify a general page layout and stylesheets, but the object that the user can edit is a whole page, which displays, for example, in a central panel, and maybe you can customize the sidebars as well.
But this site is very design centric, and needs to be much more fluid and granular than this. By "design-centric", I mean that the site was built in Photoshop by a graphic designer, and there is heavy use of images and complex styling to map the design to HTML/css/js. Also, every page on the site is totally different. There are also UI elements such as accordion panels, in which we need the user to be able to edit the content of each panel, but certainly not the jQuery+HTML that powers the accordion. The users are subject matter experts but very non-technical.
So I'll have a page with lots of complex layout and styling, which I don't want the user to access, but within this there will be, say, a div containing text that I would like the user to be able to edit.
How can I best accomplish this?
So far, I'm implementing this by having snippets, which are little units of html, stored in external files, that the user can edit. In run mode, these are loaded and displayed inline (with a little "Edit This Content" button if you're logged in and have permissions). If you click the Edit button, you get a little WYSIWYG editing screen, where you can edit and save changes. So I can control all the messy stuff, and put in little placeholders for user editable content. But this isn't entirely simple for me, and I'm wondering if there's a better way.
Don't mean to necro this, but it seems to be the most relevant question to what I'm currently researching. I recently built something similar as you described above, but I'm pulling data from a database instead of static files. For each page (like /about or /contact) in the Controller I pull data for that page from the DB in the form of a Json string key/value pair. Key is the placeholder tag, Value is the.. value. After deserializing, I simply populate a list and assign it to a ViewBag, then in the CSHTML I ViewBag.List.Keyname to grab the text.
I have a small admin control panel which allows me to modify the text in the database. Having little hover-overs like you do is a great idea though!
Well, I stuck with my original plan:
So far, I'm implementing this by having snippets, which are little
units of html, stored in external files, that the user can edit. In
run mode, these are loaded and displayed inline (with a little "Edit
This Content" button if you're logged in and have permissions). If you
click the Edit button, you get a little WYSIWYG editing screen, where
you can edit and save changes. So I can control all the messy stuff,
and put in little placeholders for user editable content. But this
isn't entirely simple for me, and I'm wondering if there's a better
way.
It works reasonably well for now.
I am trying to show/load different editor on different rows of a editorgridpanel. Like a textbox on one row combobox/superboxselect on another and it could be any order, random.
The conditions which dictate which editor will be shown reside in the database.
Please tell me if this is possible and if so, how do i go about it.. I have tried pulling the conditions asynchronously which are pulled on a click event for the respective column, but calling it async causes problems. Please advise
Anything is possible, but what you want to do would take a bit of work. The basic idea would be to configure the needed grid editor(s) dynamically and update the columns with the new editors when needed. Now... what would be required to make that actually work I couldn't say offhand without digging into the Ext source -- it would almost definitely require overriding default behavior in the grid and/or column model.
Pulling your conditions asynchronously would (I imagine) be too slow for the interaction of clicking on a row to edit inline. If it takes a second or more from click to configured editors, that would not be acceptable performance. I would try to find a way to send your conditions down along with the other row data if at all possible (they can be in the store's data model on the client without having to be shown in the grid).
Without knowing more about your business requirements, it might be more appropriate to ditch the editable grid and instead go with a dynamically-configured FormPanel tied to the grid. This way the interaction of clicking and then pausing slightly while the form is configured would appear to be more natural. Also, the functionality of rendering a form with a particular configuration is perfectly standard and would require nothing fancy on your end. See this example as a starting point (your form would be dynamic, but maybe the same type of interaction could work?)
Yesterday morning I noticed Google Search was using hash parameters:
http://www.google.com/#q=Client-side+URL+parameters
which seems to be the same as the more usual search (with search?q=Client-side+URL+parameters). (It seems they are no longer using it by default when doing a search using their form.)
Why would they do that?
More generally, I see hash parameters cropping up on a lot of web sites. Is it a good thing? Is it a hack? Is it a departure from REST principles? I'm wondering if I should use this technique in web applications, and when.
There's a discussion by the W3C of different use cases, but I don't see which one would apply to the example above. They also seem undecided about recommendations.
Google has many live experimental features that are turned on/off based on your preferences, location and other factors (probably random selection as well.) I'm pretty sure the one you mention is one of those as well.
What happens in the background when a hash is used instead of a query string parameter is that it queries the "real" URL (http://www.google.com/search?q=hello) using JavaScript, then it modifies the existing page with the content. This will appear much more responsive to the user since the page does not have to reload entirely. The reason for the hash is so that browser history and state is maintained. If you go to http://www.google.com/#q=hello you'll find that you actually get the search results for "hello" (even if your browser is really only requesting http://www.google.com/) With JavaScript turned off, it wouldn't work however, and you'd just get the Google front page.
Hashes are appearing more and more as dynamic web sites are becoming the norm. Hashes are maintained entirely on the client and therefore do not incur a server request when changed. This makes them excellent candidates for maintaining unique addresses to different states of the web application, while still being on the exact same page.
I have been using them myself more and more lately, and you can find one example here: http://blixt.org/js -- If you have a look at the "Hash" library on that page, you'll see my implementation of supporting hashes across browsers.
Here's a little guide for using hashes for storing state:
How?
Maintaining state in hashes implies that your application (I'll call it application since you generally only use hashes for state in more advanced web solutions) relies on JavaScript. Without JavaScript, the only function of hashes would be to tell the browser to find content somewhere on the page.
Once you have implemented some JavaScript to detect changes to the hash, the next step would be to parse the hash into meaningful data (just as you would with query string parameters.)
Why?
Once you've got the state in the hash, it can be modified by your code (or your user) to represent the current state in your application. There are many reasons for why you would want to do this.
One common case is when only a small part of a page changes based on a variable, and it would be inefficient to reload the entire page to reflect that change (Example: You've got a box with tabs. The active tab can be identified in the hash.)
Other cases are when you load content dynamically in JavaScript, and you want to tell the client what content to load (Example: http://beta.multifarce.com/#?state=7001, will take you to a specific point in the text adventure.)
When?
If you had a look at my "JavaScript realm" you'll see a border-line overkill case. I did it simply because I wanted to cram as much JavaScript dynamics into that page as possible. In a normal project I would be conservative about when to do this, and only do it when you will see positive changes in one or more of the following areas:
User interactivity
Usually the user won't see much difference, but the URLs can be confusing
Remember loading indicators! Loading content dynamically can be frustrating to the user if it takes time.
Responsiveness (time from one state to another)
Performance (bandwidth, server CPU)
No JavaScript?
Here comes a big deterrent. While you can safely rely on 99% of your users to have a browser capable of using your page with hashes for state, there are still many cases where you simply can't rely on this. Search engine crawlers, for example. While Google is constantly working to make their crawler work with the latest web technologies (did you know that they index Flash applications?), it still isn't a person and can't make sense of some things.
Basically, you're on a crossroads between compatability and user experience.
But you can always build a road inbetween, which of course requires more work. In less metaphorical terms: Implement both solutions so that there is a server-side URL for every client-side URL that outputs relevant content. For compatible clients it would redirect them to the hash URL. This way, Google can index "hard" URLs and when users click them, they get the dynamic state stuff!
Recently google also stopped serving direct links in search results offering instead redirects.
I believe both have to do with gathering usage statistics, what searches were performed by the same user, in what sequence, what of the search results the user has followed etc.
P.S. Now, that's interesting, direct links are back. I absolutely remember seeing there only redirects in the last couple of weeks. They are definitely experimenting with something.