Results 1 to 4 of 4

Thread: Invalid source HTML for this operation , Error In IE

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    153

    Default Invalid source HTML for this operation , Error In IE

    Does anyone know what this mean?

    "Invalid source HTML for this operation"

    My page works great in Firefox, but in IE not.

    It appears to have something to do with Resizable , but not sure.

    Thank you.


    Link: http://shopchmi.com/NOTUSED/PDI/editor.htm

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    Might be something odd about the IMG tag you're appending after IE6 shows the yahoo image, but IE7 doesn't even do that. Stop in the debugger and look at the generated HTML - mabye the IMG tag needs a valid terminator.

  3. #3

    Default

    It's probably nested within a P tag (I think that's enough to cause the problem, some other forums indicate the problem is a P within a FORM).

    Basically in IE you can't insert a block element into a non-block element using innerHTML. But it's not as consistant as that. Inside a form it get's muddy. You can insert a div for the error advice but You can't insert a div inside a p inside a form element, it'll throw that error.

    So I guess Bruno was on the right track. Don't use P tags inside a form element.

    http://tetlaw.id.au/view/blog/really...ith-prototype/

    Confluence wiki does this, and the code that does it doesn't appear to be available for modification, like a template, so you have to move the target out of the P.

    You have to move the target out of the P to a sibling DIV, before calling EXT:

    Code:
    	 			 //have to move this out of flow before processing due to IE bug?
    				//do some kind of positioning somehow initially over the flow in appropriate place
    					var the_p_node = images[i].parentNode;
    					var parent_of_p_node = the_p_node.parentNode;
    					var new_sib_div = document.createElement("div"); 
    					parent_of_p_node.insertBefore(new_sib_div, the_p_node)
    					
    	                new_sib_div.appendChild(images[i]);
    					
    	                var custom = new Ext.Resizable(images[i], { ...
    It may work to create a DIV within the P and move the image to there. Seems to me I did that and it worked, but can't be sure at this point and I don't have time to verify, and time to move on...

    This is still a problem encountered in the Ext JS 2.0.2 timeframe (using Ext 2.0.2). Ext should test for the condition of a parent P and shift the target element over a little.

  4. #4

    Default

    Rich above is certainly on the right track!
    Unfortunately though, what Bruno says is bad advice.

    You should be using P tags inside your FORM element because that's the best way to present your form so you can space out your labels, descriptive texts and input fields neatly. That's not where the problem exists.

    The problem is that P tags are paragraphs and it is rightly assumed that anything inside a paragraph should be an inline element such as STRONG, SPAN, EM, IMG,INPUT,LABEL,ABBR etc. Things you would expect to go inside a paragraph of text that don't try to create a new blocked structure. A paragraph is a paragraph, it's not a building block structure like a DIV or TABLE (Tables shouldn't be used for that anyway but hey-hum, people do it).

    Anyway! As with alot of WYSIWYG editors, you'll probably find that your JS code is trying to dynamically insert HTML inside a location that is a P tag just like Rich explains above.

    It's important to note here that IE is not doing anything wrong. It's doing exactly what it should be doing to make sure you can't dynamically create invalid HTML in the same way a W3C validator will check things.

    Firefox on the other hand will let you insert all sorts of crappy dynamic HTML inside elements that it will highlight as being a problem on its error console if you'd manually coded the HTML. Shhh though, we can't run Firefox down can we... that wouldn't be cool. *Add sarcasm here*

    On the other hand you could always do what all the dumb impatient programmers do and just stick on your website "Doesn't work on IE because I can't be arsed to learn how things work" or simply "Not optimised for IE" if you want to cover up that fact. But I'm sure you want to fix it as being a dumb programmer and cutting out your potential IE user audience is just silly.

    Irony isn't it, everyone moaned about IE taking over the market and forcing users to use certain things and now Firefox developers say "Get Firefox if you want to use my site because I didn't fairly make it work on all browsers.". But that's another subject I'm sure.

    But yes, that's your reason.
    Hope that helps you

Similar Threads

  1. Invalid argument in Ext.util.CSS when creating CSS in IE6
    By dngrmoose in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 14 Apr 2009, 5:21 AM
  2. how to operation database
    By a9527007 in forum Community Discussion
    Replies: 0
    Last Post: 21 Mar 2007, 5:22 PM
  3. help!, grid error: invalid flag after regular expression
    By seldon in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 5 Mar 2007, 4:17 AM
  4. ImageChooser Source Help
    By FuryVII in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 28 Feb 2007, 11:46 AM
  5. basicdialog without buttons -- invalid body size & posit
    By vtswingkid in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 23 Feb 2007, 7:39 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •