Back to Questions
2.1k
views5
comments
JQueryUI with UI.Next
websharperui.nextjqueryui

Is there samples available which uses JqueryUI combined with UI.Next?

I would like to use the Sortable type to build a drag and drop sortable UI and have it backed by a ListModel<string, string> but I can’t seem to find the right way to do it.

.

Could you paste some code in for a jQuery UI drag&drop sortable component where the collection is dynamic? Otherwise, the conceptual difficulty here is that jQuery UI relies on DOM nodes, whereas UI.Next ListModels are a JavaScript abstraction. I don't think this is a problem, a mapping should be relatively easy to be established.

By on 10/16/2015 10:39 AM ()

To be honest I haven't done much yet. I haven't put the dynamic collection. At the moment, the equivalent that I am trying to achieve in JS is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function refreshList() {
  $( "#preview" ).text(JSON.stringify(
    $( "#sortable" ).sortable("toArray", { attribute: "some-data" }))
  )
}

$( "#sortable" )
  .sortable()
  .disableSelection()
  .on ( "sortupdate", refreshList);

$( "#add" ).on ("click" ,function () {
  $( "#sortable" ).append(
    '<li id="new" some-data="itemNew" class="ui-state-default">'
    + '<span class="ui-icon ui-icon-arrowthick-2-n-s">'
    + '</span> New item'
    + '</li>')
    $( "#sortable" ).sortable( "refresh" )
    refreshList();
})

And what I did in F# is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

let Sortable (info: Var<string>) =
  let el = 
    Div [
      Div [Html.Client.Attr.Id "1"] -< [Text "Item 1"]
      Div [Html.Client.Attr.Id "2"] -< [Text "Item 2"]
      Div [Html.Client.Attr.Id "3"] -< [Text "Item 3"]
      Div [Html.Client.Attr.Id "4"] -< [Text "Item 4"]
      Div [Html.Client.Attr.Id "5"] -< [Text "Item 5"]
    ]

let sortable = Sortable.New (el)

sortable.OnUpdate (fun e ev -> 
  sortable
  |> fun sort -> sort.ToArray ()  // <--- crashes
  |> sprintf "%A"
  |> Var.Set info)

sortable.Render()

View.Const (el.Dom)
|> View.Map (Doc.Static)
|> Doc.EmbedView

But sort.ToArray() crashes in JS with the error Uncaught TypeError: M.sortable is not a function.

By on 10/18/2015 8:59 AM ()

Well at the end I gave up using Websharper JQueryUI.

I've took a tiny HTML5 sortable library and am calling it using the Direct JS call attribute. And every time the list get sorted, I set the whole ListModel.

1
2
3
4
5
6

[<Direct "createSortable($listId, $onUpdate)">]
let sortable listId onUpdate = WebSharper.JavaScript.Pervasives.X<unit>

...

sortable "#list" list.Set
By on 10/20/2015 1:39 AM ()

This is actually a big drawback of UI.Next. It doesn't really play well with third party UI libraries.

By on 10/16/2015 9:58 AM ()

Well, it should work well with any library that is suitably general - otherwise how would you expect to plug in a reactive layer under it?

By on 10/16/2015 10:34 AM ()

    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