My co-worker and I have spent about an hour on this now and we can't figure it out. This works fine for us in Chrome and Firefox. This is basically a dumbed down version of it:
http://jsbin.com/osebuc
It works fine in this test case, but in IE8 on our real thing it's appending the HTML. We literally just have $('.panda').html(someHtml) in the code, but in IE, instead of replacing the HTML it appends the HTML each time.
We also tried $('.panda').empty().html(someHtml) in IE, but then IE seems to "lose track" of .panda and doing a console.log($('.panda').length) returns 1, then another button click (back to the original HTML), returns 0.
Has anyone else seen this? Anyone have any ideas why this would happen?
Why:
My co-worker and I are trying to make some forms look prettier (beta form) without touching the original HTML (we can't) but have a way to go back to the original form (classic) if they click a button. To do this we cache the original HTML in a var, then we build the new, beta HTML, save it to a var, and then do the example above in a toggle.
I just had the very same issue: .html() in IE7 / IE8 was appending.
I managed to sort it by doing the following:
$('panda').html("").html(someHtml);
Basically, manually set it to blank, and then add the code from the ajax call.
Although, I persnally prefer jQuery, have you tried plain-old javascript?
$('.panda')[0].innerHTML = "";
$('.panda')[0].innerHTML = "some html";
had the same problem. Be sure your HTML is valid. I had a different open and closing tag ^^
Related
I am struggling to get links to become clickable when using JavaScript innerhtml, or even jQuery html or append.
I have tried following this jquery .html() VS innerHTML() and asking a number of questions, but it seems all suggestions have no worked.
How can I put a link using this?
innerHTML("<a href='http://www.google.com'>google.com</a>");
and onclick
innerHTML("<a href='#' onclick='loadlink('http://www.google.com');'>google.com</a>");
I have tried to do it both ways, and it just is not working.
.html() is a utility function provided by jQuery, so if you are using a jQuery wrapper to set the value then you need to use it
var el = jQuery('#myelementid');
el.html("<a href='http://www.google.com'>google.com</a>");
.innerHTML is a property of the dom object, so if you have a dom element reference then you need to use it. Note: It is not a function it is a property
var el = document.getElementById('myelementid');
el.innerHTML = "<a href='http://www.google.com'>google.com</a>";
The issue was z-index it seems that you can't have a z-index:-1 as it will not allow you to click anything in that div, removing it fixed my issue, so the issue was not JavaScript at all but rather CSS. It is interesting and a good note, not to sometimes second-guess yourself when you know that your code is not wrong, but to strip it back and look at the CSS and other parts of your site.
It took three days for me to stop thinking about the JavaScript. How I came about this, was because iOS could not debug the issue; I went to Chrome and coded the part in question, and it worked fine, once I added the same styling and CSS it stopped working, removed a few divs and it worked again, so the only thing to look at was the css, i could not see anything wrong, but then I thought, wait a second what does z-index do? it moved the div in front of another div, -1 could mean that it is behind the body, and there for it can be seen, but not click.
It was the only thinking I could come up with and it fixed the issue.
I'm working on a website where one of the pages has a list of articles and an option to filter these based on certain keywords. All the keywords are links and listed to the right of the list. In order to get the correct URL's, the links on each keywords hold part of the ajaxURL that would give the correct response for the given keyword. In addition, I got a script that adds a 'click'-event to all links and appends the last required parameters to the ajaxURL. I "reload" the list by using jQuery's 'load'-function, like this:
$('a.keyword').click(function(event){
event.preventDefault();
// Other logic
$('.list').load(ajaxURL);
}
However, when using the filter in IE9 the content of 'ajaxURL' is loaded into the entire page. That is, the entire page is replaced with the resulting list. I figured this could be a problem of only using 'event.preventDefault()' on the 'click'-event I got on each link, so I added a variety of alternatives:
event.stopPropagtion()
return false
if(event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
After hours of debugging, trying different combinations of these and trying IE7, IE8 and IE9 using the developer tool provided in IE, I realized that the first time I open the page with IE9 (without opening the developer tool), I get the problem described above. However, when I open the developer tool and selects IE8 it all works perfectly! The same happens when I change it back to IE9! (In this case I used all the alternatives above.)
For some reason, these transitions make it work! I can't figure out how to fix this.. I can't force users to open developer tool and switch mode to make i work. :P Any ideas? Does the developer tool add something that could do this?
I appreciate any help on the matter! :-)
PS. It works just fine in Chrome, ++.
The only thing I can think of is having console.log() in your script. That statement throws a Javascript error in IE up until you open the Developer Tools.
If that occurs earlier than the code you provided in the question then the rest of your script probably won't get evaluated, and your event handlers won't be bound at all, causing the links to just be regular links.
I'm having an issue where, periodically, I am unable to type into any input/textareas on Internet Explorer. I'm working primarily with IE9 at the moment.
When I click on an input, the JS click handler (which empties placeholder text) runs, and the active css is applied. However, the cursor does not appear and I can't type. If I tab to an input field, and start typing, everything starts working again.
I have a fair bit of JS running, but no errors running. I suspected TinyMCE had something to do with it, but it also happens when there are no editors on the page, so that doesn't seem to be it either. If you don't have an answer, I'd love an idea of what could be happening here that I could look into more, since I'm a bit stumped.
I eventually solved this. It was a strange and nasty issue with TinyMCE, where TinyMCE was being destroyed while the cursor was inside the main window. Fix was to explicitly focus out before it gets destroyed.
I had a similar issue once with I.E. where I was using .split to make sure the input box was not empty when gaining focus. However, I.E. did not support .split and would crash my js. I had to write my own and it ended up working out. Not sure if this in any way applies to what you are doing, but I thought I would just throw it out there.
Since you have lots of javascript on the page, a likely reason would be either a naming conflict or even more likely a js crash. Traverse your code for the 200th time.
I am developing Javascript app that will wrap every line of text entered inside iframe (designmode) with P (or div) like it happens by default in IE.
For now I am not pasting my code because I just started, the first problem is when i type some text in firefox and even before I click enter or calling any function firebug inserts
<br _moz_dirty="">
under the entered text.
Why? How can I prevent it?
If you still need my code please tell.
As the _moz_-prefix suggests, this is a Mozilla-internal property. It isn't inserted by Firebug, but rather by the core editor functionality in Gecko. You can't prevent it; ignore it or work around it.
#myEditableDiv br {display:none;}
It's something Mozilla uses to prevent empty containers collapsing and occasionally inserts at seemingly random times too.
The question is, if they knew it was a dirty hack then why did they do it?
The _moz_dirty attribute is used to indicate that the node needs to be pretty-printed when the document is saved, although it shouldn't appear in web pages, only in SeaMonkey Composer and SeaMonkey and Thunderbird's HTML Message Compose.
The Gecko editor used to put it there because it needed it to give it somewhere to put the cursor. I believe this is fixed in Firefox 4.
My HTML is something like this :
<select>
<option>ABC (123)</option>
<option>XYZ (789)</option>
</select>
What I'm trying to do is: using JQuery and a regex, I replace the "(" with <span>( here's my JQuery line:
$(this).html($(this).html().replace(/\(/g,"<span>("));
It's working as intended in Firefox, chrome and safari, but (as usual) not behaving correctly on IE6/IE7 (the text after "(" just get removed)
Any thoughts ?
PS: I'm doing it this way because I need "(number") to be in a different color, and <span> in a <option> is not valid.
I don't think it's the regex breaking. The below works fine in IE7:
alert("(test".replace(/\(/g,"<span>("));
What's probably happening is that IE6/7 have no clue how to render a span inside an option and just fails to display anything.
You're saying that span in an option is not valid, and yet that's exactly what you're trying to add. Invalid code isn't prettier just because it happens to be valid at load-time, if you know you're going to mess it upp later. So really, if that's your only concern, do add this span declaratively in your HTML, rather than injecting it later.
But if you want to fix this, I think it might help if you rewrite the regex to cover the entire tag. In a lot of cases, IE doesn't let you just change the HTML to whatever, but will use its own internal representation to fix up the code, according to its own preferences. When you write a table, for instance, IE will always internally infer a tbody, even if there isn't any in the code. In the same manner, if you inject a <span> and there's no </span>, IE might insert one by itself. To get around this, make sure you inject the code in its entirety in one go:
$(this).html($(this).html().replace(/\((.*?)\)/g,"<span>($1)</span>"));
I don't have IE7 but in IE6 the following
javascript:"<select><option>ABC (123)</option><option>XYZ (789)</option></select>".replace(/\(/g,"<strong>(")
yields
<select><option>ABC <strong>(123)</option><option>XYZ <strong>(789)</option></select>
And gets correctly displayed (aside that <strong> has no effect). Also works fine when using <span> instead of <strong>