librelist archives

« back to archive

in a jQuery Bind?

in a jQuery Bind?

From:
Jason Olson
Date:
2012-11-15 @ 02:50
Hello all,

While not a direct Rails question, I thought I would ask this here, first.

I have implemented a cropper tool for uploaded images using jCrop.  Pretty
straight forward and easy.  Then I needed a second crop, so I muddled 
around and was able to get that working, too.  Then I wanted to fold it 
all into one show page and use jQuery to toggle the crop tool on and off.
jCrop uses a class/id to make an image croppable, so I figured I could use
jQuery addClass() or attr() to do this.  I was able to make a click event 
to do this, verifying in Firebug that the class was added, but the cropper
wasn't working.

My code:

<%= image_tag @image.upload(:large), :class => 'image', :id => 'large_image'  %>
<%= link_to 'crop', '#', :class => 'crop', :data => { :target => 
"#large_image" } %>

$(".crop").click(function(){
		$(this.getAttribute('data-target')).addClass('cropbox');
	});
});

$('.cropbox').Jcrop({
	onChange: update_crop,
	onSelect: update_crop
});

My thought is that the error lies in the binding of a JavaScript function 
on an element.  The crop script is bound to any element with "cropbox" 
class when the page loads, but adding the class after page load doesn't 
bind the function.  Not sure if this is right or not, but moving the jCrop
function inside the click function made it work.

$(".crop").click(function(){
	$(this.getAttribute('data-target')).addClass('cropbox');
	$('. cropbox').Jcrop({
	    	onChange: update_square_crop,
	    	onSelect: update_square_crop,
	    	aspectRatio: 1
	});
});

So my questions are thus:

1. Is my assumption right about the binding or did I just stumble on a 
workable solution without knowing the problem.

2. Is there a better way?

- Jason

Re: [getarailsjob] in a jQuery Bind?

From:
Corey Woodcox
Date:
2012-11-15 @ 03:52
If you change the $('.cropbox') to $(this), then it will work just fine and
not add the Jcrop to stuff that already has it, which could be a problem.
You will also need to call Jcrop on all .cropbox elements like you were
doing before. Make sense?

--
Corey Woodcox
zerp.ly/cwoodcox



On Wed, Nov 14, 2012 at 7:50 PM, Jason Olson <jmophoto@me.com> wrote:

> Hello all,
>
> While not a direct Rails question, I thought I would ask this here, first.
>
> I have implemented a cropper tool for uploaded images using jCrop.  Pretty
> straight forward and easy.  Then I needed a second crop, so I muddled
> around and was able to get that working, too.  Then I wanted to fold it all
> into one show page and use jQuery to toggle the crop tool on and off.
>  jCrop uses a class/id to make an image croppable, so I figured I could use
> jQuery addClass() or attr() to do this.  I was able to make a click event
> to do this, verifying in Firebug that the class was added, but the cropper
> wasn't working.
>
> My code:
>
> <%= image_tag @image.upload(:large), :class => 'image', :id =>
> 'large_image'  %>
> <%= link_to 'crop', '#', :class => 'crop', :data => { :target =>
> "#large_image" } %>
>
> $(".crop").click(function(){
>                 $(this.getAttribute('data-target')).addClass('cropbox');
>         });
> });
>
> $('.cropbox').Jcrop({
>         onChange: update_crop,
>         onSelect: update_crop
> });
>
> My thought is that the error lies in the binding of a JavaScript function
> on an element.  The crop script is bound to any element with "cropbox"
> class when the page loads, but adding the class after page load doesn't
> bind the function.  Not sure if this is right or not, but moving the jCrop
> function inside the click function made it work.
>
> $(".crop").click(function(){
>         $(this.getAttribute('data-target')).addClass('cropbox');
>         $('. cropbox').Jcrop({
>                 onChange: update_square_crop,
>                 onSelect: update_square_crop,
>                 aspectRatio: 1
>         });
> });
>
> So my questions are thus:
>
> 1. Is my assumption right about the binding or did I just stumble on a
> workable solution without knowing the problem.
>
> 2. Is there a better way?
>
> - Jason
>
>

Re: [getarailsjob] in a jQuery Bind?

From:
Jason Olson
Date:
2012-11-15 @ 04:13
Corey,

That is much more concise.  Looking at it now, I see that addClass is a 
function bound to the DOM on the click and so is jCrop.  I have no need 
for the class other than jCrop so I can take out the middle man.

	$(".crop").click(function() {
		$(this.getAttribute('data-target')).Jcrop({
		  	onChange: update_crop,
		  	onSelect: update_crop
		});
	});

So far it works.  I have three different crops, so I can easily copy and 
paste to duplicate this with each aspect ratio.

	$(".square").click(function() {
		$(this.getAttribute('data-target')).Jcrop({
			onChange: update_crop,
		  	onSelect: update_crop
			aspectRatio: 1
		});
	});


Thanks!

- JMO