Adding additional code on load

[GoogleCodeExporter]

This is not a bug. 

I am trying to integrate this code with another script and have the hardest 
time figuring out what gets in a way of what.

I have a code that allows to upload images. I adding this modal code by using 
id="preview" and once the image is uploaded it pops-up modal box with image 
preview. However, now I am trying to add a script that will allow cropping this 
image. The other script needs to include couple JS files and a CSS file.

I have included current image withing a <div> which contains the form required 
to crop, and the form shows when the image loads just fine, but I can't seem to 
be able to make the includes to be added with HTML. It almost seems that some 
code is removing anything pointing to JS.

I moved the id="preview" from <img src> tag into surrounding <DIV>. Even tried 
using class="nyroModal" instead of ID tag but to no avail. Lost completely. Any 
direction will be highly appreciated.

Thanks.

Original issue reported on code.google.com by dodgingspam@gmail.com on 5 Oct 2010 at 4:51

[GoogleCodeExporter]

Never mind, I don't think the issue is with nyromodal. Great plugin!

Original comment by dodgingspam@gmail.com on 5 Oct 2010 at 6:15

[GoogleCodeExporter]

if the script that should be loaded are in the page which are loaded by 
nyroModal, add rel="forceLoad" on your script tag.
If it's still not working, try to add rev="shown" on them to execute them later 
on the process.

Original comment by nyro...@gmail.com on 6 Oct 2010 at 7:16

[GoogleCodeExporter]

Sorry, I'm still struggling with this. Even after I tried to include each of 
the tags that you suggested, when I select the source of the modal I can see 
the link to CSS file included but not the one to JS. I also have a JavaScript 
code inline, right below CSS included and while it neither shows in page source 
not nor does it work because the JS class is not included, one of the functions 
that validates on click actually does work. I don't really understand why...

Is there a way I could show you the implementation on the site?

Thanks. 

Original comment by dodgingspam@gmail.com on 6 Oct 2010 at 1:21

[GoogleCodeExporter]

post a link where we can see the page.

Original comment by nyro...@gmail.com on 6 Oct 2010 at 1:26

[GoogleCodeExporter]

Could it also be with how I call the modal? I upload an image and when it is 
uploaded it appears in a <div id="imgCrop"> and the page where submit form with 
upload request has the following code that pops-up the modal with uploaded 
results:

$(document).ready(function(){
    $("#imgCrop").nyroModal();
});

I'm just getting to know JQuery and this code is definitely out of my league...

Original comment by dodgingspam@gmail.com on 6 Oct 2010 at 1:26

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

http://www.slatecast.com/home/slatecastcom/incl/js/JQuery/jcrop/js/jquery.Jcrop.
js doesn't exist on your server.

First that on the first time.
Then, you should include jQuery at the top of the page loaded for the upload to 
avoid some JS aerrors

Original comment by nyro...@gmail.com on 6 Oct 2010 at 2:18

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Still have a problem on your path, looks like there is an erronous character at 
the end of the path...

Original comment by nyro...@gmail.com on 6 Oct 2010 at 2:32

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

OK, found the reason for mysterious erroneous character. I was missing " after 
src=

Now, that I don't get errors the script is still not working... I'm bummed...

Original comment by dodgingspam@gmail.com on 6 Oct 2010 at 3:52

[GoogleCodeExporter]

Your problem:
You're using the uplaod feature of nyroModal. To make this feature possible, 
nyroModal has to post the data in an iframe and then, once the page is loaded, 
retrieve all the data contained in there, and then show it in HTML by copying 
the data.
When this copy occurs, the binding that was previously done inside the frame 
are lost.

To solve your problem, you will have to create a new PHP page to show the crop 
feature, independant from the upload page.

On the upload page, you'll add a code to open a nyroModal with this new page.
This code will looks like (not tested):
parent.$.nyroModalManual({url: 'YOURULR'});

Hope it will works.

Original comment by nyro...@gmail.com on 7 Oct 2010 at 12:18

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

OK, I might've come up with a work around. I realized that my crop 
functionality is not being initialized onload. Whatever the reason may be... So 
I replaced this:

jQuery(window).load(function(){
    jQuery("#cropbox").Jcrop({
        onChange: showPreview,
        onSelect: showPreview,
        aspectRatio: 16/9,
        onSelect: updateCoords
    });
});

with this:

function jCropInit(){
    jQuery("#cropbox").Jcrop({
        onChange: showPreview,
        onSelect: showPreview,
        aspectRatio: 16/9,
        onSelect: updateCoords
    });
}

and added a call to new function;

<img src="'.$imgSrc.'" id="cropbox" onMouseOver="return jCropInit()">

Original comment by dodgingspam@gmail.com on 7 Oct 2010 at 4:25

[GoogleCodeExporter]

Oh, premature celebration. In IE everything is broken. I get some sort of JS 
errors pointing to jquery file, the window does not open in a modal but pops a 
new browser window. What a mess -- back to the drawing board.

Original comment by dodgingspam@gmail.com on 7 Oct 2010 at 7:06

[GoogleCodeExporter]

It seems I got it working in FireFox (all the way until actual crop). IE throws 
an error: "Object does not support this property or method" and Opera just 
chokes and does not know what to show... it give nyroModal's error message: 

The requested content cannot be loaded.
Please try again later.

Original comment by dodgingspam@gmail.com on 8 Oct 2010 at 1:33