Dropdown Menu does not work if i create it with jquery

[jloguercio]

Hi, my english is so bad, but well, when i try create it with jquery using ajax to set a post to a php file where i create a variable where i mark up the entire html code for the menu like this :

in my menu i got this

<aside class="left-side sidebar-offcanvas">
      <section class="sidebar">
            <ul id="Menu" class="sidebar-menu"></ul>
      </section>
</aside>

this is my .js

$(document).ready(function() {

    $(window).load(function() {
        $.ajax({
        data: 'action=obtenerMenu',
        url: '../controladores/CtrlSession.php',
        type: 'POST',
        success: function(response) {
                $('#Menu').html(response);
            }
        })
});

And this is my php file

<?php

if(isset($_POST['action'])){
    $action=$_POST['action'];
    if(is_callable($action)){
        $action();
    }
}

function obtenerMenu(){
$Menu = "<li class='treeview'><a href='#'><i class='fa fa-cloud-download'></i> <span>Riego</span><i class='fa fa-angle-left pull-right'></i></a><ul class='treeview-menu'><li><a href='Fertilizacion.php'><i class='fa fa-angle-double-right'></i> Fertilización</a></li><li><a href='Agua.php'><i class='fa fa-angle-double-right'></i> Agua</a></li></ul></li>";

echo $Menu;
}

?>

this works fine it create the menu and its ok, but when i click the menu the dropdown doesnt work!

but if i directly paste the entire html menu code it works and its the same html code that i copy and paste to the variable

how can i fix it?

[almasaeed2010]

$(document).ready(function() {

    $(window).load(function() {
        $.ajax({
        data: 'action=obtenerMenu',
        url: '../controladores/CtrlSession.php',
        type: 'POST',
        success: function(response) {
                $('#Menu').html(response);
                $.AdminLTE.tree();
            }
        })
});

That should fix your issue.

The only other way to do it is to lest your ajax return the link titles only without the html and let jQuery create the elements for you. But it is a lot more work than one line of code.

[jloguercio]

Hi and thanks for the reply

$.AdminLTE.tree(); this cant solve my issue, in the console shows :

Uncaught TypeError: Cannot read property 'tree' of undefined

[almasaeed2010]

Did you place your code after loading the app.js file?

[jloguercio]

Yes i do but i found the correct solution using this : $(".treeview").tree(); i found it in app.js trying to modify some code there ... but it works fine ! Thank you very much

[almasaeed2010]

Oh I am sorry. It was supposed to be $.AdminLTE.tree('.sidebar'). I am not sure why your way works though. You should test it on all browsers that you'd like to support. Thanks!