My favorites | Sign in
Project Home Downloads Issues
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 534: Adding additional code on load
1 person starred this issue and may be notified of changes. Back to list
Status:  New
Owner:  ----


 
Reported by dodgingspam@gmail.com, Oct 5, 2010
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.
Oct 5, 2010
#1 dodgingspam@gmail.com
Never mind, I don't think the issue is with nyromodal. Great plugin!
Oct 6, 2010
Project Member #2 nyro...@gmail.com
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.
Oct 6, 2010
#3 dodgingspam@gmail.com
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. 
Oct 6, 2010
Project Member #4 nyro...@gmail.com
post a link where we can see the page.
Oct 6, 2010
#5 dodgingspam@gmail.com
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...
Oct 6, 2010
Project Member #7 nyro...@gmail.com
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
Oct 6, 2010
Project Member #9 nyro...@gmail.com
Still have a problem on your path, looks like there is an erronous character at the end of the path...
Oct 6, 2010
#12 dodgingspam@gmail.com
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...
Oct 7, 2010
Project Member #13 nyro...@gmail.com
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.
Oct 7, 2010
#16 dodgingspam@gmail.com
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()">
Oct 7, 2010
#17 dodgingspam@gmail.com
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.

Oct 7, 2010
#18 dodgingspam@gmail.com
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.

Powered by Google Project Hosting