0

I can't find the answer to this, I've read JQM docs and stackoverflow questions.

I have a listview #lista-principal that needs exactly the same split-buttons

The split-button open-up a popup that let the user choose the class to be inserted. The insertion happens via jquery using $('a.ui-li-link-alt').on('click'...

Here is the JSBin: http://jsbin.com/akerav/15/edit (click on header to trigger problem)

As the split-buttons are all equal, I wish to insert then programatically. I cannot find a way to do it so the split-buttons get refreshed by JQM.

What would be correct way of programatically inserting split-buttons in JQM pages ?

For testing purposes, I've put the problematic code in this click function:

$('div[data-role="header"]').click( function() {

       var split_button = $('<a></a>') 
         .attr({
             'data-rel':'popup', 
             'data-position-to':'origin', 
             'data-transition':'slidedown'
          })
         .html('Vistoria');

       var newli = $('ul#lista-principal li').clone();
       newli.find('a').append(split_button);
       $('ul#lista-principal li').remove();
       $('ul#lista-principal').append(newli);
       newli.trigger('create');
       $('ul#lista-principal').listview('refresh');
    });

mar/19 findings (this is twilight zone, corrections are welcome)

  • Looks like split-buttons dont get enhanced programatically if you put the second <a> inside the first one (although it works if you set it on the pure HTML);
  • If you need to modify a bunch of <li>s already in the HTML, you'd better do it on pagebeforecreate because listview('refresh') doesn't affect already enhanced itens and you should redo your entire list to use listview('create');
  • This is almost what I was looking for: http://jsfiddle.net/ffabreti/Q4SCt/1/
    (based on http://jsfiddle.net/Gajotres/LrAyE/)

Answer to the question Finally, found a way to insert split-buttons after pagecreate:

  • On pagecreate set a global variable with you original list content
  • Hook a event to alter the list ( example, $("div[data-role='header']").on('click'... )
  • Clone your original-list and edit it
  • replace the content of your list with the edited content
  • refresh de listview component
  • you can see the full code here: http://jsfiddle.net/ffabreti/Hyams/11/
Fernando Fabreti
  • 4,277
  • 3
  • 32
  • 33
  • If I understood you correctly, you want to add a split button to the every listview li element. And onen a popup when that button is pressed? – Gajotres Mar 19 '13 at 15:32
  • Correct, only that I wanted to do it after the page is loaded. If I put the split-button inside the HTML it works, if I try to add them after, they turn into regular links and I cant turn them into split-buttons. – Fernando Fabreti Mar 19 '13 at 17:38
  • Your problem here is that you are adding new content to the li element thinking that its content is the same like before jQuery Mobile changed it. Unfortunately it is not the same any more. What I would advise to you is instead of cloning, create a new split li elemenets and append them old values. – Gajotres Mar 19 '13 at 17:44
  • You mean extracting original content from current JQM modified li + appending new content + triggering 'create' on it ? ----- Is there a way to "undo" JQM applied modifications + altering the elements + reapply JQM ? – Fernando Fabreti Mar 19 '13 at 17:52
  • Extracting old titles, adding them to the complete new list elements (that have second tag for a split button) and triggering listview(refresh) on a final content. – Gajotres Mar 19 '13 at 17:53
  • I tryied and it didn't work. See this: http://jsbin.com/akerav/23/edit --- Is that what you suggested? ---- Please see `$('div[data-role="header"]').click` – Fernando Fabreti Mar 19 '13 at 19:32

0 Answers0