Dojo Tooltip only shows after first mousover event -

-

i'm using dojo's event delegation connect tooltip widget dynamically generated dom nodes.

the dojo site explains event delegation way:

"the idea behind event delegation instead of attaching listener event on each individual node of interest, attach single listener node @ higher level, check target of events catches see whether bubbled actual node of interest; if so, handler's logic performed."

following code implementation. works beautifully ... except, tooltip shows after first mouse on event. when first mouseover node, event fires perfectly, tooltip doesn't render. show consequent mouseover events. on first mouseover event, can watch firebug console , see xhr.get go database , correct data. if comment out tooltip , throw in simple alert(), works first time.

any suggestions on how tooltip show on first mouseover event? in advance!

<div class="col_section" id="my_groups">     <div class="col_section_label">my groups</div>     <ul>     <?php         foreach($mygroups $grp) {             echo '<li><a class="mygrouplink" id="grp'.$grp['grp_id'].'">'.$grp['name'].'</a></li>';         }     ?>     </ul> </div>  <script>     require(["dojo/on",          "dojo/dom",          "dijit/tooltip",          "dojo/_base/xhr",          "ready!"], function(on, dom, tooltip, xhr) {      // group tooltip     var myobject = {         id: "myobject",         onmouseover: function(evt){             var grp_id = this.id;             var content = '';             xhr.get({                 url: "getgrpinfo.php",                 handleas: "json",                 content: {                     grp_id: grp_id,                     content: "tooltip"                 },                 load: function(info) {                     if(info == 0) {                         content  = '<div class="grptooltip">';                         content += '    information group confidential';                         content += '</div>';                     } else {                         content  = '<div class="grptooltip">';                         content += '    <img src="../ajax/getimg.php?id='+info.logo_id+'" />';                         content += '    <div style="text-align:center">'+info.name+'</div>';                         content += '</div>';                     }                      new tooltip({                         connectid: [grp_id],                         label: content                     });                 },                 error: function() {}             });         }     };     var div = dom.byid("my_groups");     on(div,".mygrouplink:mouseover",myobject.onmouseover); }); </script>

your tooltip not show on first onmouseover because not exist @ moment onmouseover event fired.

dijit/tooltip instances manage theirs mouse events themselves, not have manage onmouseover/onmouseout , did because not want preload data or want load data every time tooltip show.

beside dijit/tooltip instances can use tooltip.show(innerhtml, aroundnode, position) , tooltip.hide(aroundnode) display tooltips, in case have manage mouse events yourself, need, because ux perspective, not want show single tooltip, want to:

  1. show tooltip indicating information being loaded.

  2. then either:

    • display xhr loaded information if user still hover on node
    • cancel xhr , hide tooltip on mouseout

here working example: http://jsfiddle.net/phusick/3hmds/

require([     "dojo/dom",     "dojo/on",     "dojo/_base/xhr",     "dijit/tooltip",     "dojo/domready!" ], function(     dom,     on,     xhr,     tooltip ) {      on(dom.byid("groups"), ".group-link:mouseover", function(e) {         var target = e.target;         tooltip.show("loading...", target);          var def = xhr.post({             url: "/echo/html/",             content: { html: target.textcontent},             failok: true,              load: function(data) {                 tooltip._mastertt.xhr = null;                 tooltip._mastertt.containernode.innerhtml = data;                 tooltip._mastertt.domnode.width = "auto";              },             error: function(e) {                 if (e.dojotype != "cancel") {                     console.error(e);                 }             }         });          tooltip._mastertt.xhr = def;                 });      on(dom.byid("groups"), ".group-link:mouseout", function(e) {         var target = e.target;                 tooltip.hide(target);         if (tooltip._mastertt.xhr) {             tooltip._mastertt.xhr.cancel();         }     });     });​

Comments

Post a Comment

Popular posts from this blog

django - How can I change user group without delete record -

-
on website user have 1 group. , user can change group. it's made user.groups.clear() and user.groups.add(new_group) but it's not efficient, because there 2 sql query: delete, insert. how can change group update query? user , group related each other using manytomanyfield . means intersection table exists relating both entities, , if don't specify model map (using through attribute) django creates 1 you. looking @ sources django.contrib.auth.models see that's case. fortunatly, can access intermediary model using through attribute of manager (in case, user.groups.through ). can use regular model. example: >>> alice = user.objects.create_user('alice', 'alice@example.com', 'alicepw') >>> employee = group.objects.create(name='employee') >>> manager = group.objects.create(name='manager') >>> alice.groups.add(employee) >>> alice.groups.all() [<group: employee...
Read more

java - Need to add SOAP security token -

-
i need set custom soap header attribute on jax-ws generated webservice client. case webservice calls must go through proxy server requiring specific token (recieved web request header) present in soap request header. e.g.: 1 carserviceservice service = null; 2 service = new carserviceservice(new url(url), new qname(qname); 3 carserviceendpoint port = service.getcarserviceport(); it seems in line 3 wsdl retrieved , call fails due missing security token. 1 point direction on how done? a detailed example has been mentioned here: creating , deploying jax-ws web service on tomcat 6 this article shows how create , use security token .
Read more

java - EclipseLink JPA Object is not a known entity type -

-
i have strange problem eclipselink , object want persist. have 1 object (keypointlistimpl) stores object keypointimpl in list. persisting keypointimpl objects works great if try persist keypointlistimpl object java.lang.illegalargumentexception says object keypointimpl isn't known entity type. here keypointimpl code: @entity @table(name="keypoints") public class keypointimpl implements keypoint { @id @generatedvalue(strategy = generationtype.identity) private int id; @enumerated(enumtype.string) private detectortype keypointtype; private float x; private float y; private float size; private float angle; private float response; private int octave; private int classid; ... } here keypointlistimpl code: @entity @table(name="keypointlists") public class keypointlistimpl implements keypointlist { @id @generatedvalue(strategy = generationtype.identity) private int id; @onetoone(cascade={ca...
Read more