Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Simple way to init inserted elements #1799

Closed
@sdhull

Description

@sdhull

There needs to be a simple way init everything, and that init needs to be idempotent (something similar to FB.XFBML.parse).

If I were to do something like this:

$(".ui-content").append("<ul data-role='listview' data-inset='true'><li>Foo</li><li>Bar</li></ul>");

Ideally, jQuery Mobile should automatically handle this and parse it. But I understand that may be difficult in all cases (replace/insert/append/etc). So I should at least be able to do something like:

$(".ui-content").jqmobile.parse();

Better yet, I should be able to do something like this:

var newList = $("<ul data-role='listview' data-inset='true'><li>Foo</li><li>Bar</li></ul>").jquerymobile.parse();
$(".ui-content").append(newList);

Activity

toddparker

toddparker commented on Jun 9, 2011

@toddparker
Contributor

We completely agree that we need an easy way to enhance appended markup. It's a tricky thing to get right so we've been kicking around ideas internally on this. On our radar for sure.

scottjehl

scottjehl commented on Jun 9, 2011

@scottjehl

Thanks for the idea! I think what we'll end up doing is something along the lines of this (currently in the decoupled widgets branch): df92fbd

It'd work like this:
$(".ui-content").append( ... lots of HTML ...).trigger( "enhance" );

I'm going to move this to the feature requests wiki. Thanks!

tstone

tstone commented on Jun 9, 2011

@tstone

!!!!!!!

awesome! been waiting for this...

sdhull

sdhull commented on Jun 9, 2011

@sdhull
Author

@scottjehl: that syntax looks good to me. I look forward to seeing that get into a release.

@toddparker: while you guys are discussing / implementing, in the meantime, could you please point me towards a resource that can show me the manual way of enhancing appended markup? This is blocking me from continuing forward development.

Thanks guys.

toddparker

toddparker commented on Jun 9, 2011

@toddparker
Contributor

You can call the specific plugins (slider, collapsible, etc.) manually on the markup you're injecting. If you're adding/removing content from an existing widget like a listview or select, call the refresh() method on it.

sdhull

sdhull commented on Jun 9, 2011

@sdhull
Author

@toddparker: having more than a general explanation would be useful to me, and probably useful to many others while we workaround this issue.

Specific examples?

$("[data-role=controlgroup]").controlgroup();  // ???

(Coincidentally, the above doesn't work for me)

scottjehl

scottjehl commented on Jun 9, 2011

@scottjehl

So, you'll want to use the :jqmData(...) selector for one, just in case there's namespacing on the data attrs, but basically, you can check the top of all of the widgets in this commit for the particulars. We plan to get these documented ASAP as well.

df92fbd

sdhull

sdhull commented on Jun 11, 2011

@sdhull
Author

@scottjehl: So I checked out the decoupled-widgets branch and built jquery mobile. Works pretty well. Kinda breaks the bottom of the page and the footer toolbar (well the toolbar still works but it stops following page scroll).

All in all, much better than before. Thank you!!

TommyKolkman

TommyKolkman commented on Jun 16, 2011

@TommyKolkman

It seems to work only partly for me; I checked out this branche and I'm running this code:

$('#wordpress').live('pagecreate',function(event){
$.getJSON('http://www.steez.nl/?json=get_recent_posts&callback=?', function(data){
$.each(data.posts, function(key, value) {
$('.blogList').append('

  • '+ this.title +'

    '+ this.excerpt +'

  • ').trigger('enhance');
    });
    });
    return false;
    });

    But only ua-link seems to be enhanced afterwards, the rest of the styles aren't. It's probably something I'm doing wrong myself, but I can't see what.

    Also, @toddparker, which refresh() method are you referring to? This might apply better to my situation.

    dafinley

    dafinley commented on Jun 19, 2011

    @dafinley

    Is it possible to put the ul element in the dom already, then stuff the inner html, then call the refresh on the ul element?
    Instead of trying to inject the ul element...inject the innerHTML if you can

    dafinley

    dafinley commented on Jun 19, 2011

    @dafinley

    This might be a shortcut as well.....
    http://jquerymobiledictionary.dyndns.org/faq.html

    sdhull

    sdhull commented on Jul 5, 2011

    @sdhull
    Author

    @scottjehl: is there a timeline for merging decoupled-widgets into master? I noticed that Beta 1 has been released but the decoupled widgets branch is still unmerged. This ticket was marked as "Critical" and then closed, implying that this is fixed, but on mainline this is still a problem, is it not?

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Metadata

    Metadata

    Assignees

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @sdhull@tstone@scottjehl@toddparker@dafinley

        Issue actions

          Simple way to init inserted elements · Issue #1799 · jquery-archive/jquery-mobile