Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Checking if the body html in an iframe is empty or notI

Status
Not open for further replies.
glimbeek

glimbeek

Programmer
Nov 30, 2009
83
NL
I'm using Joomla and third party content manager which runs on taoj_contentmanager.1.0.4

In the contentmanager a user can create an article which must have a "Introtext" (this is checked by the JCE editor).
They can also fill in a Fulltext, in my case I want to user to always enter a fulltext so I want to create a check to make sure the fulltext isnt blank before saving.

I assumed this wouldn't be to difficult to do with a little bit of Javascript but as always, it seems more difficult then I expected.

In the FORM which handles it all the following Iframe is loaded:

<iframe frameborder="0" id="jxform[fulltext]_ifr" src="javascript:&quot;&quot;" style="width: 100%; height: 137px;"></iframe>

In the iFrame the following code is loaded

<html><head xmlns=" content="IE=7" http-equiv="X-UA-Compatible"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<Loads of javascript files and code>
</head>
<body class="mceContentBody " id="tinymce" spellcheck="false" dir="ltr"><br _mce_bogus="1"></body>

I make sure my own javascript is loaded formcheck.js. As I said my goal is to check if the HTML in the body tag get's changed/isn't empty.

For now though creating an alert that displays the content of the body in the iframe is more then enough...

1 step at a time :)

I tried a lot of different approaches but I ended with this:

function checkForm() {
var form = document.getElementById["jxform[fulltext]_ifr"];
if(form == null) alert('form not found');
}

and this:

function checkForm() {
var form = document.adminForm;
if(form == null) alert('form not found');
var message = document.form["jxform[fulltext]_ifr"].body.innerHTML;
alert(message);
}

The above code doesn't work (obviously), so I'm hoping someone can help me out.

What's the right syntax to "call" the iFrame, it has the following id: jxform[fulltext]_ifr

What's the right syntax to "call/display" the content of a ID element that has square brackets in it's name?
I found the following solution: [jibbering.com...] but I can't get it to work.

With kind regards,

George
 
Sort by date Sort by votes
[tt]function checkForm() {
//what is adminForm? no idea... and what for?
//var form = document.adminForm;
//if(form == null) alert('form not found');

//I break up some objects so that you can do things with them if needed
var oframe=document.getElementById("jxform[fulltext]_ifr");
var odoc=oframe.contentWindow.document;
var message=odoc.body.innerHTML
alert(message);
}
[/tt]
ps: The rest, I cannot comment such as src="javascript..."... Just don't know what they are!
 
Upvote 0 Downvote
Thank you tsuji!

I looked into oframe solutions but they didn't make any sense to me...

I added a simple if to your code:

function checkForm() {
var frame=document.getElementById("jxform[fulltext]_ifr");
var odoc=oframe.contentWindow.document;
if (odoc.body.innerHTML == '<br _mce_bogus="1">') {
var message="Fulltext cannot be empty!";
alert(message);
}
}

Works like a charm!

Thanks for the reply!
 
Upvote 0 Downvote
After some more testing (finally got around to it...)

It works like a charm in Firefox and Google chrome.
IE7 and IE8 however, it doesn't seem to work... It doesn't do anything. No popup, no JS errors?

I am using the following code:

function checkForm() {
var oframe=document.getElementById("jxform[fulltext]_ifr");
var odoc=oframe.contentWindow.document;
if (odoc.body.innerHTML == '<br _mce_bogus="1">') {
var message="Fulltext cannot be empty!";
alert(message);
}
}

The function is loaded by the following line:
<script type="text/javascript" src=" ></script>

And activated by the following:
onMouseOver="checkForm()"

Am I doing something wrong? Do I need to do something special for IE browsers?

George
 
Upvote 0 Downvote
Or I get an error in IE
that says:

Line: 183 (which is the line with the "onmouseover"
Char: 1
Error: Object expected
Code: 0
URL: mydomain.com

But then I reload the page or close it and try again and there's no error but it still doesn't work.
 
Upvote 0 Downvote
What is there in the inline frame? What do you want to check? The conditional seems frivolous. What kind of page in the iframe would show up that kind of innerHTML? and for what finality it is being checked?
 
Upvote 0 Downvote
Hi tsuji,

The code for the Iframe:

<iframe frameborder="0" id="jxform[introtext]_ifr" src="javascript:&quot;&quot;" style="width: 100%; height: 137px;"></iframe>

<html>
<head xmlns=" content="IE=7" http-equiv="X-UA-Compatible"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
Loads of javascript
</head>
<body class="mceContentBody " id="tinymce" spellcheck="false" dir="ltr">
<br _mce_bogus="1">
</body>
</html>

The moment someone types something in the "Fulltext" textarea which loads in the Iframe the InnerHTML in the <body>, the '<br _mce_bogus="1">' is removed and replaced by whatever you type in the Fulltext textarea.

I hope this answers your questions.
 
Upvote 0 Downvote
>if (odoc.body.innerHTML == '<br _mce_bogus="1">')
It should as a rule not be taken for granted the innerHTML reflect faithfully the script. It reflects only the representation of the page as the browser sees it. Hence, it is not safe to compare like that. Instead, we are forced to make the comparison with a uniform case which may or may not be sufficient.
[tt]
if (odoc.body.innerHTML[red].toLowerCase()[/red] == '<br _mce_bogus="1">'[red].toLowerCase()[/red])
[/tt]
But to the extreme case, the use of quote of the attribute's value, and the order of attributes if there are more than one, can neither be assume preserved. So it is very much leaving to the caprice of the chance to make a comparison successful of the kind. It can never be considered robust.
 
Upvote 0 Downvote
And in addition, after typing something in the fulltext and then removing it, the '<br _mce_bogus="1">'is changed to: '<br _moz_dirty="">'

So I need to check for that as well. Can I just add a || in the if statement?

For instance:

if (odoc.body.innerHTML.toLowerCase() == '<br _mce_bogus="1">'.toLowerCase() || odoc.body.innerHTML.toLowerCase() == '<br _moz_dirty="">'.toLowerCase())

Will that work? To make it more robust, can I check for a part of the two strings? For instance just check for "mce_bogus" and "moz_dirty"?
 
Upvote 0 Downvote
I'm completely new to javascript so I'm trying to this 1 step at a time.

using your suggestion:
"if (odoc.body.innerHTML.toLowerCase() == '<br _mce_bogus="1">'.toLowerCase())"

So I get:

function checkForm() {
var oframe=document.getElementById("jxform[fulltext]_ifr");
var odoc=oframe.contentWindow.document;
if (odoc.body.innerHTML.toLowerCase() == '<br _mce_bogus="1">'.toLowerCase()) {
var message="Fulltext cannot be empty!";
alert(message);
}
}

Still doesn't seem to work in IE.

Clearly what I'm doing isn't right way to approach my problem. After reading up on the 'document object model for html' using the link you provided, I'm still lost on how to solve my IE problem. Working out a way to make the right check on the content of the body in the Iframe seems to be the problem for IE. Putting just a simple alert in the function outside of the IF (removing the if all together) works in IE.

I tried:

function checkForm() {
var oframe = document.getElementById("jxform[fulltext]_ifr");
var odoc = oframe.contentWindow.document;
var strlenght = odoc.body.innerHTML.length;
if (strlenght < 20) {
var message = "Fulltext cannot be empty!";
alert(message);
}
alert (strlenght);
}

But I still get an error in IE, it says it still requires an object on line 4 char 3. But char 3 doesn't make any sense to me.
 
Upvote 0 Downvote
After searching some more I think I figured it out:

function checkForm() {
var oframe = document.getElementById('\"jxform[fulltext]_ifr\"');
var odoc = oframe.contentWindow.document;
var strlenght = odoc.body.innerHTML.length;
if (strlenght < 20) {
var message = "Fulltext cannot be empty!";
alert(message);
}
}

Note the extra escape strings for ('\"jxform[fulltext]_ifr\"') seems that did the trick in IE, however this doesn't seem to work in Firefox....
 
Upvote 0 Downvote
What do you get with alert(odoc.body.innerHTML)on ie7 ?
 
Upvote 0 Downvote
Using the following code:

function checkForm() {
var oframe = document.getElementById("jxform[fulltext]_ifr");
var odoc = oframe.contentWindow.document;
alert(odoc.body.innerHTML);
}

I get an empty alert box on IE7
and with FireFox I get:
an alert box with "<br _mce_bogus="1">" in it.

 
Upvote 0 Downvote
Use this.
[tt] alert(odoc.documentElement.getElementsByTagName('body')[0].innerHTML);[/tt]
If it shows, .length shouldn't be a problem.
 
Upvote 0 Downvote
Using:

function checkForm() {
var oframe = document.getElementById("jxform[fulltext]_ifr");
var odoc = oframe.contentWindow.document;
var strlenght = odoc.documentElement.getElementsByTagName('body')[0].innerHTML.length;
if (strlenght < 20) {
var message = "Fulltext cannot be empty!";
alert(message);
}
}

Works in both IE7+8 and Firefox.

Thanks for the support tsuji!

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
363
xwb
xwb
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
322
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
330
malpa
malpa
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
285
Rayj0000
Rayj0000
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
735
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top