KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Issue with Modal Popups when Report rendered in Page #2293

Open Ron opened this topic on on Aug 22 - 20 comments

Ron commented on Aug 22

When I render a report inside a page I have an issues with bootstrap modal. it gives an error .modal in not a function. my report does not include any bootstrap extensions(not BostrapCss and not Amzing theme) but still it give the same error. when I put the same report in a modal and show it by click it works. only when I embed it in the page itself.

Ron commented on Aug 23

?

Sebastian Morales commented on Aug 24

Ron, pls post your report view code and screenshots of the error if possible. Tks,

Ron commented on Aug 24
<?php
require_once APPPATH."Libraries/koolreport/core/autoload.php";
use \koolreport\cube\processes\Cube;
use \koolreport\processes\Filter;

class Class_schedule extends \koolreport\KoolReport
{
    use \koolreport\export\Exportable;
    var $classList = null;

    function setup()
    {
       
        if ( $this->params['class_id'] != 0 ) {
            $this->classList[] = array('id'=>$this->params['class_id'], 'class_name'=>'');
        } else {
            $this->classList = is_array($this->params['class_list']) ? $this->params['class_list'] : [] ;
        }
        $this->src("db")
        //the last parameter 1 hides nn scedulabale professions 0 shows all.
        ->query('CALL getClassSchedule(:year, :class_id, 1)')
        ->params(array(
            ':year' => $this->params['year'],
            ':class_id' => $this->params['class_id']
        ))
        ->saveTo($node1);

        foreach ($this->classList as $class) {
            $node1->pipe( new Filter( array (
                //array("class_id", "=", $class['id'])
                array("class_id","contain",$class['id'])
            )))
            ->pipe(new \koolreport\processes\Map(array(
                "{value}" => function($row) {
                    $row['profession_name'] =
                        $row['profession_name'].
                        ( $this->params['show_teacher'] != null ? $row['teacher_name'] != '' ? '<br>'.$row['teacher_name'] : lang('tts.no_class') : null ).
                        ( $this->params['show_group_name'] != null ? '<br>'.$row['name'] : null ).
                        ( $this->params['show_room'] != null ? '<br>'.$row['room_name'] : null );
                    if ( $this->params['class_id'] != 0 ) {
                        $this->classList[0]['class_name'] = $row['class_name'];
                    }
                    return $row;
                }
            )))
            ->pipe(new \koolreport\processes\Map(array(
                "{end}" => function($count, $mapState) {
                    $emptyRows = [];
                    //$days = [1, 2, 3, 4, 5, 6]; //use day name if it's your case
                    foreach ($_SESSION['settings']->allowed_days as $key => $day) {
                        if ($day == 5 || $day == 6 ) {//if ($day ==true) {
                            foreach ($_SESSION['settings']->allowed_hours as $h_key => $hour) {
                                if ($hour == true) {
                                    $emptyRows[] = ['day' => $key, 'hour_num' => $h_key];
                                }
                            }
                        }
                    }
                    return $emptyRows;
                }
            )))
            ->pipe(new Cube(array(
                'row' => 'hour_num',
                'column' => 'day',
                'max' => 'profession_name'
            )))
            ->pipe(new \koolreport\processes\Map(array(
                "{value}" => function($row) {
                    foreach ($row as $k => $v)
                        if ($v == null) $row[$k] = "";
                    return $row;
                }
            )))
            ->pipe(new \koolreport\processes\Map(array(
                "{meta}" => function($meta) {
                    $colMetas = $meta["columns"];
                    foreach ($colMetas as $colKey => $colMeta) {
                        if (is_numeric($colKey)) {
                            $colMetas[$colKey]['label'] = lang("tts.day_$colKey"); //for columns '1', '2', etc
                            $colMetas[$colKey]['cssStyle'] = "width: 120px";
                        }
                        else {
                            $colMetas[$colKey]['label'] = lang("tts.$colKey"); //for column 'hour_num'
                            $colMetas[$colKey]['cssStyle'] = "width: 80px";
                        }
                    }
                    $meta["columns"] = $colMetas;
                    return $meta;
                }
            )))
            ->pipe(new \koolreport\processes\RemoveColumn(array(
                '{{all}}'
            )))
            ->pipe($this->dataStore("DS_" . $class['id']));
        }
    }
}
Sebastian Morales commented on Aug 24

I meant the report view where you use .modal class, not the report setup. If you can't provide a screenshot pls describe exactly what the problem/error is and where you load Bootstrap. Rgds,

Ron commented on Aug 25

this is the report code

<html>
<head>
    <title><?php echo lang('tts.report_class_schedule'); ?></title>
</head>
<body DIR="RTL">
    <?php
    foreach ( $this->classList as $class) {
        echo '<div class="header print-only"><img src="'.site_url('../assets/img/'.(isset($_SESSION['institute_number']) ? $_SESSION['institute_number'].'.png' : "logo.svg")).'" height="38" /></div>';
        echo '<h1 class="text-center pb-3">'. lang('tts.report_class_schedule'). ' ' .$class['class_name']. '</h1>';
        Table::create(array(
            "dataSource"=>$this->dataStore("DS_".$class['id']),
            "cssClass"=>array(
                "table"=>"table-bordered text-center",
                "th"=>"table-dark text-center",
            ),
            "sorting"=>array(
                "hour_num"=>"asc",
            )
        ));
        //echo '<div class="footer print-only">'.lang('tts.print_footer').'</div>';
        echo '<div class="page-break"></div>';
    }
    ?>
</body>
</html>

when I render the report inside my website it cause all my modal windows to stop working

Ron commented on Aug 25

In my website I use Bootstrap 4 and I have includes of CSS and JS. I have a a hidden modal dialog show when ever the page is submitted. it is a loading spinner. Once the page is rendered inside one of my pages '<BODY>' I start receiving a javascript error whenever I call the method modal('...') When the report is not rendered in the page everything works fine. as you see I don't use any package in the report so it shouldn't effect the parent container (my page body) but something is going wrong and I can't fin't the reason.

Sebastian Morales commented on Aug 26

This "modal is not a function" error could be because there're multiple instances of jQuery (Table widget always loads jQuery) or loading jQuery and Bootstrap js not in correct order. Please load jQuery first, then Bootstrap js, and add the following command just before your modal function call:

jQuery.noConflict(); // add this command
$('#myModal').modal('show');
Ron commented on Aug 26

I receive the following error: Uncaught TypeError: $ is not a function

Sebastian Morales commented on Aug 27

Did you load jQuery yourself? Pls try this:

jQuery.noConflict(); // add this command
jQuery('#myModal').modal('show');
Ron commented on Aug 27

The problem the this function call is called even before I load the rendered report. now when I use your solution I receive the error that Uncaught TypeError: $ is not a function. your solution works only after the report was rendered into the page. but I use jquery calls prior the load of the report. so if I I use your solution I need to change all the occurrences of $ on the page which does not make sense

$('#myModal').modal('show');
Sebastian Morales commented on Aug 27

For now just replace all $ with jQuery in your page to avoid conflict between loading multiple jQuery instances and Bootstrap js. We will see if we could check for existence of jQuery before loading it with KoolReport widget. Rgds,

Ron commented on Aug 27

Thanks. waiting for your update

Ron commented on Aug 31

any progress?

Sebastian Morales commented on Aug 31

Not yet, Ron. Pls keep the current solution. Or you could try this to see if it works:

jQuery.noConflict(); // add this command
$ = jQuery;
$('#myModal').modal('show');
Ron commented on Aug 31

Still gives the same error.

Ron commented on Sep 10

btw you should consider the same solution for JQUERY-UI widget. I see same happens on pages where there is a conflict with other version of JQUERY-UI

Ron commented on Sep 14

Any progress??

Sebastian Morales commented on Sep 15

Does this work for you:

$ = jQuery.noConflict(true);
$('#myModal').modal('show');

Is this only a matter of using either $ or jQuery for you? Rgds,

Ron commented on Sep 15

give the same error: utils.js:67 Uncaught TypeError: $(...).modal is not a function

Sebastian Morales commented on Sep 16

Let's try this last method:

jQuery.noConflict(true); // relinquish alias $ from all instances of jQuery
$ = jQuery; // assign alias $ to jQuery
$('#myModal').modal('show');

If this doesn't work we would have to find a way to prevent loading multiple instances of jQuery.

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
None yet

None