search

sconsult / croppic

croppic
914 stars 228 forks source link

Conflict with Bootstrap #212

Closed ghost closed 8 years ago

ghost commented 8 years ago

Hello everyone,

I have an issue using Boostrap 3.3.6 with croppic solution,

When i click on the upload button nothing happen when bootstrap.js is linked, but if i deleted the call of bootstrap.js file croppic works fine (upload and crop).

There is some requierement using bootstrap and croppic ? Also even if i call bootstrap after or before croppic that change nothing ...

Also i'm using jquery 1.11.0 i don't know if it may affect the whole thing.

sconsult commented 8 years ago

Hi @Taegukazu

If you look at the bottom of the index.html page, we are using bootstrap Bootstrap v3.0.3 for the index page, and since about a year jquery-2.1.3.min.js. Previously that we ran croppic with jquery-1.10.2.min.js (i left it as refeerence in the index.html)

Anwsering your question is a little tricky without having any insights about how you are using croppic.

Can you elaborate where and how you run it ? Do you have any browser console errors ?

As more info you can provide as better we should be able to help you

Mat

ghost commented 8 years ago

Hello @sconsult ,

I'm working on a CMS, prestashop on version 1.6.1.3 with the default-theme. And i'm trying to put an upload input with a crop option, exactly what croppic does. But because it's a CMS there is a lot of js file loaded on the page where i'm working : list_js_file (default-bootstrap is the name of the theme used on prestashop)

But unfortunately i can't share the url of my work because i'm working locally... I tried to remove each JS link by hand, and i detected that when i disable the call of the bootstrap.js (called directly from the CDN : https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js) that work, upload frame appear and cropping work, but other thing that i used with bootstrap of course won't work ... (like popover, or effect method) .

I have no console error (on chrome and firebug) i tried to add some console.log and debug before and after the click trigger (arround line 154) in croppic.js to be sure that it was take in consideration, and every thing is print right, this is the console.debug of "that.form.find('input[type="file"]').trigger('click');" console_debug

In fact croppic works (upload button appear at the top right of the input) but nothing happens when clicking on it (without error in console) : croppic_loaded

I tried with the bootstrap version 3.0.3 (as you can see it on the first image) but nothing change ... i understand that something else is maybe creating conflict, but i don't really see how i can find correctly the one which is creating me issues. There is a solution to use croppic without make conflict ? Or to expend debug of the click trigger ?

Hope my informations help you ^^ Best Regards,

ghost commented 8 years ago

Hello @sconsult ,

I finally found my issue, it was that my croppic section was wrapped inside a div with a "data-toggle=button" attribute which override the default action of every click on every child like the click trigger, i don't know how bootstrap can lead the click action even if croppic link is before the bootstrap one.

Issue was pretty easy in fact ... sorry about this ...

Thanks you for your help, Best Regards,