elm-html version of raw html element doesn't have same properties of html element

97 views
Skip to first unread message

Timothy Williams

unread,
Sep 30, 2016, 2:35:38 AM9/30/16
to Elm Discuss
I have this elm-html element:

Html.a [href "#menu-toggle", class "btn btn-default", id "menu-toggle" ]
        [ text "Toggle Menu" ]

which is a direct translation from:

 <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

and shows up in the browser as:

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>


But the same javascript that works on the html doesn't work on the elm code:

    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });

Is plain js/jquery unable to interact with elm elements as it would with html elements?

Witold Szczerba

unread,
Sep 30, 2016, 3:01:33 AM9/30/16
to elm-d...@googlegroups.com

Maybe your js code acts too early, when there is no element yet in the DOM?


--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Duane Johnson

unread,
Sep 30, 2016, 3:08:10 AM9/30/16
to elm-d...@googlegroups.com
Perhaps Elm is re-rendering the element on which you've attached the event, thus removing the event? I haven't yet used the Html.Keyed library, but I understand it can be helpful in cases like this where you want to keep the same DOM element around, since it has state attached to it.

Timothy Williams

unread,
Sep 30, 2016, 4:18:29 PM9/30/16
to Elm Discuss
I thought it could be that, but I put in a timeout so I don't think its likely.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.

Timothy Williams

unread,
Sep 30, 2016, 4:18:59 PM9/30/16
to Elm Discuss
This seems like a possibility.


Em sexta-feira, 30 de setembro de 2016 03:08:10 UTC-4, Duane Johnson escreveu:
Perhaps Elm is re-rendering the element on which you've attached the event, thus removing the event? I haven't yet used the Html.Keyed library, but I understand it can be helpful in cases like this where you want to keep the same DOM element around, since it has state attached to it.
On Fri, Sep 30, 2016 at 1:01 AM, Witold Szczerba <witold...@gmail.com> wrote:

Maybe your js code acts too early, when there is no element yet in the DOM?

30.09.2016 8:35 AM "Timothy Williams" <t.will...@gmail.com> napisał(a):
I have this elm-html element:

Html.a [href "#menu-toggle", class "btn btn-default", id "menu-toggle" ]
        [ text "Toggle Menu" ]

which is a direct translation from:

 <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

and shows up in the browser as:

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>


But the same javascript that works on the html doesn't work on the elm code:

    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });

Is plain js/jquery unable to interact with elm elements as it would with html elements?

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.

Timothy Williams

unread,
Sep 30, 2016, 9:05:06 PM9/30/16
to Elm Discuss
Yes, this seems to be correct. I entered the javascript code manually in the browser which made it work. Very interesting.


Em sexta-feira, 30 de setembro de 2016 03:08:10 UTC-4, Duane Johnson escreveu:
Perhaps Elm is re-rendering the element on which you've attached the event, thus removing the event? I haven't yet used the Html.Keyed library, but I understand it can be helpful in cases like this where you want to keep the same DOM element around, since it has state attached to it.
On Fri, Sep 30, 2016 at 1:01 AM, Witold Szczerba <witold...@gmail.com> wrote:

Maybe your js code acts too early, when there is no element yet in the DOM?

30.09.2016 8:35 AM "Timothy Williams" <t.will...@gmail.com> napisał(a):
I have this elm-html element:

Html.a [href "#menu-toggle", class "btn btn-default", id "menu-toggle" ]
        [ text "Toggle Menu" ]

which is a direct translation from:

 <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

and shows up in the browser as:

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>


But the same javascript that works on the html doesn't work on the elm code:

    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });

Is plain js/jquery unable to interact with elm elements as it would with html elements?

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.

Witold Szczerba

unread,
Oct 1, 2016, 12:55:42 PM10/1/16
to elm-d...@googlegroups.com
You can always work it around by attaching the actual event handler to some STABLE parent of your button (or to the root document if you cannot tell the possible parent).
Check the https://api.jquery.com/on/ documentation, the "Delegated events" section.
In your case it could be:

$(document).on("click", "#menu-toggle", function() {
  //you can access the actual element with $(this)
});

Replace the $(document) with something else like $("#menu") or something if you are sure it won't be replaced, altered, added later, etc... by Elm. Just beware not to leak the handlers, I mean do not add them more than once or if you have to then remember to always clean them by disposing the handler once it's not needed.

Regards,
Witold Szczerba


To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages