Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

jQuery bindings behaviour differs from raw Kotlin/JS eval() #166

Closed
kam1sh opened this issue Jun 27, 2020 · 5 comments
Closed

jQuery bindings behaviour differs from raw Kotlin/JS eval() #166

kam1sh opened this issue Jun 27, 2020 · 5 comments

Comments

@kam1sh
Copy link

kam1sh commented Jun 27, 2020

Hi! Sorry to bother you on the weekend.

Today, working on integrating Semantic/Fomantic UI in my application, I've encountered situation when code from eval() works, but the same code with KVision jQuery bindings don't.

See following example:

eval("""
    $(document).ready(function() {
        $('.ui.modal').modal()
        $('.ui.modal').modal("attach events", "#login-btn")
    })
""".trimIndent())

This works as charm. I tried to rewrite it to KVision jQuery:

jQuery(document).ready {
    it!!(".ui.modal").asDynamic().modal()
    it!!(".ui.modal").asDynamic().modal("attach events", "#login-btn")
}

When this code executes, I got this error:

jQuery.Deferred exception: No method named "attach events" TypeError: No method named "attach events"
    at HTMLDivElement.eval (webpack-internal:///../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js:6:55884)
    at Function.each (webpack-internal:///../../node_modules/jquery/dist/jquery.js:381:19)
    at jQuery.fn.init.each (webpack-internal:///../../node_modules/jquery/dist/jquery.js:203:17)
    at jQuery.fn.init.t._jQueryInterface [as modal] (webpack-internal:///../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js:6:55672)
    at HTMLDocument.App$start$lambda$lambda$lambda$lambda (webpack-internal:///./kotlin/cec-platform-frontend.js:108:43)
    at mightThrow (webpack-internal:///../../node_modules/jquery/dist/jquery.js:3762:29)
    at process (webpack-internal:///../../node_modules/jquery/dist/jquery.js:3830:12)

Is this a bug? Or I don't understand something?

I can provide later repo with minimal example if you want.
@rjaros
Copy link
Owner

rjaros commented Jun 27, 2020

I think you have two jQuery instances in your project, because $ symbol is not defined by the standard jQuery module used with KVision. I could assume the second module is integrated with your external library. So when you use $ and then call modal(), the function from Semantic UI is called and it works fine. But when you use jQuery from KVision, and then call modal(), the function from Bootstrap is executed, which doesn't work.

So first you need to make sure there is only one jQuery module. I could help if you prepare an example project.

And also remove kvision-bootstrap* modules from your project, because they surely will conflict with Semantic.

@kam1sh
Copy link
Author

kam1sh commented Jun 27, 2020

You absolutely right, I had two jQuery instances =) commented out all kvision-bootstrap modules from gradle.

Here's example project: https://github.com/kam1sh/kvision-sandbox/tree/fomanticui

So, it's not possible to use KVision jQuery bindings if I use jQuery included in page explicitly? I mean, if I have <head> like this:

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
    <script src="semantic.min.js"></script>
    <link rel="stylesheet" type="text/css" href="semantic.min.css">
    <link rel="stylesheet" href="main.css">

@rjaros
Copy link
Owner

rjaros commented Jun 27, 2020

It's never a good idea to have two jQuery instances. You have to use the one provided with KVision. You should be able to add support for $ global symbol with webpack expose-loader but I haven't used it and I've read about some problems: webpack-contrib/expose-loader#20

@rjaros
Copy link
Owner

rjaros commented Jun 27, 2020 •
edited
Loading

Or there is also a simpler solution that seems to work - just add this line at the beginning of you App.start() method:

window.asDynamic()["$"] = window["jQuery"]

@kam1sh
Copy link
Author

kam1sh commented Jun 28, 2020

Solved it! I only had to add this in webpack.config.d/jquery.js:

    config.externals = {
        jquery: 'jQuery'
    }

Now both KVision and Semantic/Fomantic-UI recognizes jQuery from <scipt src=...></script>.

@kam1sh kam1sh closed this as completed Jun 28, 2020
@rjaros rjaros mentioned this issue Apr 28, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rjaros @kam1sh