jQuery contentEditable not working - Internet Explorer 8 - edit table items - javascript

I need to get this code working in Internet Explorer 8:
http://jsfiddle.net/tYtQV/5/
$("tbody tr td").bind("click", onClick);
function onClick(e) {
if(e.currentTarget.contentEditable != null)
{
$(e.currentTarget).attr("contentEditable",true);
}
else
{
$(e.currentTarget).append("<input type='text'>");
}
}
It works fine in Firefox or Chrome but not in IE8.
I tried changing bind() to live() but that doesnt have any effect - when I click on the list item it just doesnt do anything (the event handler is called, though)
If I change contentEditable to all lowercase "contenteditable" it appends text forms to the element every time it is clicked, which is not what I want.
The purpose of this code is to make table items editable. Any ideas on how to fix this?
Thanks in advance!

TD-elements cannot be set as contenteditable. Check this page for reference: http://msdn.microsoft.com/en-us/library/ms537837(v=vs.85).aspx
You could add an empty div to the cell and make that one contenteditable

the only problem with adding contenteditable in a div is the placeholder issue because the area will be editable only to that specific region. If you have a placeholder and remove the placeholder to write more, it removes the ability to edit, so make sure to handle that.

There are many elements in IE, which can't have contenteditable set directly. However, you can wrap the whole table into a content editable div.
<div contenteditable="true">
<table>
...
</table>
</div>

Related

Getting the current div id in content-editable div(specific)

I am recently working on one of my projects and currently i am stuck in some problem. Well, i have made a content editable div where the user can type its input. This content_editable div contains several div's in which user has to type. I tried document.activeElement but it gives me the content_editable div not the specific div and that the one with id second_div
I want to know how to find that specific div in content_editable div where user is type.For example:-
<div contenteditable="true" id="content_editable_div">
<div id="first_div">
I am the first div
</div>
<div id="second_div">
I am the second div and i want to know if the focus is on me
</div>
</div>
My Javascript:
window.onload = function () {
getDivwhohasfocusincontentedtiablediv(); // Something like that
};
I can use jquery but only at the last choice. I want to use only javascript for this purpose.Please help me to solve this, i didn't find solution for this all the net ( it could be that i haven't searched carefully). Thanks in advance
One possible solution is to attach an Event Listener on each inner div to listen for "focus" event. However I found out that not all elements emit "focus" events.
JQuery docs says:
The focus event is sent to an element when it gains focus. This event
is implicitly applicable to a limited set of elements, such as form
elements (input, select, etc.) and links (a href). In recent
browser versions, the event can be extended to include all element
types by explicitly setting the element's tabindex property. An
element can gain focus via keyboard commands, such as the Tab key, or
by mouse clicks on the element.
Adding tabindex attribute to each inner div will make it possible to listen to focus events.
Example at JSFiddle. Note: I wrote the code in JQuery but it can easily be written in JS.
You can find focus element in js using this,
var focused = document.activeElement;
What about this ,
<div contenteditable="true" id="content_editable_div">
<div id="first_div">
First Div
</div>
<div id="second_div">
Second Div
</div>
</div>
$(document).ready(function () {
function onMouseUp(e) {
console.log(this.id);
}
document.getElementById("first_div").addEventListener("mouseup", onMouseUp, false);
document.getElementById("second_div").addEventListener("mouseup", onMouseUp, false);
});
Demo Here JS FIDDLE
to get specific div
in Javascript you can use
document.getElementById("second_div")
or using Jquery
$("#second_div")
make sure your id was unique. This is the fastest way to find obj in any browser.
now for getting getting the active div. why not put specific event whenever the div was clicked or edited. like:
$("#second_div").click (function (){
//raise flag or something
currentDiv = "second_div";
})
function getCurrentDiv()
{
//do something in currentDiv
}
or try also explore other event such as, on mouse over, on mouse leave, etc.
i hope that might help. other wise, please elaborate your question if I missed something.

Drop down list doesn't change in IE

This is the url of my page : http://www.animalswecare.com/Ads/postad.php
There are two fields category and sub category , when category is selected , sub category changes respectively , it is working fine in google chrome , but it has problem with IE, in IE subcategory does not change when category is selected.
I encourage you to use jQuery for things like that because they make sure it will work accross almost every browser. Its very easy.
http://api.jquery.com/jQuery.ajax/
You are giving id "txtHint" to the select element which is wrong, assign this id to its parent element i.e; TD like
<td id="txtHint"><select name="sub_category"></select></td>
you cannot set innerHTML for a select.
instead, you create a <div id="txtHintWrapper"></div>
when you do the innerHTML update, include <select></select> there
http://support.microsoft.com/kb/276228
There's a javascript error in this line:
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
It's a known bug.Take a look at this MSDN bug report for a workaround: BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object.
This question talks about it too, and might also be useful: Javascript - innerHTML not working with HTML select menus.
But seeing that the Ajax Request returns the whole <select> tag, you should be replacing the parent <td>'s innerHTML, not the <select>'s, as #dev just pointed out.

IE7 & 8 add unwanted drop shadow to a table inside of another table

I have the follwing jsfiddle http://jsfiddle.net/PrkUW/
There you will find a list-table which has a drop shadow filter applied to it. Inside one of it's rows I have another table, inner-table, which doesn't have any drop shadow declared on it. The problem is that both IE7 and 8 add drop shadow to the inner-table and to it's parent row, and I can't remove it using JS or CSS.
I've tried $('.inner-table').css('filter', '') too but can't get it to work. And as you can see on IE7 the inner-table column's width are a total mess, and borders appear without any declaration.
Does anybody have a suggestion on how to make it look right?
Thanks!
can u check with
$('.inner-table').css('filter', null)
or
using
.removeAttr('class');
jQuery remove attribute

Keypress event on nested content editable (jQuery)

I have a CONTENTEDITABLE div and inside that div I have a CONTENTEDITABLE span, what I want to do is being able to handle the onkeypress event on the inner SPAN.
So, the javascript code would be:
$(function()
{
$('#someid').keypress(function(event){alert('test');});
});
And the HTML content would be:
<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>
If you test it on a browser you'll see you won't see the 'test' dialog when you press a key over Some TEXT, I know the problem is that the event is being triggered in the parent div, so the SPAN doesn't get the event, also because it doesn't have the focus. So I'd like your help to find a solution for this.
The exact code you posted in your question seems to work just fine at http://jsfiddle.net/gaby/TwgkC/3/
Tested and working with FF, Opera, Chrome, Safari, IE8 ..
only change is the removal of the comment which in its current form creates a syntax error.
The #someid need to have focus in order for the keypress to work.
If you want your code to give focus to the element right after creating it, use the .focus() method.
function AppendSpan()
{
$('#mydiv').append('<span id="someid" contenteditable="true">Some TExt</span>');
//Then I want to handle the keypress event on the inserted span
$('#someid').keypress(function(event){
//do something here
alert(this.id);
}).focus();// bring focus to the element once you append it..
}
Update
Two ways to handle this (the fact that there are nested contenteditable elements), not sure if any is acceptable for your case but here they are..
wrap the new contenteditable span in another one, which is set to have contenteditable="false"
(demo: http://jsfiddle.net/gaby/TwgkC/10/)
make #mydiv to not be contenteditable once you add the span..
(demo: http://jsfiddle.net/gaby/TwgkC/11/)
You might be better to bind the keypress event to the #mydiv element like this:
$('#mydiv').delegate("span", "keypress", function(){
console.alert('A key has been pressed: ' + this.id);
});
On further investigation though, it seems that DOM elements such as regular spans and divs are incapable of receiving focus. You may be able to get around this however, by adding a tabindex attribute to each span.

jquery set focus on dynamic content?

In jquery I've appended a <li> element to an unordered list.
How do I focus on the newly created <li> ?
If I do the following:
$("ul").append('<li><input type="text" value="Hi!"></li>');
$("li:last").focus(); //doesn't work because new <li> isn't in dom yet
the focus doesn't work, as noted above.
I know jquery 1.4.2 has a live() event handler which allows you load event handlers to dynamically added elements, but I'm not sure what I'm doing wrong:
$(document).ready(function () {
$('li').live('load', function () {
alert("hi!");
$("li:last").focus();
});
});
You can only set the focus to elements which can hold the focus. By default a list item cannot. This is why your first example fails, not because it isn't in the DOM (it is in the DOM, that is what append does)
In general you should use elements designed to hold the focus (i.e. set the focus on the input not the list item). You can also (but this is less backwards compatible and less logical) use HTML5's tabindex (probably setting it to 0).
onload will not work because list items do not load external content.
You can try this, $(YourElement).trigger("focus").
This is an old post I know, but a simple way to solve this issue is to create a text input in your HTML and set its CSS to "display: none;". On the LI's click event, set the focus in this input and listen to its keypress events.
I've done it and it works like a charm.

Categories