Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
Contributor
Posts: 11
Registered: ‎06-14-2011
My Device: os 5 and above
My Carrier: developer

Dynamically adding button in jQuery Mobile

[ Edited ]

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.

Contributor
Posts: 22
Registered: ‎05-06-2011
My Device: torch 9800
My Carrier: at&t

Re: Dynamically adding button in jQuery Mobile

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.

Contributor
Posts: 19
Registered: ‎06-14-2011
My Device: 9300
My Carrier: Comcel

Re: Dynamically adding button in jQuery Mobile

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.

Contributor
Posts: 11
Registered: ‎06-14-2011
My Device: os 5 and above
My Carrier: developer

Re: Dynamically adding button in jQuery Mobile

[ Edited ]

Thank you  very much Kam for ur valuable reply.

 

 

Regards

Siva.