Languages

Menu
Sites
Language
Dynamically add buttons to footer

What is the proper way to dynamically add a button to footer?

Assuming I have 2 buttons:

<div data-role="button" data-inline="false" data-style="round">Ok</div>
<div data-role="button" data-inline="false" data-style="round">Cancel</div>

which are rendered and styled as 2 buttons in footer with the same width (180px in my case or half of the footer).

 

I want to add new button dynamically by some action

<div data-role="button" data-inline="false" data-style="round">Undo</div>

So that all 3 buttons will be with the same size, have the same style, etc.

Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

12 Replies
konduri sai swathi
Hi, Create a tabbar in the footer for 3 buttons and then make the style as "none" for the button you want to add dynamically and then change the style as "block" and make it visible after some action you perform. I have written a sample code for that. try it : 
<div data-role="footer" data-position="fixed">
			<div data-role="tabbar">
				<ul>
					<li><a onclick="ok()">OK</a></li>
					<li><a>Cancel</a></li>
					<li style="display: none;" id="undo"><a>Undo</a></li>
				</ul>
			</div>
		</div>
Javascript: function ok(){ $("#undo").css({display:"block"}); } Here i'm making the "undo" button visible after clicking on "ok" .
Maksym
If I use display: none than all 3 buttons has width 33%. And Button 'OK' takes 33%, 'Cancel' takes 33% and empty space 33%. Do I need to overwite this style?
Kirill Chuvilin
In my mind the thing like this sould work, but it doesn't. 
<div data-role="content">
    <button onclick="addButton()">Add button</button>
    <script>
        function addButton() {
            $('div[data-role="controlgroup"]').append('<a data-role="button" onclick="undo()">Undo</a>').trigger('create');
        }
    </script>
</div>
<div data-role="footer" data-position="fixed">
    <div data-role="controlgroup" data-type="horizontal">
        <a data-role="button" onclick="ok()">OK</a>
        <a data-role="button" onclick="cancel()">Cancel</a>
    </div>
</div>
Maksym
In this case there is also a div with class ui-controlgroup-controls created, so you have to append elemenths to this div. But it will not work, the button will be added, but buttons will not be styled. I found that the buttons will be styled well in your case and im my (where I add buttons to footer directly) after changing page and returning to this one. So is there a possibility to call some method for footer only (for example $('#pageId .ui-footer').trigger('refresh')) to style buttons or other elements like it is done with static content?
Kirill Chuvilin
Yes. I do add a button to the controlgroup div. According to jQuery mobile documentation trigger('create') sould refresh the view. But it doesn't.
Maksym
So there is no way to dynamically change buttons in footer, is it?
Kirill Chuvilin
Probably the solution for you will be to have a number of footers and show the one you need..
Maksym
I've been thinking about this, but how can I have more that one footer?
Kirill Chuvilin
Try to define some in HTML and use $(#footerId).show()/$(#footerId).hide() with JavaScript.
Maksym
Can you, please, share working example?
Kirill Chuvilin 
<script>
    function showFooter(index) {
        $('div:jqmData(role="footer")').hide();
        $('#footer'+index).show();
    }
    
    function showInitFooter() { 
        showFooter(1);
    }
    
    $(document).bind('pageinit', showInitFooter);
</script>

<div data-role="content">
    <a data-role="button" onclick="showFooter(1)">Show footer 1</a>
    <a data-role="button" onclick="showFooter(2)">Show footer 2</a>
    <a data-role="button" onclick="showFooter(3)">Show footer 3</a>
</div>

<div data-role="footer" data-position="fixed" id="footer1">
    <h4>Footer 1</h4>
</div>
<div data-role="footer" data-position="fixed" id="footer2">
    <h4>Footer 2</h4>
</div>
<div data-role="footer" data-position="fixed" id="footer3">
    <h4>Footer 3</h4>
</div>
Maksym
Thanks a lot!