Using jQuery Lib in bbUI

bertho_joris · ‎03-31-2012

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

tneil · ‎10-16-2008

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

bertho_joris · ‎03-31-2012

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

tneil · ‎10-16-2008

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

bertho_joris · ‎03-31-2012

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

tneil · ‎10-16-2008

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

bertho_joris · ‎03-31-2012

<!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

tneil · ‎10-16-2008

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

bertho_joris · ‎03-31-2012

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

tneil · ‎10-16-2008

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

Welcome!

Web and WebWorks Development

Using jQuery Lib in bbUI

Re: Using jQuery Lib in bbUI

Re: Using jQuery Lib in bbUI

Re: Using jQuery Lib in bbUI

Re: Using jQuery Lib in bbUI

Re: Using jQuery Lib in bbUI

Re: Using jQuery Lib in bbUI

Re: Using jQuery Lib in bbUI

Re: Using jQuery Lib in bbUI

Re: Using jQuery Lib in bbUI