Apply JQuery mobile style on button after add the button programmatically by javascript code

Question

When I try to add below jquery mobile button throw jquery code:

        // insert new button to bf div (breackfast div)
      $("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button" > Add new </a> ');

It doesn't imply the Jquery mobile style (data-role="button") ??

Below is the html:

  <div data-role="collapsible-set" data-theme="i" data-split-icon="gear" data-split-theme="e">
      <div data-role="collapsible">

        <h3> Breackfast   </h3>
                 <div id="bf"  style="margin:0 !important;padding:0 !important; display:inline !important"> 
             <ul data-role="listview" data-theme="i" ">
              <li>

                <input type="button" tabindex="@ViewBag.CurInt" id="bdelete" value="DeleteFood" onclick="bfd();"/>
                 </li>
                  </ul>
                </div>
             </div>
          </div>

Below is the JQuery code (PLZ note: it call the service and do the delete, but the problem only in not render button as jquery mobile style)

               <script type="text/javascript">
                    function bfd() {
                       var fp = '/api/service?prsnIduser1&MealTime=2&CurDate='+ $("#bdelete").attr("tabindex");
                      $.ajax({
                            url: fp,
                            type: 'Delete',
                            dataType: 'json',
                            contentType: 'application/json;  charset=utf-8',
                        success: function () {

                          $("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button" > Add new </a> ');
                      $("#bf a").buttonMarkup();

                             });
                            }
                   </script>

I did many search on google and on stackoverflow, And unsuccessfully I attempt below but without resault :

        $("div[data-role=collapsible]").collapsible({refresh: true });
         // or even add :
           $("#bf").page();
          // or
           $("#bf a").buttonMarkup();

is this what you want to achieve? http://jsfiddle.net/Palestinian/qYLVb/ — Omar, Mar 26 '13 at 13:57

score 4 · Accepted Answer · edited May 23 '17 at 11:50

4

If I understood you correctly, you want to dynamically create a jQuery Mobile button and have it styled correctly.

Here's a working jsFiddle example: http://jsfiddle.net/Gajotres/m4rjZ/

$(document).on('pagebeforeshow', '#index', function(){    
    // Add a new button element
    $('[data-role="content"]').append('<a id="button" href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button">Button</a>');
    // Enhance new button element
    $('#button').button();
});

To find out more about how jQuery Mobile handles dynamically added content and how it can be enhanced take a look at this ARTICLE, or find it HERE.

Here's a link to an official jQuery Mobile button documentation.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 26 '13 at 11:31

Gajotres

57,309
16
102
130

I am realy sorry to inform you it doesn't work either, I had try this before! – Bashar Abu Shamaa Mar 26 '13 at 11:44
Then you are doing something wrong. If it is working in example it also must work in your case. – Gajotres Mar 26 '13 at 11:48
I don't want to bind it with 'pagebeforeshow', I want it to be done after anyone click on the button with id 'bdelete' – Bashar Abu Shamaa Mar 26 '13 at 12:12
Then do it, pagebeforeshow event is here only to help example work. Only thing you need is $('#button').button(); Take a look at an example again, I have changed it, you can add buttons now through click on an another button. – Gajotres Mar 26 '13 at 12:26

score 3 · Answer 2 · answered Mar 26 '13 at 11:36

You can create a button widget "by hand" by calling the button() method, as Gajotres suggests.

However, if you want a generic solution that does not depend on the widget type, you can have jQuery Mobile "catch up" to new markup by triggering the create event on an ancestor element.

For instance:

$("#bf").html('<a href="FoodCat/FilterIndex?TimeId=2&CurDate=0" data-role="button">Add new</a>')
        .trigger("create");

Apply JQuery mobile style on button after add the button programmatically by javascript code

2 Answers2