Menu
I have a jwysiwyg content editor control on my page. The control works by creating itself in an iframe which has a full html page code within it.
I wish to detect if there has been a change or keyup so I can use our "indicate the record needs to be saved" code. We have input boxes and this work fine, just this 3rd party editor control is giving us problems.
Here is what the page source looks like:
<div id="this_is_our_div_Container">
<div class="wysiwyg">
<iframe id="f_Body-wysiwyg-iframe">
<html>
<body style="margin: 0;" class="wysiwyg">
I just typed this now!</body></html>
</iframe>
</div>
<textarea class="wysiwyg" cols="20" id="f_Body" name="f_Body" rows="2"
style="display: none;"></textarea>
</div>
See that the body tag contains the changes in real time.
With these SO questions...
jQuery 'if .change() or .keyup()'
https://stackoverflow.com/a/1639342/511438
I have tried the following in document.Ready:
$('iframe').contents().find('body.wysiwyg').live('change', function (e)
{
alert('testing');
});
$('iframe').contents().find('body.wysiwyg').live('keyup', function (e)
{
alert('testing');
});
$('iframe > *').bind('keyup', function (e)
{
alert('testing');
});
Hopefully this printscreen will help.
LARGER
432
You seem to be along the right track.
I wonder whether this would work for you:
$('elementSelector', $('iframeSelector').contents()).on('keyup', function(e) {
alert('testing');
});
So in your case I suppose:
$('body.wysiwyg', $('iframe#f_Body-wysiwyg-iframe').contents()).on('keyup', function(e) {
alert('testing');
});
Although using the code in this answer depends on using version 1.7 or higher of jQuery.
If you are using an older version of jQuery, you could make use of live which is deprecated as of version 1.7, or perhaps delegate. I'm not too sure. You're best bet may be to use the latest version of jQuery with .on() and .off().
128
I am not sure if you have access to edit the inner contents of the iframe but I had a similar issue and this worked for me:
Inside the iframe body:
$(document).ready(function(){
$("body").live('keyup', function(){
window.top.window.iChanged();
})
});
Within the content of the parent html page:
function iChanged(){
alert("I changed");
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
