⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

GC doesnt work on charisma admin template

Started by , 07 April 2013 - 14:55 PM


DREON
  • profile picture
  • Member

Posted 07 April 2013 - 14:55 PM

i installed charisma admin template http://usman.it/themes/charisma/

 

but when i put grocery crud on it, it doesnt work like on datatables theme

 

no auto search for each column

the clear button not working

also the update buttons..


davidoster
  • profile picture
  • Member

Posted 07 April 2013 - 17:47 PM

Probably there is some js conflict or missing js. Review the html source code.


Zalo
  • profile picture
  • Member

Posted 07 April 2013 - 19:42 PM

I don't know about the datatables theme but if you use the twitter-bootstrap theme (available in the 1.4 beta now in github) It works fine.

True, you would have to check for duplicated jQuery and jQuery plugins, but besides that, It works great.

It's actually what I'm using in my projects.

 

Hope it helped!


DREON
  • profile picture
  • Member

Posted 08 April 2013 - 00:28 AM

thnx for the help david and zalo.. ill review it again..


DREON
  • profile picture
  • Member

Posted 08 April 2013 - 06:22 AM

the problem i check is the GC not compatible on my jquery-1.7.2.min.js

 

i try to delete first my jquery connection and the GC works great..


Zalo
  • profile picture
  • Member

Posted 08 April 2013 - 16:36 PM

Try to load all the GC files first, and comment on the template those that are repeated.


DREON
  • profile picture
  • Member

Posted 08 April 2013 - 23:59 PM

What do you mean zalo?
Maybe for me load the js and css of GC on controller, but i dont know how to do that.

Zalo
  • profile picture
  • Member

Posted 09 April 2013 - 05:19 AM

On the template, you have a list of css files and a list of js files.

Load the ones set by GC first (place the foreachs before each list) and comment on the template list those that GC is already loading. (jQuery for example)

Loading html stuff on the controller (unless it's a view) is HIGHLY discouraged and should be avoided unless there is no other option (which is not the case).

If you absolutely MUST send some output directly from the controller, all you need to do is an echo of what you want to print. Keep in mind that it will be placed "outside" the view, so if the view includes a html opening tag, and you echo something before the load->view, the output of the echo will appear before the html opening tag.

 

If on the other hand, what you are asking is how to add css and js files to the list that GC creates... there is (at least that I know of) not a function for that right now. What you might do, is to manually append the file to the variable that the render() function returns. That variable is actually an object that has at least 3 properties:

 - output: has the html GC creates (table, add form, etc.)

 - css: an array with the css files to load

 - js: an array with the js files to load

 

You may simply do something like this:

$output_from_render->js[]='/address/to/your/js/file/your_file.js'; //keep in mind what this will be loaded by the foreach on the view

 

for each js file you want to add... (and the same with css, since it is also an array).

 

Hope it helped! 


DREON
  • profile picture
  • Member

Posted 09 April 2013 - 06:45 AM

you mean sir zalo is i will put this

 

$output_from_render->js[]='/address/to/your/js/file/your_file.js';

 

on my controller on all my js, jquery and css ?


DREON
  • profile picture
  • Member

Posted 09 April 2013 - 06:50 AM

th


DREON
  • profile picture
  • Member

Posted 09 April 2013 - 06:52 AM

this is my view page:
<?php echo $this->load->('include/header');
<?php
foreach($css_files as $file): ?>
    <link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>
<?php foreach($js_files as $file): ?>
    <script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>


        <div class="row-fluid">
                <div class="box span12">
                    <div class="box-header well">
                        <h2><i class="icon-info-sign"></i> Introduction</h2>
                        <div class="box-icon">
                            <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
                            <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
                        </div>
                    </div>
                    <div class="box-content">
                        <p> <?php echo $output; ?></p>
                
                    <div class="clearfix"></div>
                    </div>
                </div>
            </div>
<?php echo $this->load->('include/footer');


this is my header containts of my css

<!DOCTYPE html>
<html lang="en">
<head>
  
    <meta charset="utf-8">
    <title>HRD Info.System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Human Resource Information System">
    <meta name="author" content="Dhen Paas">

    <!-- The styles -->
    <link href="<?=base_url('css/bootstrap-cerulean.css'); ?>" rel="stylesheet" type="text/css">
    <style type="text/css">
      body {
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
    </style>
    <link href="<?=base_url('css/bootstrap-responsive.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/charisma-app.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/jquery-ui-1.8.21.custom.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/fullcalendar.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/chosen.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/uniform.default.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/colorbox.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/jquery.cleditor.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/jquery.noty.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/noty_theme_default.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/elfinder.min.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/elfinder.theme.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/jquery.iphone.toggle.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/opa-icons.css'); ?>" rel="stylesheet" type="text/css">
    <link href="<?=base_url('css/uploadify.css'); ?>" rel="stylesheet" type="text/css">

    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- The fav icon -->
        <link href="<?=base_url('img/favicon.ico'); ?>" rel="shortcut icon">
        
</head>

<body>
    <?php if(!isset($no_visible_elements) || !$no_visible_elements)    { ?>
    <!-- topbar starts -->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="<?=site_url('auth/index'); ?>"> <img alt="Charisma Logo" src= "<?=base_url('img/favicon.ico'); ?>"/>  <span>HRIS</span></a>
                
                <!-- theme selector starts -->
                <div class="btn-group pull-right theme-container" >
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="icon-tint"></i><span class="hidden-phone"> Change Theme / Skin</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" id="themes">
                        <li><a data-value="classic" href="#"><i class="icon-blank"></i> Classic</a></li>
                        <li><a data-value="cerulean" href="#"><i class="icon-blank"></i> Cerulean</a></li>
                        <li><a data-value="cyborg" href="#"><i class="icon-blank"></i> Cyborg</a></li>
                        <li><a data-value="redy" href="#"><i class="icon-blank"></i> Redy</a></li>
                        <li><a data-value="journal" href="#"><i class="icon-blank"></i> Journal</a></li>
                        <li><a data-value="simplex" href="#"><i class="icon-blank"></i> Simplex</a></li>
                        <li><a data-value="slate" href="#"><i class="icon-blank"></i> Slate</a></li>
                        <li><a data-value="spacelab" href="#"><i class="icon-blank"></i> Spacelab</a></li>
                        <li><a data-value="united" href="#"><i class="icon-blank"></i> United</a></li>
                    </ul>
                </div>
                <!-- theme selector ends -->
                
                <!-- user dropdown starts -->
                <div class="btn-group pull-right" >
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="icon-user"></i><span class="hidden-phone"> admin</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Profile</a></li>
                        <li class="divider"></li>
                        <li><a href="<?=site_url('auth/logout'); ?>">Logout</a></li>
                    </ul>
                </div>
                <!-- user dropdown ends -->
                
                <div class="top-nav nav-collapse">
                    <ul class="nav">
                        <li><a href="<?=site_url('auth/index'); ?>">Home</a></li>
                        <li>
                            <form class="navbar-search pull-left">
                                <input placeholder="Search" class="search-query span2" name="query" type="text">
                            </form>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <!-- topbar ends -->
    <?php } ?>
    <div class="container-fluid">
        <div class="row-fluid">
        <?php if(!isset($no_visible_elements) || !$no_visible_elements) { ?>
        
            <!-- left menu starts -->
            <div class="span2 main-menu-span">
                <div class="well nav-collapse sidebar-nav">
                    <ul class="nav nav-tabs nav-stacked main-menu">
                        <li class="nav-header hidden-tablet">Main</li>
                        <li><a class="ajax-link" href="<?=site_url('admin/main/index');?>"><i class="icon-home"></i><span class="hidden-tablet"> Dashboard</span></a></li>
                        <li><a class="ajax-link" href="<?=site_url('admin/main/admin_users'); ?>"><i class="icon-eye-open"></i><span class="hidden-tablet"> Users</span></a></li>    
                        <li><a class="ajax-link" href="<?=site_url('admin/main/faculty'); ?>"><i class="icon-user"></i><span class="hidden-tablet"> Faculty</span></a></li>
                        <li><a class="ajax-link" href="chart.html"><i class="icon-list-alt"></i><span class="hidden-tablet"> Charts</span></a></li>
                        <li><a class="ajax-link" href="typography.html"><i class="icon-font"></i><span class="hidden-tablet"> Typography</span></a></li>
                        <li><a class="ajax-link" href="gallery.html"><i class="icon-picture"></i><span class="hidden-tablet"> Gallery</span></a></li>
                        <li class="nav-header hidden-tablet">Sample Section</li>
                        <li><a class="ajax-link" href="table.html"><i class="icon-align-justify"></i><span class="hidden-tablet"> Tables</span></a></li>
                        <li><a class="ajax-link" href="calendar.html"><i class="icon-calendar"></i><span class="hidden-tablet"> Calendar</span></a></li>
                        <li><a class="ajax-link" href="grid.html"><i class="icon-th"></i><span class="hidden-tablet"> Grid</span></a></li>
                        <li><a class="ajax-link" href="file-manager.html"><i class="icon-folder-open"></i><span class="hidden-tablet"> File Manager</span></a></li>
                        <li><a href="tour.html"><i class="icon-globe"></i><span class="hidden-tablet"> Tour</span></a></li>
                        <li><a class="ajax-link" href="icon.html"><i class="icon-star"></i><span class="hidden-tablet"> Icons</span></a></li>
                        <li><a href="error.html"><i class="icon-ban-circle"></i><span class="hidden-tablet"> Error Page</span></a></li>
                        <li><a href="login.html"><i class="icon-lock"></i><span class="hidden-tablet"> Login Page</span></a></li>
                    </ul>
                    <label id="for-is-ajax" class="hidden-tablet" for="is-ajax"><input id="is-ajax" type="checkbox"> Ajax on menu</label>
                </div><!--/.well -->
            </div><!--/span-->
            <!-- left menu ends -->
    
            
            <noscript>
                <div class="alert alert-block span10">
                    <h4 class="alert-heading">Warning!</h4>
                    <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
                </div>
            </noscript>
            
            <div id="content" class="span10">
            <!-- content starts -->
            <?php } ?>


and my footer with js and jquery

        <?php if(!isset($no_visible_elements) || !$no_visible_elements)    { ?>
            <!-- content ends -->
            </div><!--/#content.span10-->
        <?php } ?>
        </div><!--/fluid-row-->
        <?php if(!isset($no_visible_elements) || !$no_visible_elements)    { ?>
        
        <hr>

        <footer>
            <p class="pull-left">&copy; <a href="#" target="_blank">Dhen Paas</a></p>
            <p class="pull-right">Powered by: <a href="#">HRIS</p>
        </footer>
        <?php } ?>

    </div><!--/.fluid-container-->

    <!-- external javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

<!-- jQuery -->
    <script src= "<?=base_url('js/jquery-1.7.2.min.js'); ?>"></script>
    <!-- jQuery UI -->
    <script src= "<?=base_url('js/jquery-ui-1.8.21.custom.min.js'); ?>"></script>
    <!-- transition / effect library -->
    <script src= "<?=base_url('js/bootstrap-transition.js'); ?>"></script>
    <!-- alert enhancer library -->
    <script src="<?=base_url('/js/bootstrap-alert.js'); ?>"></script>
    <!-- modal / dialog library -->
    <script src="<?=base_url('js/bootstrap-modal.js'); ?>"></script>
    <!-- custom dropdown library -->
    <script src="<?=base_url('js/bootstrap-dropdown.js'); ?>"></script>
    <!-- scrolspy library -->
    <script src="<?=base_url('js/bootstrap-scrollspy.js'); ?>"></script>
    <!-- library for creating tabs -->
    <script src="<?=base_url('js/bootstrap-tab.js'); ?>"></script>
    <!-- library for advanced tooltip -->
    <script src="<?=base_url('js/bootstrap-tooltip.js'); ?>"></script>
    <!-- popover effect library -->
    <script src="<?=base_url('js/bootstrap-popover.js'); ?>"></script>
    <!-- button enhancer library -->
    <script src="<?=base_url('js/bootstrap-button.js'); ?>"></script>
    <!-- accordion library (optional, not used in demo) -->
    <script src="<?=base_url('js/bootstrap-collapse.js'); ?>"></script>
    <!-- carousel slideshow library (optional, not used in demo) -->
    <script src="<?=base_url('js/bootstrap-carousel.js'); ?>"></script>
    <!-- autocomplete library -->
    <script src="<?=base_url('js/bootstrap-typeahead.js'); ?>"></script>
    <!-- tour library -->
    <script src="<?=base_url('js/bootstrap-tour.js'); ?>"></script>
    <!-- library for cookie management -->
    <script src="<?=base_url('js/jquery.cookie.js'); ?>"></script>
    <!-- calander plugin -->
    <script src="<?=base_url('js/fullcalendar.min.js'); ?>"></script>
    <!-- data table plugin -->
    <script src="<?=base_url('js/jquery.dataTables.min.js'); ?>"></script>

    <!-- chart libraries start -->
    <script src="<?=base_url('js/excanvas.js'); ?>"></script>
    <script src="<?=base_url('js/jquery.flot.min.js'); ?>"></script>
    <script src="<?=base_url('js/jquery.flot.pie.min.js'); ?>"></script>
    <script src="<?=base_url('js/jquery.flot.stack.js'); ?>"></script>
    <script src="<?=base_url('js/jquery.flot.resize.min.js'); ?>"></script>
    <!-- chart libraries end -->

    <!-- select or dropdown enhancer -->
    <script src="<?=base_url('js/jquery.chosen.min.js'); ?>"></script>
    <!-- checkbox, radio, and file input styler -->
    <script src="<?=base_url('js/jquery.uniform.min.js'); ?>"></script>
    <!-- plugin for gallery image view -->
    <script src="<?=base_url('js/jquery.colorbox.min.js'); ?>"></script>
    <!-- rich text editor library -->
    <script src="<?=base_url('js/jquery.cleditor.min.js'); ?>"></script>
    <!-- notification plugin -->
    <script src="<?=base_url('js/jquery.noty.js'); ?>"></script>
    <!-- file manager library -->
    <script src="<?=base_url('js/jquery.elfinder.min.js'); ?>"></script>
    <!-- star rating plugin -->
    <script src="<?=base_url('js/jquery.raty.min.js'); ?>"></script>
    <!-- for iOS style toggle switch -->
    <script src="<?=base_url('js/jquery.iphone.toggle.js'); ?>"></script>
    <!-- autogrowing textarea plugin -->
    <script src="<?=base_url('js/jquery.autogrow-textarea.js'); ?>"></script>
    <!-- multiple file upload plugin -->
    <script src="<?=base_url('js/jquery.uploadify-3.1.min.js'); ?>"></script>
    <!-- history.js for cross-browser state change on ajax -->
    <script src="<?=base_url('js/jquery.history.js'); ?>"></script>
    <!-- application script for Charisma demo -->
    <script src="<?=base_url('js/charisma.js'); ?>"></script>
    
    <?php //Google Analytics code for tracking my demo site, you can remove this.
        if($_SERVER['HTTP_HOST']=='usman.it') { ?>
        <script>
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-26532312-1']);
            _gaq.push(['_trackPageview']);
            (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
            })();
        </script>
    <?php } ?>
    
</body>
</html>
 


Zalo
  • profile picture
  • Member

Posted 09 April 2013 - 08:00 AM

Only if you need to include some particular js that it's not in GC or the template.

 

You should check which js and css files GC loads and comment them on the template if they are repeated.