Start a new topic

onClick function not working with JQuery

onClick function not working with JQuery


I want to use JQuery (mobile) in my ArchitectWorld to display some fix elements and to show a popup dialog when a poi is clicked.

For the pois I created an ImageDrawable and defined an onClick-function:

 imageDrawable.onClick = (function() {
         console.log("onclick start");
         var curId = id;
         return function() {
          console.log("poi clicked: " + curId);

With or without using JQuery I can see "onclick start" in the console when the ImageDrawable is created. But when I click on that POI only when I remove JQuery the onClick-Function is actually triggered and I see "poi clicked" in the console output.

Can you give me a hint, how I can use JQuery and actually be able to click my ImageDrawable?

Thanks and best regards

JQuery mobile might overlap the viewing area with non visible elements. Make sure that you use a page with the background set to none.

<div data-role="page" id="foo" style="background: none;">


This allows the click to be picked up by architect and passed to the AR View.

Thanks, that worked. I should have thought of that myself. I set the background "transparent" instead of "none".

But now I run into the next problem: the popup won't open. I have declared a div with data-role="popup":

<div data-role="popup" id="poiInfoPopup">

and I tried to show it with:



When I try this in a simple phonegap-app it works, but not in my ArchitectWorld. What did I miss this time? Or do you have an example how to use JQuery in an ArchitectWorld?

Thanks and best regards


We've used JQuery mobile in a few of our worlds successfully, but I don't think we have yet used popups. It would be great if you can try it in the desktop browser using the ADE (ade.js) and use the onboard debugging tools to check if the call is successfully received and handled by jquery mobile.

Addtionally a stripped down sample that demonstrates the issue would help for further investigations.

Sorry for not answering sooner. I tried what you proposed. Below this post you find a stripped down example. When I add ade.js to that example and open it in Chrome, the popup works fine when I click on the button. When I load that file in my Phonegap-App (WikitudePlugin.loadARchitectWorld("assets/www/arview.html");) the popup won't open. How can I make it work?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<!-- <meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="css/themes/default/" />
<title>My ARchitect World</title>

<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/"></script>


<body style="background: none;">

     <div data-role="page" data-theme="a" data-overlay-theme="a" id="start"
        style="background: none;">
     <div data-role="popup" id="poiInfoPopup">

        <div data-role="footer" data-id="footernavbar" data-position="fixed">
            <div data-role="navbar">
                    <li><a onClick="$('#poiInfoPopup').popup('open');" class="ui-btn-active ui-state-persist">Show Popup</a></li>
            <!-- /navbar -->
        <!-- /footer -->


i tired your example and it is working for me. However I'm not using phonegap, but it would be strange if that has any affect. I suggest trying to use on device debugging (if you happen to have an iOS device).

please verify that all necessary files are correctly referenced. If you fail in finding the cause, you can send the complete phonegap project and we will have a look at it.
Login or Signup to post a comment