I have a div that I'm able to save text to when I click a save button but what I would like is if the text would just automatically save on an onmouseout event. For example:
I have a div and two buttons (Save and Cancel). The user is currently able to mouse over the current text data inside the div, click on the text and they can then edit said text. The only way they can save this text is by clicking the save button. Is there a way to use onmouseout to save the text so that the user simply has to click and edit the text, then click away and have it saved?
The code below is what I have thus far but it just doesn't seem to work. I'm not worried about the save code because I already have that elsewhere. I'm just trying to get it to where I can type in the text, get onBlur to fire, and have the HTML revert back to what it looked like before I clicked the text. As of right now I can click it and the textbox within the div appears but when I click outside of the div, the textbox stays visible. Any ideas?
function setClickable() {
$('#editInPlace').click(function() {
var textarea = '<div onBlur="saveChanges()><textarea rows="3" cols="30">' + $(this).html() + '</textarea>';
//var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
var revert = $(this).html();
$(this).after(textarea).remove();
})
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
saveChanges(this, revert);
});
};
function saveChanges(obj, cancel) {
if (!cancel) {
var t = $(obj).parent().siblings(0).val();
//need some post code for saves
}
else {
var t = cancel;
}
if (t == '') t = '(click to add text)';
$(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
setClickable();
}
I think you want the onblur event as you mentioned clicking outside of the div (not just moving the mouse out):
<div contenteditable="true" onblur="saveContent()">
Edit me and then click or tab out to save.
</div>
Whatever you have for your Save button's onclick event will go in the onblur event of the div. This will just save the content when the element loses focus - it defeats the point of having a cancel button though.
Related
I'm trying to show a textarea element when I click on an input element. The goal is to show the textarea, but when I click anywhere else, the textarea disappears.If I click anywhere on the textarea, it stays visible.
I saw a similar example of one on stackoverflow --> Link to similar question
The method was to add an addEventListener to the html tag by using document.documentElement, so basically the whole page, but I was wondering if there was an alternative? And is it safe to add an addEventListener to an entire page?
The code to addEventListener to entire page:
document.documentElement.addEventListener('click',clickhandler,false);
I'm not trying to be picky either, but I would like to avoid using a timeout on the element
Besides the code above, I first tried using the click event, and everything works fine, but when I click anywhere else the textarea doesn't disappear.
I then tried the focus/blur events, but when the input loses focus, the textarea disappears.
I was thinking of an if conditional for the click function... but I'm not sure how that would work without adding a click event to the entire page...
JSFiddle : http://jsfiddle.net/LghXS/
HTML\
<input type="text" id="email">
<textarea id="suggestion"></textarea>
CSS
textarea{
display:none;
}
JS
var textarea = document.getElementById('suggestion');
var input = document.getElementById('email');
// Using the Click Event
input.addEventListener('click',function(){
var display = textarea.style.display;
if(display === '' || display === 'none'){
textarea.style.display='inline-block';
}else{
textarea.style.display='none';
}
});
// Using the Focus and Blur
/*
input.addEventListener('focus',function(){
textarea.style.display='inline-block';
input.addEventListener('blur',function(){
textarea.style.display='none';
});
});
*/
Sooo, any ideas?
I'm trying to create an indicator that pops over whenever the input text is focused. The content of the popover is html.
JS
$('.validate').popover({
html : true,
trigger : 'focus',
content : function() {
return $('#popover-content').html();
}
});
On Change
$('.validate').change(function() {
var eval_me = $('.validate').val();
$('#sample').html(eval_me);
});
The HTML
<div class="input-prepend">
<span class="add-on"><i class="icon-lock"></i></span><input type="text" class="validate" data-placement='right' title="Hello World">
</div>
<div id="popover-content" style="display: none">
<div class="row"><label id="sample">This is your div content</label></div>
</div>
The content inside the label gets updated, but the popover isn't. Dismissing the popover and focusing the input text again (to open it) shows the updated label.
Any help is appreciated :)
Two things: the change event doesn't fire until the input loses focus, you probably want to bind the update code to the keyup event. Second, though that code is updating your sample div, the popover is just getting that data when the popover is triggered; if you want to update the popover's sample div, you need to handle that as part of the keyup event handler. Try changing that event handler like so:
$('.validate').keyup(function() {
var eval_me = $('.validate').val();
$('#sample').html(eval_me);
$('.popover #sample').html(eval_me);
});
and you should be good. Check the fiddle.
Edit: actually playing with it a little, it seems like keyup is a better trigger than keypress, otherwise the update trails the input by one char, but I'm probably just missing something there. Changed the code above accordingly.
I am trying to add some content into a textarea after the user has clicked on the "Add" button but nothing is happening. Is there anything I am missing?
Below is the jquery code which adds the selected content:
$(".add").on("click", function(event) {
console.log("clicked");
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets oru data.
if ($('.activePlusRow').length > 0) {
$('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
});
$(".plusrow").on("click", function(event) {
//adding a unique class for the purpose of the click.
$(this).addClass('activePlusRow');
});
Below is the textarea:
$('.questionTextArea').each( function() {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
});
EDIT:
You can use the application to see for yourself. Below is how to use app:
When you open the app click on the "Green Plus" button. A modal window will appear.
In the search box enter in "AAA", then click "Search".
Results of your search is displayed. Here is where the problem is. What I want is that when the user clicks on an "Add" button to add a "Question", it should close the modal window and add the "Question" into the top textarea, but it is not doing this.
Textareas unlike inputs don't use the value attribute to store there data, which is probably why attr('value', 'bla') is failing.
I believe the .val() method will automatically take this in to account and thus work anyway.
Try somthing like:
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]").val($this.val());
I'm trying to create an Ajax enabled webform, and have created a simple page. On the page, I have a div that contains the value I wish to edit.
I've got working javascript to add a text input box around the contents of the div, complete with a Save button to post back to the web server, but unlike the example I'm following, I don't want a cancel button, instead I want the cancel operation to be triggered by the input box losing focus.
I've added a onblur event to the text input box to cancel the edit operation and return the form back to it's original unedited state (and not save the change).
The problem I'm having, is that when I click the 'Save' button, the onblur event of the text input box is also triggered. How can I stop this happening?
The edit function (called when a user clicks on the text to be edited) is as follows:
function edit(obj)
{
Element.hide(obj);
var textarea = '<div id="'+obj.id+'_editor"><div class="fieldvalueedit"><input type="text" id="'+obj.id+'_edit" name="'+obj.id+'" rows="1" size="64" value="'+obj.innerHTML+'"></div>';
var button = '<div class="fieldvaluebuttons"><input id="'+obj.id+'_save" type="button" value="Save"/></div></div>';
new Insertion.After(obj, textarea+button);
document.getElementById(obj.id+'_edit').focus();
Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
Event.observe(obj.id+'_edit', 'blur', function(){cleanUp(obj)}, false);
}
Instead of using an onblur event on input you can register an onclick event on the document that resets the textareas state, then cancel the propagation of this event when the save button is clicked (you will want to apply this to the text area as well).
Event.observe(obj.id+'_save', 'click', function( e ){
e.stopPropagation();
saveChanges(obj);
}, false);
Event.observe(document, 'click', function(){cleanUp(obj)}, false);
I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.
The HTML looks roughly thus:
<button1>Show/Hide</button>
<form>
<input class="hidden" type="text" />
<button2 type="submit">Submit</button>
</form>
<script type="text/javascript">
$("button1.someSelectors").click(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
</script>
I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?
I tried:
$("input.someSelectors").blur(function() {
if (!$("button2.someSelectors").is(":focus")) {
showHide();
}
});
but it hid the form elements even when I tried clicking button2.
An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added
if(!$("button2.someSelectors").click()) {do the hide part of the function}
to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?
--Edit:
var showHide=function(item, category) {
if($("input."+item+"."+category).hasClass("hidden")) {
$("input."+item+"."+category).show("fast").focus().removeClass("hidden");
$("button.buy."+item+"."+category).show("fast");
$("button.purchase."+item+"."+category).text("Never mind!");
} else {
$("input."+item).hide("fast").addClass("hidden");
$("button.buy."+item).hide("fast");
$("button.purchase."+item).text("Purchase");
}
}
blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this
$("button1.someSelectors").mousedown(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})