Any ideas on how to make edit-in-place degradable? - javascript

I'm currently writing an edit-in-place script for MooTools and I'm a little stumped as to how I can make it degrade gracefully without JavaScript while still having some functionality. I would like to use progressive enhancement in some way. I'm not looking for code, but more a concept as to how one would approach the situation. If you have any ideas or know of any edit-in-place scripts that degrade gracefully, please share.

It sounds like you might be approaching this from the wrong direction. Rather than creating the edit-in-place and getting it degrade nicely (the Graceful Degradation angle), you should really be creating a non-Javascript version for editing and then adding the edit-in-place using Javascript after page load, reffered to as Progressive Enhancement.
There are two options for this. Create the display as a form with a submit button that works without Javascript, then using Javascript replace the inputs with some kind of label that performs the edit-in-place. You should be able to use a combination of labels and id attributes to pick out the correct properties for your edit-in-place implementation to work. The other option if you don't want a form to display by default is to display the values with an button/link for turning it into a form using server-side processing, then adding the edit-in-palce to that.

You can't do edit-in-place at all without JavaScript, so graceful degradation for it consists of making sure that the user can still edit the item in question when JavaScript isn't available.
As such, I'd just have a link to edit the entire item in question and then create the edit-in-place controls in JavaScript on page load, hiding the edit link if you'd rather than users use edit-in-place when available.

If it's textual content, you could show the editable content as an input type submit button, with as caption the content. When clicked, it would submit the entire form, preserving the other values, and show an edit dialog. Afterwards the form values could be restored.

Maybe put an input in a div under each element that has an edit-in-place. When the page loads, use javascript to hide those divs. That way they'll only be usable if the javascript never fires.

I'm asuming what you're trying to do is something like the following scenario:
<li>
<span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>
Where the <a> is a button that replaces the <span> with an <input>, so that it can be edited. There are a couple of ways to make this degrade gracefully (ie work without javascript).
In theory:
Using CSS, do it with psuedo-selectors. :active is somewhat like an onclick event, so if you nest a hidden <input> in the <li>, this CSS hides the <span> and shows the <input> when the li is clicked on.
li:active #editable {
display:none;
}
li:active input{
display:block;
}
This may work in your favorite browser, but you'll without doubt find that it breaks in IE.
In practice:
Use a link. Have that <a> be an actual link that goes to a page where this input/span substitution has been done server side. You stick an event handler on the <a> that uses MooTools to cancel the click event for people who have JS, like this:
function make_editable(evt) {
var evt = new Event(evt);
evt.preventDefault();
}

Try using a styled input text, and after the page loaded make it readonly, using the readonly attribute.
and when click on it remove the readonly attribute, and onblur making it readonly again.
when clicking on "Save" button or on onblur event make an Ajax Request to save the data in the server.

Related

Tinymce view mode switches after init

My editor is tinymce4+.
It works greatly in most parts.
But no matter what I do, there's something I just can't do.
- switching editor mode instantly. -
I have a page that users can select a data and edit it and view the content. Users click on a button named " viewmode ", the other flipside is " editmode "
I achieved this by putting two DIVs in a same container, making one of them invisible by the start-look-settings users have choosen. One DIV has tinymce editor, the iframe tag, and another one has just a bunch of html values that the editor is holding. But the side effect of this is that the content style could look different, depending on its style attributes.
This web application I'm talking about now is an existing system that has its own CSSs.
It's so complicated that once you get to look at it, you might want to run away from it.
So I would like to avoid this CSS discrepancy by making editor dynamically switchable to both ways.
Loading multiple tinymce objects is the last thing I need here.
I can make editor disable by setting up an attribute - contenteditable = false -
But then the toolbar elements become bad boys here. because they still work. I hide the toolbar itself to complete this mission.
But you know, my client hated it and insisted me that the editor should provide a print button in its viewmode. This is frustrating.
So, if you could just give me an idea of how to manipulate the elements of toolbar, then I think I can manage to solve this issue.
If it's too difficult, attaching the print event listener to an external element could be also the second best option for me. Because from that moment on, I just throw the toolbar away and make a print icon on the top of the editor and attach the event to it.
Sorry for typing all the plain texts. But issue like this requires no codes I think.
Hope some tinymce guru stop by and help me out.
Finally, I made my editor switchable.
First step is to hide all the elements in the toolbar of tinyMCE.
tinyMCE toolbars have a specific class name so they are selectable with jQuery class selector. But selecting with class name alone causes getting unwanted toolbars as well, so you have to be careful with this.
FYI .eq() API might help you.
after hiding all the elements in the toolbar, ( don't hide toolbar by the way. ) do this.
tinymce.ui.Factory.create({
type: 'button',
cmd: 'mcePrint',
icon: 'print',
shortcut: 'Ctrl+P',
class : 'temp'
}).renderTo(appendTarget);
This is going to add a button element into the toolbar.
But somehow it doesn't invoke the command I defined in cmd's value.
So attaching this event to the button manually will be required.
tinymce.activeEditor.execCommand('mcePrint');
So far I created a custom-toolbar for view-mode editor. Now it's time to freeze the edior's actual content field.
It's very easy after getting iframe contents as jQuery object.
.contents() API should help you.
after that, you can select <BODY> element on your side, so the last thing left to do is to give 'contenteditable=false' attribute and value to the body tag.
Then your editor freezes.
Going back to the edit mode is easy too. Just do the backwards.
Invoke these events when you click on your own "switch" button. Then you can toggle your editor from view-mode to edit-mode ( and the oppsite way as well ).

Javascript as a link

I am making a website. In this the contents of a particular div has changes using Javascript and json when the user selects a link.
The problem I am facing is that that I am not able to use the back button since all my links for changing the div contents are like:
<a href=" **some javascript function**">
How should I change this as to use the default back/forward buttons effectively.
I know that it can be used to navigate to divs by using #, but the problem is that all my links are in the same div.
Is there any way the back button can execute a previously executed javascript?
You are looking for history.js. Also <a href="javascript:…"> is a really bad practice. Use <a> to reference other documents / files, not (directly) invoke javascript functions.

Accessible javascript alternatives to select elements

I am developing some javascript code that will replace a standard select element with a javascript controlled dropdown menu which will redirect users to a particular page. The standard select element must work when JS is disabled
An example of what I want to achieve is here: www.play.com
What I have noticed with this site is that they simply position the select element behind the javascript alternative. This means that both controls are available to screen readers and keyboard users.
Does anyone have any experience of setting such functionality up and have any suggestions for the best methods to ensure accessibility?
Plain links would be your starting setup, as they work to take users to new pages without any additional scripting required.
You can put them in a container ul, and then use javascript in a 'progressive enhancement' way to turn the list into a dropdown (by re-writing the html) for the people who've got it turned on. This way, a user without javascript turned on will have no problems, and the majority of users will see your drop-down menu.
Even better, don't use a select menu for navigation. It's not really semantically correct, and requires more work to make it operable and robust.
Try something like the Suckerfish drop-down menus which are based on nested lists: http://www.htmldog.com/articles/suckerfish/ or if you want a bit of jQuery fun: http://users.tpg.com.au/j_birch/plugins/superfish/#sample1

jquery change method to trigger hidden file input

I have created a fake file input using an anchor tag and placed a hidden file input beside this, I want to use jquery to add a click event to the anchor tag that triggers the activation of the hidden input box but Im not completely sure how to achieve this, if anyone could give me some advice that would be great.
Here is my current effort http://jsfiddle.net/kyllle/CdXP9/
I guess Im probably way off with this one, would love some advice on how this can be achieved though
Kyle
http://jsfiddle.net/CdXP9/6/
$('#upload').css("visibility", "hidden");
$('#fakeUpload').click(function(e) {
e.preventDefault();
$('#upload').trigger('click');
});
I cannot say for certain that it isn't possible, but js code to automatically upload a file is very much frowned on, and deliberately made difficult. So I think you are probably on a hiding to nothing with this.
Use the click function it will open the browse window- if that's what you want- see http://jsfiddle.net/CdXP9/5/

html look up field

How to create an html look up field. So, I want to achieve
an html input field, with an icon/button next to it
when user click on it, a pop-up window displays with a search form (I assume this can be created beforehand and hide using javascript)
user apply search, and data is displayed in the same (pop-up) window
when user select a value and apply ok, the field value is copied to the original input filed, and pop-up window closes.
Any sample code? Is there any simple way without using any java script library? or any simple plugin for jquery.
thanks.
It would be possible, but very unwise to do this without any libraries or plug-ins.
I strongly recommend jQuery UI's Dialog widget. It's very simple, well documented and easy to use.
You will probably be interested specifically in how to use the Dialog to display a form. Click the View Source link on that page to see all of the mark-up and code required to achieve that effect.

Categories

Resources