Wikitude

OnClick Function Fail To Response

 

Hi All,

 

I'm displaying 1 Background Image and 1 small X button to close the box.

 

Calling a function on a close button which is on top of a background. Btw Background also has a click listener.

Now when i click on POI/Background it works but when i click on close-button, it doesn't respond. Why?

Is it because of the priority..? Like IF the container (Background) also has click-listener then all the sub component on it will get fail to respond to their listener?

Is there anyone who faced same issue and now resolved it? 

If anyone knows the root cause of it or it's solution, please do share it with me. Thanks in advance.

 

HERE IS CODE

 

function loadPOIs(jsonData){                

              document.getElementById("statusElement").innerHTML='Poi Loading....';                              

                jsonObject = JSON.parse(jsonData);

                var bubbleBG = new AR.ImageResource("bg_property_bubble.png");

                var closePOIBtn = new AR.ImageResource("hide_button.png");                

 

                for(var i = 0; i < jsonObject.length; i++)

                {

                    var poidrawables = new Array();

                    

                    var bubbleImg = new AR.ImageDrawable(bubbleBG, 2.60,{

                                                         triggers:{

                                                         onClick:createClickTrigger(jsonObject.objID)}});

 

                    //Method-1

                    //var closePOIImgDrw = new AR.ImageDrawable(closePOIBtn, 1.5 ,{zOrder:1,offsetX:2.60, offsetY:0.70,{triggers: {

                    //                                                  onClick:testBtnClick('1')}}});

                    

                    //Method-2

                    var closePOIImgDrw = new AR.ImageDrawable(closePOIBtn,1.0,{zOrder:1,offsetX:2.60, offsetY:0.70});

                    

                    closePOIImgDrw.onClick = function testBtnClick(){

                        document.getElementById("statusElement").style.display = 'block';

                        document.getElementById("statusElement").innerHTML = 'Click Fired:' + jsonObject.objID;

                    }

 

                    jsonObject.bgImg = bubbleImg;

                    jsonObject.closeBtn = closePOIImgDrw;

                    poidrawables.push(bubbleImg);

                    poidrawables.push(closePOIImgDrw);

                    

                    var geoLoc = new AR.GeoLocation(jsonObject.Point.latitude,jsonObject.Point.longitude,jsonObject.Point.altitude);

                    var geoObj = new AR.GeoObject(geoLoc, {drawables: {cam:poidrawables, radar:markersAtRadar}});// markersAtRadar image defined

                    jsonObject.poiObj = geoObj;

                    geoObj.renderingOrder = 1;

                }//For end

                

                document.getElementById("statusElement").style.display = 'none';

            }//Function End

            

            

            

            function createClickTrigger(id) {

                document.getElementById("statusElement").style.display = 'block';

                document.getElementById("statusElement").innerHTML = 'On BG Click Fired: '+id;

            }

 

            

            function testBtnClick(id) {

                document.getElementById("statusElement").style.display = 'block';

                document.getElementById("statusElement").innerHTML = 'On Close Btn Click Fired: '+id;

            }

 

 

Regards!

Aamir Ali

iOS Apps Developer

Sr. Software Engineer
@ Time Group Limited

Hi  Chris,

Thanks to direct me on right source i was looking for.

Yes you are right according to wikitude documentation, we've to return BOOLEAN.

I also found if we gonna create onClick callback function while initialization of ARObject, it suddenly fires right after object's initialization.

I got it's solution by defining anonymous function inside callback function as 

 function closeBtnClick(){

                return function()

                {

                    alert("close button click event fire.");                    

                }                

                return true;

                

            }

 

 

By this way, button click event registered but if i want to pass any parameter to closeBtnClick function to use it when close Button Clicks.

 

For instance, on close buttn click i want to print that passing parameter on screen.

 

I'm doing it though this way which is not accepting by Wikitude architectView and I can't see any ARObject on the screen due to this approach.

 

 

 function closeBtnClick(param){

                return function()

                {

                    alert("close button click event fire. Param:"+param);

                }                

                return true;

                

            }

 

 

Can you please guide here what went wrong? Or Param variable doesn't accesible inside the anonymous function?

 

Regards!

Aamir Ali

 

Hi Guys,

Is there anybody who can answer my post??? :(

 

Regards!

Aamir Ali

Hi Guys,

 

Finally i got solution of my problem by exploring Javascript a bit in detail.

Its about Javascript Closures in which In-line function fail to transfer outer-world variable. So We've to store that outer-world variable into a local variable inside the In-line function and start using local variable now. But we also have to use (); at the end of the function which is like a magic statement.

Here is code that exactly looks like

 

 

for(var i=0; i<jsonObject.length; i++){

     closePOIImgDrw.onClick = (function(){

          var currentIndex = i;

          return function(){

                alert('My ID:'+currentIndex);//Here i'm using currentIndex local variable name not outer-function.

                removeSinglePOI(currentIndex);

              }

       })();

}//for end

 

 

It is working fine in my case and I'm glade to share this solution with others whoever get stuck in same kinda problem.

 

Regards!

Aamir Ali

iOS Apps Developer

Sr. Software Engineer @ TGD

 

 

Here is link from where i explored it.

http://stackoverflow.com/questions/111102/how-do-javascript-closures-work