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
Trusted Contributor
bertho_joris
Posts: 100
Registered: ‎03-31-2012
My Device: Blackberry 9780

Using jQuery Lib in bbUI

[ Edited ]

When I saw the question and answer from :

 

How/Where to use jquery with webworks and bbui?

 

I want to ask.

 

Is the replacement syntax as in the question (using normal jQuery) :

 

$(document).ready(function () {
	$("#Div1").click(function () {
		alert("Hello world!");
	});
});

 And replaced as in section in bbUI :

 

ondomready: function(element, id) {
		if (id == 'home') {
			$("#Div1").click(function () {
				alert("Hello world!");
			});
		}
	}

Did not cause long syntax in index.htm file ???

Because I know the syntax above is at index.htm

 

If only doing alerts on syntax above is not visible. When using a lot of lines of code on a page whether it should be incorporated into index.htm like the statement above?

 

if i use my sample code :

$("#DropDownList2").hide();
    $("#pertama").change(function () {
        if ($("#pertama option:selected").text() == "- Pilih Data -") {
            $("#DropDownList2").hide();
            $("select[id$=DropDownList2] > option").remove();
        }

        if ($("#pertama option:selected").text() == "Keren") {
            $("#DropDownList2").show();
            $("select[id$=DropDownList2] > option").remove();
            $("#DropDownList2").append($("<option>" + ("Hyderabad") + "</option>"));
            $("#DropDownList2").append($("<option>" + ("Vijayawada") + "</option>"));
            $("#DropDownList2").append($("<option>" + ("Karimnagar") + "</option>"));
        }
        if ($("#pertama option:selected").text() == "Jelek") {
            $("#DropDownList2").show();
            $("select[id$=DropDownList2] > option").remove();
            $("#DropDownList2").append($("<option>" + ("Madhurai") + "</option>"));
            $("#DropDownList2").append($("<option>" + ("Chennai") + "</option>"));
        }
        if ($("#pertama option:selected").text() == "Tidak Tahu") {
            $("#DropDownList2").show();
            $("select[id$=DropDownList2] > option").remove();
            $("#DropDownList2").append($("<option>" + ("Bangalore") + "</option>"));
        }

    });

 Would look very much code in the main file.

 

Is the only way out was to use a function in jQuery?

Regards,
Bertho
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Using jQuery Lib in bbUI

You will want to wait for ondomready from bbUI and not the jQuery document ready.  The jQuery document ready will fire once the index.html file has been loaded.  You want to manipulate the contents of a screen that is only loaded after the ondomready event for that screen is loaded.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Trusted Contributor
bertho_joris
Posts: 100
Registered: ‎03-31-2012
My Device: Blackberry 9780

Re: Using jQuery Lib in bbUI

Do you mean still use the above? That write logic to index.htm like this?

 

ondomready: function(element, id) {
		if (id == 'home') {
			$("#Div1").click(function () {
				alert("Hello world!");
			});
		}
	}

 

Regards,
Bertho
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Using jQuery Lib in bbUI

I'm not sure what you mean by "write logic to index.htm"

 

The index.htm file in a bbUI application is a container that doesn't contain any HTML.  Just <body> tags.  Each screen is loaded via bb.pushScreen() and when that screen has been inserted into the page (index.html) the ondomready function is fired

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Trusted Contributor
bertho_joris
Posts: 100
Registered: ‎03-31-2012
My Device: Blackberry 9780

Re: Using jQuery Lib in bbUI

I've tried it, and according to what it is. Just my sintax that I use in jQuery does not work for ...

 

What I made :

 

ondomready: function(element, id) {
	if (id == 'TEST') {
			Page_initialLoad()
		}
	}
});

 

<div data-bb-type="item" onclick="bb.pushScreen('TEST.html', 'TEST');" data-bb-title="Dynamic Combo">Sample Page</div>

 

function Page_initialLoad(element) {
	setTimeout(FINISH_loadAfterTimeout,10);
}

 

function FINISH_loadAfterTimeout() {
     alert('In')
        $("#DropDownList2").hide();
      alert('Out')
}

 My html file :

<select id="first">
  <option value="0">- Choice -</option>
  <option value="1">Opt 1</option>
  <option value="2">Opt 2</option>
  <option value="2">Opt 3</option>
</select>
<br />
<select id="DropDownList2"></select>

My problem is, when the page is loaded, alerts in and out out, but hide process is not running clear. Is there something wrong?

Regards,
Bertho
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Using jQuery Lib in bbUI

Hard to tell.. is $("#DropDownList2") returning anything, or is it undefined/null?

 

for your html file.. is that just a portion of the screen or the whole screen file?

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Trusted Contributor
bertho_joris
Posts: 100
Registered: ‎03-31-2012
My Device: Blackberry 9780

Re: Using jQuery Lib in bbUI

[ Edited ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<script type="text/javascript" src="js/jquery181.js"></script>
<link type="text/css" rel="stylesheet" href="css/fb-1.css" />
<script id="TEST" src="js/test.js"></script>

<div data-bb-type="screen" data-bb-effect="fade">
	<div data-bb-type="title" data-bb-caption="BBM" data-bb-back-caption="Back" ></div>
	
    
    <div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Sample Page</div>
		<div data-bb-type="label-control-container">
        
			
<select id="first">
  <option value="0">- Choose -</option>
  <option value="1">Opt 1</option>
  <option value="2">Opt 2</option>
  <option value="3">Opt 3</option>
</select>
<br />
<select id="DropDownList2"></select>   
            

		</div>
	</div>
	
	
	<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>

 

Regards,
Bertho
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Using jQuery Lib in bbUI

In that code you are missing your screen definition <div> that needs to surround your screen content

 

<div data-bb-type="screen">

//... Your screen content

</div>

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Trusted Contributor
bertho_joris
Posts: 100
Registered: ‎03-31-2012
My Device: Blackberry 9780

Re: Using jQuery Lib in bbUI

[ Edited ]

Dou you mean :

 

<div data-bb-type="screen" data-bb-effect="fade"> in line 8 ???

 

Or do I have to add a line of code I again? like this :

 

<div>		
<select id="first">
  <option value="0">- Choose -</option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
</select>
<br />
<select id="DropDownList2"></select>   
</div>  

 I dont understand do you mean

Regards,
Bertho
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Using jQuery Lib in bbUI

Ah.. didn't see it in there.. You'll need to move your script and link tags inside your screen <div>

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter