how to tell elm about external DOM changes

Question

I'm using elm 0.17.1 and trying to interop with select2 javascript library(version 4.0.3), here is my Main.elm :

port module Main exposing (..)

import Html exposing (Html,select,option,div,text,br)
import Html.App as App
import Html.Attributes exposing (id,value,width)
-- MODEL

type alias Model =
  {
     country : String
  }


-- UPDATE

type Msg =
      Select String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Select str -> (Model str,Cmd.none)


-- VIEW

view : Model -> Html Msg
view model =
  div[]
  [
    select [id "myselect"]
    [
     option [value "US"] [text "United States"],
     option [value "UK"] [text "United Kingdom"]
    ],
    text model.country
  ]

-- SUBSCRIPTIONS

port selection : (String -> msg) -> Sub msg

subscriptions : Model -> Sub Msg
subscriptions _=
  selection Select


port issueselect2 : String -> Cmd msg

-- INIT

init : (Model, Cmd Msg)
init =
  ({country=""},issueselect2 "myselect")

main : Program Never
main = App.program {init=init,view=view,update=update,subscriptions=subscriptions}

and the javascript side :

$(document).ready(function()
     {
        var app=Elm.Main.fullscreen();
        app.ports.issueselect2.subscribe(function(id)
        {
           $('#'+id).select2().on('change',function(e)
           {
              app.ports.selection.send(e.target.value);
           });
        })
     })

Right now when I select a country an Uncaught type error in my chromium's console appears saying that domNode.replaceData is not a function(it is actually undefined).

The problem is that select2 adds a span to the DOM and Elm doesn't know about it, inspecting domNode reveals that Elm tries to update the span when it should update the text.

I suppose I need effects but I don't know how to use them in my particular usecase.

How to solve my problem ?

for the record I'm using jquery 3 , I compile my elm program into main.js and I load the js files in this order : jquery.min.js, select2.min.js,main.js then the above js code .

I couldn't debug this with elm-reactor because it seems to only work with elm code not js code.

It will be difficult, if not impossible, to get this to work, I think. Elm's virtual DOM assumes the real DOM is always in sync. Select2 breaks this. Maybe it is better to only manage data for the select list in Elm: keep the chosen country and the list of options in your model. Send the options to JavaScript with ap port, render the <select> and <option>s in javascript-land, do the select2 makeover, and send the selected option back to Elm. — wintvelt

halfzebra halfzebra · Accepted Answer · 2016-11-14T00:32:34

To address this question I've made this example to demonstrate all the core ideas of integrating any third-party JavaScript technology in to your Elm app.

Here are the rules:

Let Elm to own the state
Do not mutate the DOM, produced by Elm's view
You don't need $(document).ready(), if Elm app controls the initialization logic
Use ports to initialize and control the third-party code

Points of interest in the example:

index.js — port subscription setup in JavaScript and select2 bootstrap code
App.elm — owns the configuration for select2 and subscribes to changes

The view provides a container for all the jQuery magic:

view : Model -> Html Msg
view model =
    div []
        [ text (toString model)
        , div [ id "select2-container" ] [] -- The container, where select2 will live
        ]

Any feedback is very welcome, I'm willing to improve this answer if you could tell me, what is missing.

how to tell elm about external DOM changes

1 Answers