Hi Zoya,

Is it possible for you to send us the full Wiki code itself that you're using so we can try and reproduce the issue on our end and get a better understanding as to what is happening?

We do not have enough information to understand what is actually happening here and the information on the script tags used do not give us enough insight on the issue.

Regards,

Jon

<script>
    LABKEY.Utils.requiresScript("https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js");
    LABKEY.Utils.requiresScript("https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js");
    LABKEY.Utils.requiresCSS("https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css");

//code.stephenmorley.org
var CollapsibleLists=function(){function e(b,c){[].forEach.call(b.getElementsByTagName("li"),function(a){c&&b!==a.parentNode||(a.style.userSelect="none",a.style.MozUserSelect="none",a.style.msUserSelect="none",a.style.WebkitUserSelect="none",a.addEventListener("click",g.bind(null,a)),f(a))})}function g(b,c){for(var a=c.target;"LI"!==a.nodeName;)a=a.parentNode;a===b&&f(b)}function f(b){var c=b.classList.contains("collapsibleListClosed"),a=b.getElementsByTagName("ul");[].forEach.call(a,function(a){for(var d=a;"LI"!==d.nodeName;)d=d.parentNode;d===b&&(a.style.display=c?"block":"none")});b.classList.remove("collapsibleListOpen");b.classList.remove("collapsibleListClosed");0<a.length&&b.classList.add("collapsibleList"+(c?"Open":"Closed"))}return{apply:function(b){[].forEach.call(document.getElementsByTagName("ul"),function(c){c.classList.contains("collapsibleList")&&(e(c,!0),b||[].forEach.call(c.getElementsByTagName("ul"),function(a){a.classList.add("collapsibleList")}))})},applyTo:e}}();

//code.stephenmorley.org
var runOnLoad=function(c,o,d,e){function x(){for(e=1;c.length;)c.shift()()}o[d]?(document[d]('DOMContentLoaded',x,0),o[d]('load',x,0)):o.attachEvent('onload',x);return function(t){e?o.setTimeout(t,0):c.push(t)}}([],window,'addEventListener');
</script>

    <div data-role="main" class="ui-content">
<a href="#myPopup" data-rel="popup" id='pButton'>Select Option</a>
    <div data-role="popup" id="myPopup" class="ui-content" style='min-width:250px'>
        <form>
            <div>
                <ul class="collapsibleList">
                    <li class='li'>
                        1
                        <ul>
                            <li class='li'>1.1
                                <ul>
                                    <li><a class='col'>1.1.1</a></li>
                                    <li><a class='col'>1.1.2</a></li>
                                </ul>
                            </li>
                            <li class='li'>1.2
                                <ul>
                                    <li><a class='col'>1.2.1</a></li>
                                    <li><a class='col'>1.2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class='li'>
                        2
                        <ul>
                            <li class='li'>2.1
                                <ul>
                                    <li><a class='col'>2.1.1</a></li>
                                    <li><a class='col'>2.1.2</a></li>
                                </ul>
                            </li>
                            <li class='li'>2.2
                                <ul>
                                    <li><a class='col'>2.2.1</a></li>
                                    <li><a class='col'>2.2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div id='OntSelected'></div>
</div>

<script>
    runOnLoad(function(){
        CollapsibleLists.apply();
    });
    $('.col').click(function(){
        $('#OntSelected').text($(this).text());
        alert('HI');
    });
</script>

<style>
    .collapsibleList li{
      list-style-image : url('add.png');
      cursor : auto;
    }

    li.collapsibleListOpen{
      list-style-image : url('minus.png');
      cursor : pointer;
    }

    li.collapsibleListClosed{
      list-style-image : url('add.png');
      cursor : pointer;
    }

    .col{
        color:#1A5276;
        margin: 1px 1px;
    }
    .col:hover{
        color:#1A5276;
        font-weight:bold;
        margin: 1px 1px;
    }
</style>

Hi Zoya,

I've attached an updated example using the wiki code you provided. Take a look and see if this helps. A couple notes:

- When using the LABKEY.requiresScript method it is recommended you always use it with a provided callback. This is what ensures the code is loaded before executing your code that might depend on it (e.g. jQuery). See https://www.labkey.org/Documentation/wiki-page.view?name=scriptdepend
- The "runOnLoad" method you provide seems to be satisfied by jQuery which provides a "$.ready(...)" method. See here for the shorthand version I used in the example: https://api.jquery.com/ready/

As for the "...it just shows the loading sign. There is no progress after that..." that you mentioned I think this is an issue jQuery mobile that you are including on the page. It is doing some hook on all links on the page and causing an error to throw whenever you click on a link the page (I had to navigate by modifying the URL directly after loading a page with jQuery mobile on it).

Thanks,
Nick Kerr