1

I'm developing a web application with AppMobi (a library based on jQMobi and not jQMobile) with two sidebars. Each sidebar shows when I click on the respectful button.

Buttons code:

<a id='button1' href="javascript:;" onclick='showMenu1()' class='icon folder' style='float:left' >Menu 1</a>
    <script>
    function showMenu1() {
            $("#menu2").html("#menu1");
    }
</script>

<a id='button2' href="javascript:;" onclick='showMenu2()' class='icon folder' style='float:left' >Menu 2</a>
    <script>
    function showMenu2() {
            $("#menu1").html("#menu2");
    }
</script>

Side navigation bars code:

<nav id="menu1" >
    <div class="icon star" >Node 1</div>
        <ul>
        <li><a href="#" >Sub-node 1</a></li>
        <li><a href="#" >Sub-node 2</a></li>
        <li><a href="#"  >Sub-node 3</a></li>
    </ul>
</nav>

<nav id="menu2" >
    <div class="icon star" >Node 1</div>
        <ul>
        <li><a href="#" >Sub-node 1</a></li>
        <li><a href="#" >Sub-node 2</a></li>
        <li><a href="#"  >Sub-node 3</a></li>
    </ul>
</nav>

The clicks work but not the "html" function. What is the problem ?

Thank you !

MHDaouas
  • 159
  • 2
  • 13

2 Answers2

1

HTML / button 1 / menu 2

<a id='button1' href="#" class='icon folder' style='float:left' >Menu 1</a>

Code

$('a#button1').on('click', function () {
 $("#menu2").html("#menu1");
});

HTML / button 2 / menu 1

<a id='button2' href="#" class='icon folder' style='float:left' >Menu 1</a>

Code

$('a#button2').on('click', function () {
 $("#menu1").html("#menu2");
});
Omar
  • 32,302
  • 9
  • 69
  • 112
  • Thank you for your answer. The function "on" is not integrated in jQMobi, which is a light version of jQMobile (or jQuery Mobile which is also lighter than the original jQuery library). Consequently, the code does not work. – MHDaouas Apr 02 '13 at 14:01
  • Well the click works with my code, the problem is in the html function. – MHDaouas Apr 02 '13 at 14:25
  • @MHDaouas check this example i created for you. http://jsfiddle.net/Palestinian/22Ta9/ – Omar Apr 02 '13 at 14:27
  • This is based on jQuery Mobile while I'm working on jQuery Mobi (jQMobi), a lightweight jQuery Mobile for web apps development. Your code does not work. – MHDaouas Apr 02 '13 at 14:46
  • 1
    First, it's not appMobi - appMobi was the company that developed jqMobi. Now it's App Framework :) Second - $().on is implemented . If it's not, you are running a version over a year old. Also, use $.ui.updateSideMenu to update the menu contents - http://app-framework-software.intel.com/api/index.html#$.ui.updateSideMenu –  Apr 02 '13 at 17:21
0

have you try this? 

$('a#button1').bind('click',function () {

  //your functions

});
dewa a. gitawidura
  • 1