Codeigniter input library not recognising ajax post data

15
September 19, 2019, at 03:50 AM

I am trying to build a file manager with CodeIgniter and bootstrap modal (as my popup for the file manager on a button click) where I list folders and files from a directory. Although the first load of the modal loaded the subfolders and files of the specific directory. This happened when I used .load() function for the very first time as an ajax call and I want to load the subfolders files and folders on click a specific subfolder but it's just like I am making a lot of mistakes that the Codeigniter input is not returned mine ajax request post data. I have tried a lot of ajax pattern but not successful. I even used print_r($_POST); but return empty array

Here are my codes:

Bootstrap Modal:

<div class="modal fade chivins_media" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" style="max-width: 87% !important;">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="media-buttons float-left">
                        <ul>
                            <li><a href="#"><img src="<?php echo base_url('public/icon/svg/folder (1).svg'); ?>" alt="Upload files"></a></li>
                            <li>+ New Folder</li>
                            <li>Move</li>
                        </ul>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-9">
                            <div class="card mb-4 border scrollbar border-warning" id="style-1">
                                <div class="card-body row force-overflow media-box" style="overflow: scroll; height: 550px">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Jquery Ajax Code:

    $(document).ready(function()
        {
            var site_url = $('body').attr('data-site-url');
            $(".chivins_media").on("show.bs.modal", function(event)
            {
                $(this).find(".media-box").load(site_url+'medias', function() 
                {
                    files_on_click()
                    load_folder();

                    function load_folder() {
                        $('.media-folder').click(function(event) {
                            var path = $(this).attr('data-folder-path'),
                                post_data = {'path': path};
                            $.ajax({
                                url: site_url+"medias/folderitems/",
                                type: 'post',
                                cache: false,
                                data: {p: path},
                                success: function(data) 
                                {
                                    console.log(data);
                                    $(this).parents('.media-box').html(data);
                                    files_on_click();
                                    load_folder();
                                },
                                error: function(data) {
                                    console.log(data);
                                }
                            });

                            // do the ajax bit

                            // $.post('ajax_get_preview', post_data, function(theResponse){
                            //     // load the modal window with the relevant content returned
                            //     $('#modal-content').html(theResponse);
                            // });
                            // $.post(site_url+"medias/folderitems/", post_data, function(data){ 
                            //     alert(data);
                            // }, "html");
                        });
                    }
                    function files_on_click() 
                    {
                        var files = [];
                        $(".media-file").click(function(event)
                        {
                            var media_id = $(this).find('img').attr('data-file');
                            if ($(this).hasClass('selected-media')) {
                                $(this).removeClass('selected-media');
                                files.splice(files.indexOf(media_id),1); 
                            } 
                            else {
                                $(this).addClass('selected-media');
                                files.push( media_id );
                            }
                            // console.log( files );
                        });
                    }
                });
            });

        });

here is my controller code

Controller


    public function index()
        {
            $data = $this->media_manager->scan_dir();
            echo $this->media_builder($data);
        }
        public function folderitems()
        {
            // print_r($this->input->post());
            print_r($_POST);
            //  $path = $this->input->get('path', true);
            //  $medias = $this->media_manager->scan_dir($path);
            // echo $this->mediabuilder($medias);
        }

I want to list a file and folders of a directory one after the other on button click

Any help is appreciated thanks

Answer 1

Thanks, everyone I think I have solved my problem through many trial and error but if you still have a better option still post it here.

I just did some adjustments to my code by encrypting a return value like uploads/images/users with base64_encode and then retrieve it with var path = $(this).attr('data-folder-path'); then reajust my ajax load function. Below is my ajustments

Jquery

                function load_folder() {
                    $('.media-folder').click(function(event) {
                        var path = $(this).attr('data-folder-path');
                        $(this).parents('.media-box').load(site_url+"medias/folderitems/"+path, function(data){
                            files_on_click();
                            load_folder();
                        });
                    });
                }

controller

        public function folderitems()
        {
            $path = base64_decode($this->uri->segment(4));
            echo $path; // It returns uploads/images/users
        }

if you still have a better option post it. Thanks for your help

READ ALSO
JQuery EasyAutoComplete autopopulates fields but Values not being Submitted with Form

JQuery EasyAutoComplete autopopulates fields but Values not being Submitted with Form

I've successfully implemented EasyAutoComplete with an address form

23
Drop element centered on mouse position

Drop element centered on mouse position

I have a container where I want to drop an image from a menu below but when I drop it at the main container I cannot get the proper position, it seems it is dropped randomly in the containerHow can I get the item dropped centered at mouse position?

11
How to write a column template to display and checked the checkbox conditionally where Columns are generating dynamically

How to write a column template to display and checked the checkbox conditionally where Columns are generating dynamically

I have a requirement to generate the number of columns dynamically while loading the screen based on the value that comes from databaseI could create the Kendo grid columns based on the input

34
How can I append content within a &lt;div&gt; in HTML into an existing text file? [on hold]

How can I append content within a <div> in HTML into an existing text file? [on hold]

I am generating some data on my html page using JavaScript withinOn the click of a button, I want to append this data to an existing txt file

26