Dynamically adding button in jQuery Mobile

sivamurthyplaybook · ‎06-14-2011

Dear All

I am developing a blackberry webworks application for playbook, here am using jQuerymobile.

In this am creating a hyperlink(which will act as a button in jQuery mobile) in the header div .it is acting as a button and also working fine.In the same way in the footer also i have to add one button that will come dynamically from javascript function, It is working properly ,But hyperlink is not acting as a button and displaying like it is simple hyperlink.But the same code if am using in any html page then it will act as a button.The problem is only when am adding it to any javascript function(It is coming like hyperlink instead of button).The following code is what am using in my project.

Plz help me to solve this problem.

You can find the screenshot and related code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
	<script type="text/javascript">
	function toTest()
	{
		var btn="<a href='#PO' data-role='button' class='ui-btn-right' data-icon='arrow-r'>Save</a>"; $("#test").html(btn); 	}
	
	</script>
</head>
<body onload="toTest();">
<div data-role="page" id="PO">
<div data-role="header" data-position='fixed'><a href='#home' class='ui-btn-left' data-icon="home" data-theme='b'>Back</a>
<h2 align="right"  class='lblHeading'>Purchase Orders</h2>
</div>
<div data-role="content" id="POmain"></div>
<div data-role="footer" id="test">

</div>
</div>
</body>
</html>

Thanks & Regards

Siva.

aesculus · ‎05-06-2011

Before you go try to dynamically add the button what about taking your Save html and putting it directly in the code? Does it turn into a button then? Maybe its because Back is in the header its a button vs a link.

kam1loherrera · ‎06-14-2011

You are adding a link to the html after the rendering process has ended (CSS styles applied, etc.), try this:

add the button (design-time) in your html inside a div with a unique ID:

<div id="div_mydiv">
  <button id="btn_mybtn" onclick="myonclick();" data-icon='delete' >Hello!</button>
</div>

then just use jquery's .show(); and .hide(); methods on the "div_mydiv" as you need:

if(showmydiv){
  $("#div_mydiv").show();
}else{
  $("#div_mydiv").hide();
}

my advise is that you don't create controls from javascript if they don't have a "refresh" option like listviews or selectmenu controls.

sivamurthyplaybook · ‎06-14-2011

Thank you very much Kam for ur valuable reply.

Regards

Siva.

Welcome!

Web and WebWorks Development

Dynamically adding button in jQuery Mobile

Re: Dynamically adding button in jQuery Mobile

Re: Dynamically adding button in jQuery Mobile

Re: Dynamically adding button in jQuery Mobile