Jump to content

jquery ajax support needed - bootstrap tree viewer


rootKID

Recommended Posts

Hello, been a while.

I'm trying to throw myself into something that is quite new to me, which is dealing with JSON data x)

I'm using bootstrap5 (latest version) on my project, and since im having a category with unknown numbers of sub categories, i found a good solutions for my database. However, making this work with JSON is a bit too much for me i think since i've been dealing with this problem for a few days now.

The problem is that in browser js console, i see that i get the response i wanted from my script with data returned in a form of array - however, i can't seem to figure out how to actually show theese datas! Im of course talking about names, texts, parent_id, id, etc...

Do you guys have any idea as to what im doing wrong?

This is my current javascript code - i can show you my PHP code as well should you need it.

Many thanks in advance!

$(document).ready(function() {

    function getTree( data ) {

        // Samples to get started on some ideas...
            // html()...
            // text()...
            //     -> this one needs a container and can take the text INSIDE of the container. Example below:
            //     -> <div>.text() can read this <span>and including this</span> as well as this</div>
            // $("[class*='CLASS-']").click
            //     -> looks for 'CLASS-' anywhere within the value of class attribute.
            // $(document).ready(function() {});
            //     $(this)
            //         -> will target the element that triggered the event, then you transverse to current anchor element. Example below:
            //         -> $(this).find('a.thumb').attr('title');
            //         -> -> You update the other modal details by referring with $(this) then the element you which to target each time. Example below:
            //         -> -> $('.modal-footer').find(videoTitle).html(INSERTDATA_videoDirector);
            //         -> -> -> and so on...
            //     (this).find().val()...
            // var TARGET_div = $('div');
            // var TARGET_id = $('#ID');
            // var TARGET_class = $('.CLASS');
            // var TARGET_class = $("[class*='CLASS-']");
        // Samples to get started on some ideas...

        /*
        var dataArray = [ data ];
        $.each(dataArray[0], function( i, val ) {
            $('#myTree').bstreeview({
                data: {
                    "id" : val.id,
                    "parent_id" : val.parent_id,
                    "name" : val.name,
                    "text" : val.text
                }
            });
        });
        */

        var dataArray = [ data ];
        console.log( "JQUERY AJAX -> FUNCTION RETURNS THIS -> VAR: dataArray[0]:" );
        console.log(dataArray[0]);

        return dataArray[0];

    }

    $.ajax({

        type: 'GET',

        url: 'inc/html/html-index.php/JQUERY_AJAX-categories_1/JQUERY_AJAX-categories_1.php?version=1_0_2',

        dataType: 'json', // needed only if you do not supply JSON headers on the PHP Script File side!

        success: function( data ) {

            dataArray = getTree( data );
            console.log( "JQUERY AJAX SUCCESS -> SHOWING RETURNED DATA FROM FUNCTION VIA VARIABLE CREATED JUST ABOVE THIS LOG -> VAR: dataArray:" );
            console.log( dataArray );
            console.log( "================================" );
            console.log( "Just beneath here, i will use via the jQuery library the '$.each' function, and make use of my VAR called dataArray - which is the data returned from the function where we generate all the data and order it!" );
            console.log( "================================" );
            $.each( dataArray, function( i, val ) {

                console.log( val.id );
                console.log( val );
                $('#myTree').bstreeview({
                    // data: { "id" : val.id, "parent_id" : val.parent_id, "name" : val.name, "text" : val.text }
                    data: val
                });

            });

        },

        error: function( errorThrown ) { alert( "JQUERY_AJAX Error: " + errorThrown.message ); }

    });
});

Link for github with the project im trying to make work:

https://github.com/nhmvienna/bs5treeview

 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...