Sending url from javascript and perform an http request

elm_javascript.js

let Elm = require('../../elm/cvs/cvs.elm');

$(document).ready(function(){
    $("#cvs-search-form").submit(function(event){
        let params = $(this).serializeArray();
        let querystring = $.param(params);
        let composed_url = `${this.baseURI}?${querystring}`;

        cvs.ports.getURL.send(composed_url);
        event.preventDefault();
    });

    var div = document.getElementById('testelm');
    // embed our Elm program in that <div>
    let cvs = Elm.embed(Elm.CVS, div, {
        getURL: "not set"
    });
});

test_api.elm

module CVS where

import Effects
import Html exposing (div, button, text)
import Html.Events exposing (onClick)
import Http
import Maybe exposing (withDefault)
import Signal exposing (Mailbox, mailbox, send)
import StartApp
import Task


-- MODEL
type alias Model = 
    { endpoint: String
    , data: Maybe String
    }

init : String -> (Model, Effects.Effects Action)
init endpoint = 
    (Model endpoint Nothing
    , fetchData endpoint
    )

-- UPDATE

type Action 
    = GetData String
    | ShowData (Maybe String)

update : Action -> Model -> (Model, Effects.Effects Action)
update action model =
  case action of
    GetData url ->
        let
            newmodel = { model | endpoint = url}
        in
           (newmodel, fetchData url)
    ShowData value ->
        let
            newmodel = { model | data = value}
        in
           (newmodel, Effects.none)

-- VIEW

view : Signal.Address Action -> Model -> Html.Html
view address model =
  div []
    [ div [] [ text ("ENDPOINT: " ++ model.endpoint) ]
    , div [] [ text ("OUTPUT" ++ withDefault "" model.data) ]
    , button [ onClick address (GetData model.endpoint ) ] [ text "Get the data" ]
    ]

-- EFFECTS

fetchData: String -> Effects.Effects Action
fetchData url =
    Http.getString (url)
    -- String -> Task Error String 
    |> Task.toMaybe
    -- Map the STring returned from Task to an action
    |> Task.map ShowData
    -- Convert the Task into effects
    |> Effects.task

-- PORTS

port getURL : Signal (String)

setUrlFromJsSignal : Signal Action
setUrlFromJsSignal = Signal.map GetData getURL

app =
  StartApp.start { init = init "http://localhost:8000/", view = view, update = update, inputs = [ setUrlFromJsSignal ]}

main = app.html

port tasks : Signal (Task Effects.Never ())
port tasks = app.tasks