Firefox adds

Question

EDIT: This does not happen due to ajax call. I modified it to use the value from the TinyMCE component for fun, and I get the same.

content = tinyMCE.get('cComponent').getContent(); //content at this point is <p>test</p> valueToDisplay = content; 

If I do this:

 jQuery(selector).html(valueToDisplay); 

I get:

 <p><a xmlns="http://www.w3.org/1999/xhtml">test</a></p> 

---

Has anyone ever seen this before using Firefox 3.6.10 and jQuery 1.4.2, I'm trying to change the link text using the result from a jQuery ajax call.

I get the expected result from ajax call:

 function getValueToDisplay(fieldType){ var returnValue; jQuery.ajax({ type: "GET", url: "index.cfm", async:false, data: "fieldtype="+fieldType, success:function(response){ returnValue = response; } }); return returnValue; } 

If I checked the value at this point, I will get the expected value

 console.log(returnValue) //output this --> <p>Passport Photo</p> 

However, when I use jQuery (selector) .html to insert it inside an existing anchor

I get:

 <p><a xmlns="http://www.w3.org/1999/xhtml">Passport Photo</a></p> 

I tried to figure out where this xmlns anchor was added, but cannot narrow it down to any specific one.

EDIT: I tried to force dataType: "html" in an ajax call ... no change.

Answer 1

Your selector represents what is, or is in the a tag.

More minimal version of your problem:

HTML:

 <a id="test"></a> 

JS:

 $('#test').html('<p>test</p>'); 

result:

 <a id="test"><p><a xmlns="http://www.w3.org/1999/xhtml">test</a></p></a> 

Change the situation so that you don’t put p tags in a tag or do the following:

 $('#test').empty().append('<p>test</p>'); 

Answer 2

I would like to extend the answer based on what is happening and provide a workaround. Running a GreaseMonkey script I tried to change the contents of an element, perhaps without changing it as such, but adding more elements, since the tag had only an IMG inside.

Original:

 <a onclick=something><img src=url></a> 

What I was trying to do was insert a DIV element that would already wrap the IMG and another new second SPAN child element, so the goal should have ended with the following:

 <a onclick=something><div><img src=url><span>text</span></div></a> 

Using the innerHTML property, it will look like this:

 ANode.innerHTML = '<div>' + ANode.innerHTML + '<span>text</span></div>'; 

but instead I got:

 <a onclick=something><div><a xmlns="http://www.w3.org/1999/xhtml"><img src=url><span>text</span></a></div></a> 

Looking at the answers here helped a bit, although there is no real explanation. After some time, I noticed something that does not happen with an example in the question, which now, I believe, is the key to this problem. I was the same as jfrobishow, thinking where this is happening, I thought something was wrong concatenation of ANode.innerHTML.

When answering the original question, narrowing it down to where this happens, note that out-of-nowhere <A> included both IMG and new SPAN nodes, so I was curious that the unwanted <A> added just before how the div element was "built." So, from this example and my next workaround, you can notice that this happens when you insert a new BLOCK node inside the anchor, since both the DIV and P elements (the original example) are BLOCK elements.

(If you don't know what I mean by BLOCK, this is the display property of the http://www.w3schools.com/cssref/pr_class_display.asp element)

The obvious workaround is to replace the type of node you are inserting with a non-blocking element, in my case the problem was the DIV I wanted, but of course it depends on the purpose of your script, most of the things are by design, I put the DIV because I need it, so I fixed it by turning the DIV into another SPAN (which is an inline element), but I still need to behave like a block element, so style is what worked for me:

 ANode.innerHTML = '<span style="display:block;">' + ANode.innerHTML + '<span>text</span></span>'; 

So, obviously, this problem is not from scripts (Javascript for me), but from style (CSS). By the way, this happened in Firefox 3.6.18, noting that this does not happen in Firefox 5.0.

Answer 3

The problem is placing the block elements inside the anchor tag. This is invalid HTML, although most browsers are very good at it.

You just need to use the <span></span> element inside the anchor instead of <div> or <p> .

Answer 4

This is because in <html> you declared the XML namespace (xmlns). If the xmlns anchor doesn't break anything, just leave it there.

Also, do not use async:false to call the callback function on success.

Answer 5

EDIT: Actually, it just fixed a problem with that particular value ... it started from different values, where it was ok.

Somehow this solved the problem.

Modified

 jQuery(selector).html(valueToDisplay) 

to

 jQuery(selector).html( function(index, oldHtml) { return valueToDisplay; } ); 

According to the document, if I read it correctly, it should do the same thing that I do not use oldHtml in this function. ( http://api.jquery.com/html/ ).

From the document: "jQuery will empty an element before calling the function, use the oldhtml argument to refer to the previous content."

Answer 6

Try changing dataType in your ajax call to "text"

Answer 7

Using .append () instead of .html () fixed the problem for me. Never seen this before. Why does he add extra xmlns? I tried changing my dataType to "text", but that didn't work. It really messed up my CSS styles, but using .append () completely resolved the issue. Thanks!

UPDATE I needed to completely replace the contents of my div with the result of the request .ajax () .. append () alone was not sufficient, as it would just add content, so I found another workaround:

First clear the div:

 $("#myDiv").html(""); 

Then add the content using .append ():

 $("#myDiv").append("My content"); 

It is not perfect, but it works.