This topic contains 3 replies, has 2 voices, and was last updated by Sean Sean 2 years, 3 months ago.

Running jQuery in Angular Version


  • jkdoyle
    Participant

    Posts: 3
    Member Reply #6720

    I’m new to Angular, so this may be a simple issue.  How do I initialize or use existing jQuery or javascript in files that I’m pulling into the theme via Angular?    For example, in creating my own data table page as a simple demo, the jQuery in this does not run unless I refresh the page, and then it works.  I have tried using a separate js file to load the function (note the commented out baseTable.init() at the bottom), which was included in the modification of main.js.  Any tutorial links would be great for migrating from regular jQuery to Angular.

    <table><thead>
    <table id=”dg_base” class=”table table-striped table-bordered” style=”margin-left: 20px;” cellspacing=”0″ width=”80%”>
    <thead>
    <tr>
    <th>recordid</th>
    <th>fname</th>
    <th>lname</th>
    <th>email</th>
    <th>password</th>
    </tr>
    </thead>
    <tfoot>

    <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Extn.</th>
    <th>Start date</th>
    </tr>
    </tfoot>
    </table>
    </thead></table>

     

    <script>
    $(document).ready(function() {
    $(‘#dg_base’).DataTable( {
    “ajax”: “/tests/datatables/data/dg_get_records.php?table=staff_users&pkey=staffID&xfields=fname,lname,email_address,password&xsort=ASC&xsort_name=lname”,
    “columns”: [
    { “data”: “record_id” },
    { “data”: “fname” },
    { “data”: “lname” },
    { “data”: “email_address” },
    { “data”: “password” }
    ]
    } );
    } );

    //baseTable.init();
    </script>

    • This topic was modified 2 years, 3 months ago by  jkdoyle.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6728

    Hi,

    You should refer to the jquery plugin integration demos:
    http://keenthemes.com/preview/metronic/theme/admin_1_angularjs/#/form-tools

    You can just follow the code and integrate any jquery plugin with the AngularJS version of the theme.

    Also please note that when you execute a code within angularjs view you don’t have to use jquery ready event. You can just directly put any JS code there.

    Thanks.


    jkdoyle
    Participant

    Posts: 3
    Member Reply #6730

    Any chance you can show me how that all looks with the simple page and script that I included?

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6732

    Hi,

    Its always to refer similar working demo code. Please check below demo page in your downloaded theme:
    admin_1_angularjs/#/datatables/ajax.html

    This demo shows how you can use ajax datatable plugin.

    If you check the main.js you can find how this page is setup:

    // Ajax Datetables

    .state(‘datatablesAjax’, {

    url: “/datatables/ajax.html”,

    templateUrl: “views/datatables/ajax.html”,

    data: {pageTitle: ‘Ajax Datatables’},

    controller: “GeneralPageController”,

    resolve: {

    deps: [‘$ocLazyLoad’, function($ocLazyLoad) {

    return $ocLazyLoad.load({

    name: ‘MetronicApp’,

    insertBefore: ‘#ng_load_plugins_before’, // load the above css files before ‘#ng_load_plugins_before’

    files: [

    ‘../assets/global/plugins/datatables/datatables.min.css’,

    ‘../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css’,

    ‘../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css’,

     

    ‘../assets/global/plugins/datatables/datatables.all.min.js’,

    ‘../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js’,

    ‘../assets/global/scripts/datatable.js’,

     

    ‘js/scripts/table-ajax.js’,

    ‘js/controllers/GeneralPageController.js’

    ]

    });

    }]

    }

     

    })

    Also you can check the view under “views/datatables/ajax.html”

    I hope the above info will be helpful.

    Thanks.

Tagged: 

You must be logged in to reply to this topic.