Firefox add

问题:

EDIT: This isn't happening because of the ajax call. I changed it to use a value from a TinyMCE component for fun and I get the same thing.

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

If I do:

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 am trying to change a link text using the result from a jQuery ajax call.

I get the result expected from the 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 check the value at this point I get the expected value

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

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

I get:

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

I have been trying to figure out where that xmlns anchor is added but can't narrow it down to anything specific.

EDIT: I have tried forcing dataType:"html" in the ajax call...no change.

回答1:

Your selector represents something that is, or is in an a tag.

A much more minimal version of your problem would be:

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 things around so you aren't putting p tags in an a tag, or do the following:

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

回答2:

I would like to extend the answer, as of why is happening, and provide a workaround. Doing a GreaseMonkey script i was trying to change the content of an element, perhaps not changing per se but adding more elements as the tag had only an IMG inside.

Original:

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

What i tried to do was to insert a DIV element that would wrap the already IMG and another new SPAN second child, so the objetive was to end up with this:

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

Using the innerHTML property it would be 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 did help a bit although there's no real explanation. After a while i noticed something that does not happens with the example in the question, which now i believe is the key to this issue. I was the same as jfrobishow thinking where was it happening, i thought there was something wrong concatenating the ANode.innerHTML.

Answering, at the original question, the part of narrowing it down to where does this happens, notice that the out-of-nowhere <A> was enclosing both the IMG and the new SPAN nodes, so this made me curious, the unwanted <A> was being added just before the DIV element was "built". So from this, the original example, and my following workaround you can notice that this happens when you insert a new BLOCK node inside an Anchor, as both DIV and P (original example) elements are BLOCK elements.

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

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

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

So, plainly, this problem is not from scripting (Javascript for me) but from style (CSS) stuff. BTW, this happened at Firefox 3.6.18, notice this does not happens at Firefox 5.0.

回答3:

The problem is placing block elements inside an anchor tag. This is not valid HTML, even though most browsers will parse it fine.

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

回答4:

This is happening because in your <html> you declared a XML Namespace (xmlns). If the xmlns anchor is not breaking anything, just leave it there.

Also, don't use async:false, make a callback function to be called on success.

回答5:

EDIT: Actually that just fixed the issue with that particular value... it started happening on other values where it used to be fine.

Somehow this fixed the issue.

Changed

jQuery(selector).html(valueToDisplay)

to

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

According to the doc, if I read it right it should be doing the same thing as I am not using oldHtml in the function. (http://api.jquery.com/html/).

From the doc: "jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content."

回答6:

Try changing dataType in your ajax call to "text"

回答7:

Using .append() instead of .html() fixed the issue for me. Never seen this before today. Why is it adding the extra xmlns? I tried changing my dataType to "text" as well, but it didn't work. It was really messing up my CSS styles as well, but using .append() completely resolved the issue. Thanks!

UPDATE: I needed to completely replace the content of my div with the result of an .ajax() query. .append() by itself wasn't sufficient, as it would just add to the content, so I found another workaround:

First clear the div:

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

Then, append the content using .append():

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

It's not perfect, but it works.