moveTo not working with onClick event in dojox.mobile.ListItem

Question

I am developing a web page using Dojo mobile v1.5.1.

Below is the sample code.

<div dojotype="dojox.mobile.View" selected="true" id="view1">
  <div dojotype="dojox.mobile.Heading" label="dojox.mobile.Heading"></div>
  <div dojotype="dojox.mobile.EdgeToEdgeCategory" label=
  "dojox.mobile.EdgeToEdgeCategory"></div>
<div dojotype="dojox.mobile.EdgeToEdgeList">

  <!-- PROBLEM IS IN THIS DIV TAG -->
  <div dojotype="dojox.mobile.ListItem" moveto="view2" transition="slide"
  label="dojox.mobile.ListItem" onclick=
  "document.getElementById(&quot;cfText&quot;).innerText = &quot;Value set&quot;;"
  id="listItem1"></div>

</div>
</div>

<div dojotype="dojox.mobile.View" id="view2">
<div dojotype="dojox.mobile.Heading" label="dojox.mobile.Heading" back="Back" moveto=
"view1"></div>
<div dojotype="dojox.mobile.EdgeToEdgeList">
  <div dojotype="dojox.mobile.ListItem">
    <span id="cfText" class="xspTextComputedField">Value NOT set</span>
  </div>
</div>
</div>

What it does is, when the div tag with with id "listItem1" is clicked it shows div tag with id "view2". But when I add the onClick event in it, it does NOT work. Without the onClick event it works fine.

Answer 1

GOT IT!

Add the following script:

<script type="text/javascript"> 
function setValue() {
    var cfText = dojo.byId("cfText");
    cfText.innerHTML = "Value Set";
}
dojo.addOnLoad(
    function() {
        dojo.connect(dijit.byId("listItem1"), "onClick", dojo.hitch(dijit.byId("listItem1"), setValue));
    }
);
</script> 

Also remove the "onClick" attribute value from div tag with id "listItem1".

Thanks to this discussion for helping me out.

Answer 2

What are you trying to do with the onclick event?

Couldn't you rewrite that line like the following:

<div dojotype="dojox.mobile.ListItem" transition="slide"
  label="dojox.mobile.ListItem" onclick="someNewFunction(this)" id="listItem1">

Then create a new function to do what you want:

function someNewFunction(obj) {
  var cfText = dojo.byId("cfText");
  cfText.innerHTML = "Value";
  obj.transitionTo("move2");
}

Hope that helps and I understood you correctly.

EDIT:

Also I when I tried to use moveTo with an onClick on a listItem the onClick would work and the moveTo would not. You can remove the moveTo attribute and add this line in the last line of your new function:

this.transitionTo("move2");

EDIT AGAIN:

Also you could remove the transition as well and add it to the transitionTo call.