Back to Questions
1.3k
views7
comments
JQuery on.afterRender problem when called inside templates
websharperwebsharper.ui.next jquery

I've been trying to adapt the sample code on 3rd party autocomplete (here) to work with the templating module, but it looks like there some sort jquery conflict behind the scenes I can't figure out from the surface. If I move the sample code to the template client-server setup there seems to be a problem with the on.afterRender handlers.

gist here

Any idea what the probem might be?

.

Hello!

It seems like this is the issue:

1
2
3

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script data-replace="scripts"></script>

Select2 library depends on JQuery and therefore it must be included before that. So if you move

1

<script data-replace="scripts"></script>

before your included scripts (actually it's enough to just move before the select2 script tag, awesomeplete doesn't depend on JQuery, that's why it doesn't have any error), the code will run without any issue. It worked on the Try WebSharper site, because there the includes happen in the correct order.

By on 2/20/2017 7:53 AM ()

Hi Jozef, Unfortunatly, moving <script data-replace="scripts"></script> has no effect. You'll also notice that the awsomeplete library, which as you pointed out does not depend on jquery, also does not update its respective Var value when a selection is made (regardless of the location of the .js scripts).

By on 2/20/2017 7:15 PM ()

The JQuery script should be loaded either way before the select library, otherwise the .Select2() call would fail. If I copy your code to a test project it works fine for me, and the tryws link, that you attached is working correctly for me. The Var's are updated properly if I type something, or select something with the autocompletion. (The Var is not updated, when I type something on the Select2's searchbar, but that's normal, because that is a select list)

The only way I was able to reproduce your issue: Removing the el.DispatchEvent(..) lines from the on.afterRender callback functions. And indeed that's definitely a not normal behaviour. Here is a failing test case: snippet

Which version of WebSharper are you using?

By on 2/21/2017 3:13 AM ()

If I copy your code to a test project it works fine for me

Which test project settings are you using? I'm unable to get that gist to work with a clean UI.Next client server app (with no additional dependancies). To be clear, the select2 libraries fail to load, an neither of the Vars are updated upon select.

By on 2/22/2017 6:28 PM ()

Sorry for the late reply, but it seems like I found the issue:

Moving <script data-replace="scripts"></script> will be necessary for Select2 to be loaded correctly.

The current JQuery binding is based on the 1.11.2 version (it will be updated soon), and however Select2 library says that 1.7.2 is enough for their library, it seems like that's not the case. If you modify the web.config like this:

1
2
3
4
5

...
<appSettings>
<add key="WebSharper.JQuery.Resources.JQuery" value="http://code.jquery.com/jquery-3.1.1.min.js" />
</appSettings>
...

Then the JQuery resource file will be overwritten, and Select2 will work properly. This will solve the Var problem as well, because the error was like this: WebSharper: Uncaught asynchronous exception, so the WebSharper based stuff stopped working at this point (which was the on.afterRender), so the Vars weren't updated properly. With this change, I managed to run your code without any error, with the same version of WebSharper.

By on 2/24/2017 2:19 AM ()

This is mystifying, but updating the jquery resource (and loading two autocomplete libraries last) on my sample gist does not work for me. There is no change even though chrome reports that jquery 3.1.1 is linked.

updated gist

Could something else have changed in your project? Could there be some configuration setting that is causing JQuery to be imported multiple times?

By on 2/24/2017 8:59 AM ()
1
2
3
4
5
6
7

framework >= net45
nuget Dapper
nuget FSharp.Data.SqlClient
nuget WebSharper.Forms.Bootstrap prerelease
nuget WebSharper.Forms prerelease
nuget WebSharper.Piglets 3.6.9.274
nuget WebSharper.UI.Next 3.6.15.211

Maybe one of those is causing a problem? On a clean client-server project, the gist I linked does not update the value of Var for the awsomeplete field and the Select2methods / attributes are never added to the select2 field (It appears as a normal dropdown).

By on 2/21/2017 1:42 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper