Jump to content

[Solved - ish] - Getting the ID of an element that does not have an ID .... Yet.


wongadob
 Share

Recommended Posts

I am trying to pass the ID of an element to a javascript function. Easy you think, but not in this instance. I am using knockout.js and from my experiments it woud appear that the ID does not exist yet. This is the element I am trying to get the ID of

<div class = "messageitem"  x-blackberry-onDown="navDown(this.id)" x-blackberry-focusable="true" onmouseover="this.style.backgroundColor='#cceeff';setScrollTop(this.id);" onmouseout="this.style.backgroundColor='#ffffff';" data-bind = "click: showthread.bind($data, thread()), attr: { 'id': 'th_mb' + $index()">

This is the function I am trying to call with the id x-blackberry-onDown="navDown(this.id)" However when retreiving it in JS the callig parameter is undefined. Now the reason I think this is happening is becuase the ID does not exist at the point the HTML is created and is only later created when the Knockoutjs item template is updated. See the data bind where it is setting the attribute ID to th_mb+$index(). this creates th_mb0, th_mb1 etc etc so a unique ID is created per element that is added the the Knockout View model. I assume that when the initail HTML is created (this.id) does not actually have an Id, and only later when the view model is updated is the Id created. Any idea how I can send the element to the function, not the element ID. I tried using. navDown(this) but this seems to send the function x_blakcberry-onDown to the JS function. I assume becuase the 'this' is the function. Any ideas how I can send the DOM element. and I guess when I get the DOM element. how do you access the Id. is it purely element.id ? Any help much apprecaited

Edited by wongadob
  • Like 1
Link to comment
Share on other sites

If Blackberry is treating that like any other browser would, then inside the event handler this should be set to the element that the event was triggered for. So if you pass this to your function, it should point to the element.

Link to comment
Share on other sites

Yes I thought that but it does not appear to. The first line of my function I put a console.out and ended up getting a function & code printed out to the console, rather than what I was expecting an object? Any other ways?

Link to comment
Share on other sites

This does not seem to be an issue with knockoutjs as I created a seprate project really cut back and get the same result. The entire code is this

<!DOCTYPE html><html><head>   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />   <title>DummyTest</title>	<script type="text/javascript">function navDown(el){console.log(el);}</script></head><body><div><ul>   <li><div id="item1" x-blackberry-focusable="true" x-blackberry-initialFocus="true" x-blackberry-onDown="navDown(this)" onmouseover="this.style.backgroundColor='#2070d0'" onmouseout="this.style.backgroundColor='transparent';" >item 1</div></li>   <li><div id="item2" x-blackberry-focusable="true" onmouseover="this.style.backgroundColor='#2070d0'" onmouseout="this.style.backgroundColor='transparent';" >item 2</div></li>   <li><div id="item3" x-blackberry-focusable="true" x-blackberry-onDown="navDown(this)"onmouseover="this.style.backgroundColor='#2070d0'" onmouseout="this.style.backgroundColor='transparent';" >item 3</div></li>   <li><div id="item4" x-blackberry-focusable="true" onmouseover="this.style.backgroundColor='#2070d0'" onmouseout="this.style.backgroundColor='transparent';" >item 4</div></li>   <li><div id="item5" x-blackberry-focusable="true" x-blackberry-onDown="blackberry.focus.setFocus('item1')"onmouseover="this.style.backgroundColor='#2070d0'" onmouseout="this.style.backgroundColor='transparent';" >item 5</div></li></ul><div></body> 

And the output is still a big chunk of code and not the dom element object I was expecting. Is there anything I am doing wrong, calling convention wise??

Link to comment
Share on other sites

I ended up completely changing the approach. I guess the blackberry tags do not necessarily utilise the 'this' I decided to not send any parameters and then when getting to the function I request what object is in focus which gives me the id. Not pretty and I am sure structrurally nasty, but got to get the thing done :) Thanks for your help

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...