Type Ahead/ DataTable/ Delete Modal

by lokointhehouse2

HTML

<cfquery name="qryDPPUsers" datasource="CERES_ST">
    SELECT u.winid
    FROM tbl_TOOLS_DPPSapphire_Users u WITH (NOLOCK)
    WHERE u.isActive = 1
    AND userTypeID = 1
</cfquery>

<cfset variables.dppuser = #valuelist(qryDPPUsers.winid)#>

<cfquery name="qryDPPProfileUsers" datasource="OpsInsight">
    SELECT p.winid, p.firstname, p.lastname, pm.firstname AS pmfirstname, pm.lastname AS pmlastname, d.strDepartmentName, (p.firstname + ' ' + p.lastname) as fullname
    FROM profile p WITH (NOLOCK)
        INNER JOIN profile pm WITH (NOLOCK) on p.managerresourceid = pm.resourceid
        INNER JOIN rm_department d WITH (NOLOCK) on pm.departmentid = d.intDepartmentId
    Where p.statusIdRM = 'A' and p.winid in (<cfqueryparam value="#variables.dppuser#" list="true" cfsqltype="cf_sql_varchar">)
</cfquery>

<script type="text/javascript">
$(function(){

    $('.typeahead').typeahead({
        // Only call ajax if at least 3 characters are entered
        minLength: 3,
        // Ajax to get the matches
        source: function(query, process){
            return $.getJSON("ajax_userDPPLookup.cfm?q="+query, function(data){
               return process(data);
                });
        },
        // What to display
        displayText: function(item){
            return item.firstname+ ' '+item.lastname+ ' - '+item.strDepartmentName;
        },
        // What happens when an option is selected
        afterSelect: function(item){
            console.log(item);
            // Save data
            $.post('ajax_insertDPPuser.cfm?q=', {winid: item.winid}, function(result,status){

                if (result == '') {

                    // Add record to table
                    var tbody = $('.table tbody').prepend('<tr class="success" id="'+item.winid+'"><td>'+item.firstname+'</td><td>'+item.lastname+'</td><td>'+item.pmfirstname+'</td><td>'+item.pmlastname+'</td><td>'+item.strDepartmentName+'</td><td><button class="btn btn-danger btn-sm"...

JavaScript

<link href="/core/lib/dataTables/DataTables-1.10.4/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="bootstrap3-typeahead.min.js"></script>




<script type="text/javascript">
$(function(){

    $('.typeahead').typeahead({
        // Only call ajax if at least 3 characters are entered
        minLength: 3,
        // Ajax to get the matches
        source: function(query, process){
            return $.getJSON("ajax_userDPPLookup.cfm?q="+query, function(data){
               return process(data);
                });
        },
        // What to display
        displayText: function(item){
            return item.firstname+ ' '+item.lastname+ ' - '+item.strDepartmentName;
        },
        // What happens when an option is selected
        afterSelect: function(item){
            console.log(item);
            // Save data
            $.post('ajax_insertDPPuser.cfm?q=', {winid: item.winid}, function(result,status){

                if (result == '') {

                    // Add record to table
                    var tbody = $('.table tbody').prepend('<tr class="success" id="'+item.winid+'"><td>'+item.firstname+'</td><td>'+item.lastname+'</td><td>'+item.pmfirstname+'</td><td>'+item.pmlastname+'</td><td>'+item.strDepartmentName+'</td><td><button class="btn btn-danger btn-sm" data-record-id="'+item.winid+'" data-record-title="'+item.firstname+' '+item.lastname+'" data-toggle="modal" data-target="#confirm-delete">Remove User</button></td></tr>');

                    // Remove highlight
                    setTimeout(function(){
                        tbody.find('tr').first().toggleClass('success', 2000);
                    },2000);
                // Reset input field
                } else {
                    $('#message').addClass("alert alert-danger").append("User Already Exist").show().delay(5000).fadeOut(400, function() {$('#message').html("");});
                };
            $('.typeahead').val('');
...