Need to add features to existing article Help plz!

toddsimonds · February 16, 2017, 12:12am

I’m relatively new at web design with javascript and PHP so any assistance would be most appreciated. I found this Javascript article https://www.sitepoint.com/creating-a-scrud-system-using-jquery-json-and-datatables/ and was able to manipulate the code to work for my project but I had a few questions that it didn’t cover. I won’t post my code only because it’s so close to what’s at the link above.

I need to add a “Clone” button similar to the Edit and Delete ones at the link above that will allow me to duplicate a record and then add that record as a new record in the same table ultimately adding 1 to the index.

Also, I have checkboxes in my DB (1’s and 0’s) how do I get the edit page to display them as checked?

Lastly, I have a few textarea’s and need those to show as well but in the index if I set the input to textarea the formatting disappears.

Again, any help would be most appreciated. Thank you again in advance.

coderboy · February 16, 2017, 5:48am

##For Clone:

###In the webapp.js file

// Clone company
$(document).on('click', '.function_clone a', function(e){
  e.preventDefault();
  var company_name = $(this).data('name');
  if (confirm("Are you sure you want to clone '" + company_name + "'?")){
    show_loading_message();
    var id      = $(this).data('id');
    var request = $.ajax({
      url:          'data.php?job=clone_company&id=' + id,
      cache:        false,
      dataType:     'json',
      contentType:  'application/json; charset=utf-8',
      type:         'get'
    });
    request.done(function(output){
      if (output.result == 'success'){
        // Reload datable
        table_companies.api().ajax.reload(function(){
          hide_loading_message();
          show_message("Company '" + company_name + "' cloned successfully.", 'success');
        }, true);
      } else {
        hide_loading_message();
        show_message('Clone request failed', 'error');
      }
    });
    request.fail(function(jqXHR, textStatus){
      hide_loading_message();
      show_message('Clone request failed: ' + textStatus, 'error');
    });
  }
});

###In the data.php file

elseif ($job == 'clone_company'){
  
  // Clone company
  if ($id == ''){
    $result  = 'error';
    $message = 'id missing';
  } else {
    $query = "INSERT INTO ForgeRock(rank, company_name, industries, revenue, fiscal_year, employees, market_cap, headquarters) ".
              "SELECT rank, company_name, industries, revenue, fiscal_year, employees, market_cap, headquarters FROM it_companies ".
              "WHERE company_id = '" . mysqli_real_escape_string($db_connection, $id) . "'";
    $query = mysqli_query($db_connection, $query);
    if (!$query){
      $result  = 'error';
      $message = 'query error';
    } else {
      $result  = 'success';
      $message = 'query success';
    }
  }

}

##For 1’s and 0’s
Use Jquery’s prop() function:

(output.data[0].checkbox_field) ? $("#form_company #checkbox_field").prop('checked', true) : $("#form_company #checkbox_field").prop('checked', false);

##For textareas
Need to see what you are doing in your code

Use post rather than get for insert and update

toddsimonds · February 16, 2017, 1:48pm

Thank you so much I’ll try these this afternoon. For the 1’s and 0’s where and which file does that go in exactly? I’ll upload the code I’m currently working with this afternoon as well. Thank you again…

toddsimonds · February 16, 2017, 7:33pm

I tried the code above for the Clone Button and it works great. It appears that it’s adding the clone as a new record before it’s been edited though. I apologize, I don’t believe i mentioned that it would need to be doctored before being added. Is there a way to remedy that? Also, I’ve attached the code I’m currently working with, hopefully that will help. Thank you again.

webapp.js

$(document).ready(function(){
  
  // On page load: datatable
  var table_companies = $('#table_companies').dataTable({
    "ajax": "data.php?job=get_companies",
    "columns": [
      { "data": "var_1" },
      { "data": "var_2",   "sClass": "var_2" },
      { "data": "var_3" },
      { "data": "var_4" },
      { "data": "var_5" },
      { "data": "var_6" },
      { "data": "var_7" },
//      { "data": "var_8" },
      { "data": "functions",      "sClass": "functions" }
    ],
    "aoColumnDefs": [
      { "bSortable": false, "aTargets": [-1] }
    ],
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "oLanguage": {
      "oPaginate": {
        "sFirst":       " ",
        "sPrevious":    " ",
        "sNext":        " ",
        "sLast":        " ",
      },
      "sLengthMenu":    "Records per page: _MENU_",
      "sInfo":          "Total of _TOTAL_ records (showing _START_ to _END_)",
      "sInfoFiltered":  "(filtered from _MAX_ total records)"
    }
  });
  

  var form_company = $('#form_company');
  form_company.validate();

  // Show message
  function show_message(message_text, message_type){
    $('#message').html('<p>' + message_text + '</p>').attr('class', message_type);
    $('#message_container').show();
    if (typeof timeout_message !== 'undefined'){
      window.clearTimeout(timeout_message);
    }
    timeout_message = setTimeout(function(){
      hide_message();
    }, 8000);
  }
  // Hide message
  function hide_message(){
    $('#message').html('').attr('class', '');
    $('#message_container').hide();
  }

  // Show loading message
  function show_loading_message(){
    $('#loading_container').show();
  }
  // Hide loading message
  function hide_loading_message(){
    $('#loading_container').hide();
  }
  // Show lightbox
  function show_lightbox(){
    $('.lightbox_bg').show();
    $('.lightbox_container').show();
  }
  // Hide lightbox
  function hide_lightbox(){
    $('.lightbox_bg').hide();
    $('.lightbox_container').hide();
  }
  // Lightbox background
  $(document).on('click', '.lightbox_bg', function(){
    hide_lightbox();
  });
  // Lightbox close button
  $(document).on('click', '.lightbox_close', function(){
    hide_lightbox();
  });
  // Escape keyboard key
  $(document).keyup(function(e){
    if (e.keyCode == 27){
      hide_lightbox();
    }
  });
  
  // Hide iPad keyboard
  function hide_ipad_keyboard(){
    document.activeElement.blur();
    $('input').blur();
  }

  // Add button
  $(document).on('click', '#add_company', function(e){
    e.preventDefault();
    $('.lightbox_content h2').text('New File');
    $('#form_company button').text('Add New File');
    $('#form_company').attr('class', 'form add');
    $('#form_company').attr('data-id', '');
    $('#form_company .field_container label.error').hide();
    $('#form_company .field_container').removeClass('valid').removeClass('error');
    $('#form_company #var_1').val('');
    $('#form_company #var_2').val('');
    $('#form_company #var_3').val('');
    $('#form_company #var_4').val('');
    $('#form_company #var_5').val('');
    $('#form_company #var_6').val('');
    $('#form_company #var_7').val('');
    $('#form_company #var_8').val('');
    $('#form_company #var_9').val('');	
    show_lightbox();
  });

  // Add submit form
  $(document).on('submit', '#form_company.add', function(e){
    e.preventDefault();
    // Validate form
    if (form_company.valid() == true){
      // Send information to database
      hide_ipad_keyboard();
      hide_lightbox();
      show_loading_message();
      var form_data = $('#form_company').serialize();
      var request   = $.ajax({
        url:          'data.php?job=add_company',
        cache:        false,
        data:         form_data,
        dataType:     'json',
        contentType:  'application/json; charset=utf-8',
        type:         'get'
      });
      request.done(function(output){
        if (output.result == 'success'){
          // Reload datatable
          table_companies.api().ajax.reload(function(){
            hide_loading_message();
            var var_2 = $('#var_2').val();
            show_message("Record for '" + var_2 + "' added successfully.", 'success');
          }, true);
        } else {
          hide_loading_message();
          show_message('Add request failed', 'error');
        }
      });
      request.fail(function(jqXHR, textStatus){
        hide_loading_message();
        show_message('Add request failed: ' + textStatus, 'error');
      });
    }
  });

  // Edit button
  $(document).on('click', '.function_edit a', function(e){
    e.preventDefault();
    // Get information from database
    show_loading_message();
    var id      = $(this).data('id');
    var request = $.ajax({
      url:          'data.php?job=get_company',
      cache:        false,
      data:         'id=' + id,
      dataType:     'json',
      contentType:  'application/json; charset=utf-8',
      type:         'get'
    });
    request.done(function(output){
      if (output.result == 'success'){
        $('.lightbox_content h2').text('Edit File');
        $('#form_company button').text('Update Record');
        $('#form_company').attr('class', 'form edit');
        $('#form_company').attr('data-id', id);
        $('#form_company .field_container label.error').hide();
        $('#form_company .field_container').removeClass('valid').removeClass('error');
        $('#form_company #var_1').val(output.data[0].var_1);
        $('#form_company #var_2').val(output.data[0].var_2);
        $('#form_company #var_3').val(output.data[0].var_3);
        $('#form_company #var_4').val(output.data[0].var_4);
        $('#form_company #var_5').val(output.data[0].var_5);
        $('#form_company #var_6').val(output.data[0].var_6);
        $('#form_company #var_7').val(output.data[0].var_7);
        $('#form_company #var_8').val(output.data[0].var_8);
        $('#form_company #var_9').val(output.data[0].var_9);		
        hide_loading_message();
        show_lightbox();
      } else {
        hide_loading_message();
        show_message('Information request failed', 'error');
      }
    });
    request.fail(function(jqXHR, textStatus){
      hide_loading_message();
      show_message('Information request failed: ' + textStatus, 'error');
    });
  });
  
  // Edit submit form
  $(document).on('submit', '#form_company.edit', function(e){
    e.preventDefault();
    // Validate form
    if (form_company.valid() == true){
      // Send information to database
      hide_ipad_keyboard();
      hide_lightbox();
      show_loading_message();
      var id        = $('#form_company').attr('data-id');
      var form_data = $('#form_company').serialize();
      var request   = $.ajax({
        url:          'data.php?job=edit_company&id=' + id,
        cache:        false,
        data:         form_data,
        dataType:     'json',
        contentType:  'application/json; charset=utf-8',
        type:         'get'
      });
      request.done(function(output){
        if (output.result == 'success'){
          // Reload datatable
          table_companies.api().ajax.reload(function(){
            hide_loading_message();
            var var_2 = $('#var_2').val();
            show_message("Record for '" + var_2 + "' edited successfully.", 'success');
          }, true);
        } else {
          hide_loading_message();
          show_message('Edit request failed', 'error');
        }
      });
      request.fail(function(jqXHR, textStatus){
        hide_loading_message();
        show_message('Edit request failed: ' + textStatus, 'error');
      });
    }
  });
  
    // Duplicate button
  $(document).on('click', '.function_clone a', function(e){
    e.preventDefault();
    // Get information from database
    show_loading_message();
    var id      = $(this).data('id');
    var request = $.ajax({
      url:          'data.php?job=get_company',
      cache:        false,
      data:         'id=' + id,
      dataType:     'json',
      contentType:  'application/json; charset=utf-8',
      type:         'get'
    });
    request.done(function(output){
      if (output.result == 'success'){
        $('.lightbox_content h2').text('New File (Duplicated)');
        $('#form_company button').text('Insert New Record');
        $('#form_company').attr('class', 'form edit');
        $('#form_company').attr('data-id', id);
        $('#form_company .field_container label.error').hide();
        $('#form_company .field_container').removeClass('valid').removeClass('error');
        $('#form_company #var_1').val(output.data[0].var_1);
        $('#form_company #var_2').val(output.data[0].var_2);
        $('#form_company #var_3').val(output.data[0].var_3);
        $('#form_company #var_4').val(output.data[0].var_4);
        $('#form_company #var_5').val(output.data[0].var_5);
        $('#form_company #var_6').val(output.data[0].var_6);
        $('#form_company #var_7').val(output.data[0].var_7);
        $('#form_company #var_8').val(output.data[0].var_8);
        $('#form_company #var_9').val(output.data[0].var_9);	
        hide_loading_message();
        show_lightbox();
      } else {
        hide_loading_message();
        show_message('Information request failed', 'error');
      }
    });
    request.fail(function(jqXHR, textStatus){
      hide_loading_message();
      show_message('Information request failed: ' + textStatus, 'error');
    });
  });
  
  // Duplicate submit form

$(document).on('click', '.function_clone a', function(e){
  e.preventDefault();
  var company_name = $(this).data('name');
  if (confirm("Are you sure you want to clone '" + company_name + "'?")){
    show_loading_message();
    var id      = $(this).data('id');
    var request = $.ajax({
      url:          'data.php?job=clone_company&id=' + id,
      cache:        false,
      dataType:     'json',
      contentType:  'application/json; charset=utf-8',
      type:         'get'
    });
    request.done(function(output){
      if (output.result == 'success'){
        // Reload datable
        table_companies.api().ajax.reload(function(){
          hide_loading_message();
          show_message("Company '" + company_name + "' cloned successfully.", 'success');
        }, true);
      } else {
        hide_loading_message();
        show_message('Clone request failed', 'error');
      }
    });
    request.fail(function(jqXHR, textStatus){
      hide_loading_message();
      show_message('Clone request failed: ' + textStatus, 'error');
    });
  }
});
  
  // Delete 
  $(document).on('click', '.function_delete a', function(e){
    e.preventDefault();
    var var_2 = $(this).data('name');
    if (confirm("Are you sure you want to delete '" + var_2 + "'?")){
      show_loading_message();
      var id      = $(this).data('id');
      var request = $.ajax({
        url:          'data.php?job=delete_company&id=' + id,
        cache:        false,
        dataType:     'json',
        contentType:  'application/json; charset=utf-8',
        type:         'get'
      });
      request.done(function(output){
        if (output.result == 'success'){
          // Reload datatable
          table_companies.api().ajax.reload(function(){
            hide_loading_message();
            show_message("Company '" + var_2 + "' deleted successfully.", 'success');
          }, true);
        } else {
          hide_loading_message();
          show_message('Delete request failed', 'error');
        }
      });
      request.fail(function(jqXHR, textStatus){
        hide_loading_message();
        show_message('Delete request failed: ' + textStatus, 'error');
      });
    }
  });

});

data.php

<?php
// Database details
$db_server   = 'localhost';
$db_username = 'root';
$db_password = 'blahblahblah';
$db_name     = 'data';
// Get job (and id)
$job = '';
$id  = '';
if (isset($_GET['job'])){
  $job = $_GET['job'];
  if ($job == 'get_companies' ||
      $job == 'get_company'   ||
      $job == 'add_company'   ||
      $job == 'edit_company'  ||
      $job == 'delete_company'){
    if (isset($_GET['id'])){
      $id = $_GET['id'];
      if (!is_numeric($id)){
        $id = '';
      }
    }
  } else {
    $job = '';
  }
}
// Prepare array
$mysql_data = array();
// Valid job found
if ($job != ''){
  
  // Connect to database
  $db_connection = mysqli_connect($db_server, $db_username, $db_password, $db_name);
  if (mysqli_connect_errno()){
    $result  = 'error';
    $message = 'Failed to connect to database: ' . mysqli_connect_error();
    $job     = '';
  }
  
  // Execute job
  if ($job == 'get_companies'){
    
    // Get companies
    $query = "SELECT * FROM my_table_info ORDER BY var_1";
    $query = mysqli_query($db_connection, $query);
    if (!$query){
      $result  = 'error';
      $message = 'query error';
    } else {
      $result  = 'success';
      $message = 'query success';
      while ($company = mysqli_fetch_array($query)){
        $functions  = '<div class="function_buttons"><ul>';
        $functions .= '<li class="function_edit"><a data-id="'   		. $company['HEADID'] . '" data-name="' . $company['var_2'] . '"><span>Edit</span></a></li>';
        $functions .= '<li class="function_clone"><a data-id="'   		. $company['HEADID'] . '" data-name="' . $company['var_2'] . '"><span>Clone</span></a></li>';
        $functions .= '<li class="function_delete"><a data-id="' 		. $company['HEADID'] . '" data-name="' . $company['var_2'] . '"><span>Delete</span></a></li>';
        $functions .= '</ul></div>';
        $mysql_data[] = array(
          "var_1"       => $company['var_1'],
          "var_2"  		=> $company['var_2'],
          "var_3"    	=> $company['var_3'],
          "var_4" 		=> $company['var_4'],
          "var_5"   	=> $company['var_5'],
          "var_6"     	=> $company['var_6'],
          "var_7"    	=> $company['var_7'],
          "var_8"  		=> $company['var_8'],
          "var_9"  		=> $company['var_9'],		  
          "functions"   => $functions
        );
      }
    }
    
  } elseif ($job == 'get_company'){
    
    // Get company
    if ($id == ''){
      $result  = 'error';
      $message = 'id missing';
    } else {
      $query = "SELECT * FROM my_table_info WHERE HEADID = '" . mysqli_real_escape_string($db_connection, $id) . "'";
      $query = mysqli_query($db_connection, $query);
      if (!$query){
        $result  = 'error';
        $message = 'query error';
      } else {
        $result  = 'success';
        $message = 'query success';
        while ($company = mysqli_fetch_array($query)){
          $mysql_data[] = array(
            "var_1"     => $company['var_1'],
            "var_2"  	=> $company['var_2'],
            "var_3"    	=> $company['var_3'],
            "var_4"   	=> $company['var_4'],
            "var_5"   	=> $company['var_5'],
            "var_6"     => $company['var_6'],
            "var_7"    	=> $company['var_7'],
            "var_8"  	=> $company['var_8'],
          	"var_9"  	=> $company['var_9']	  			
          );
        }
      }
    }
  
  } elseif ($job == 'add_company'){
    
    // Add company
    $query = "INSERT INTO my_table_info SET ";
    if (isset($_GET['var_1']))     	{ $query .= "var_1 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_1']) . "', "; }
    if (isset($_GET['var_2'])) 		{ $query .= "var_2 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_2'])	. "', "; }
    if (isset($_GET['var_3']))   	{ $query .= "var_3 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_3']) . "', "; }
    if (isset($_GET['var_4']))    	{ $query .= "var_4 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_4']) . "', "; }
    if (isset($_GET['var_5']))  	{ $query .= "var_5 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_5']) . "', "; }
    if (isset($_GET['var_6']))    	{ $query .= "var_6 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_6']) . "', "; }
    if (isset($_GET['var_7']))   	{ $query .= "var_7 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_7']) . "', "; }
    if (isset($_GET['var_8'])) 		{ $query .= "var_8 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_8']) . "', "; }
    if (isset($_GET['var_9'])) 		{ $query .= "var_9 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_9'])	. "'";   }	
	
    $query = mysqli_query($db_connection, $query);
    if (!$query){
      $result  = 'error';
      $message = 'query error';
    } else {
      $result  = 'success';
      $message = 'query success';
    }
  
  } elseif ($job == 'edit_company'){
    
    // Edit company
    if ($id == ''){
      $result  = 'error';
      $message = 'id missing';
    } else {
      $query = "UPDATE my_table_info SET ";
      if (isset($_GET['var_1']))   	{ $query .= "var_1 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_1'])	. "', "; }
      if (isset($_GET['var_2'])) 	{ $query .= "var_2 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_2']) . "', "; }
      if (isset($_GET['var_3']))   	{ $query .= "var_3 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_3']) . "', "; }
      if (isset($_GET['var_4']))  	{ $query .= "var_4 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_4']) . "', "; }
      if (isset($_GET['var_5']))  	{ $query .= "var_5 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_5']) . "', "; }
      if (isset($_GET['var_6']))    { $query .= "var_6 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_6']) . "', "; }
      if (isset($_GET['var_7']))   	{ $query .= "var_7 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_7']) . "', "; }
      if (isset($_GET['var_8'])) 	{ $query .= "var_8 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_8']) . "', "; }
      if (isset($_GET['var_9'])) 	{ $query .= "var_9 = '" 	. mysqli_real_escape_string($db_connection, $_GET['var_9'])	. "'";   }	
	
      $query .= "WHERE HEADID = '" . mysqli_real_escape_string($db_connection, $id) . "'";
      $query  = mysqli_query($db_connection, $query);
      if (!$query){
        $result  = 'error';
        $message = 'query error';
      } else {
        $result  = 'success';
        $message = 'query success';
      }
    }
    
  } elseif ($job == 'clone_company'){

  // Clone company
  if ($id == ''){
    $result  = 'error';
    $message = 'id missing';
  } else {
    $query = "INSERT INTO my_table_info(var_1, var_2, var_3, var_4, var_5, var_6, var_7, var_8, var_9) ".
              "SELECT var_1, var_2, var_3, var_4, var_5, var_6, var_7, var_8, var_9 FROM my_table_info ".
              "WHERE HEADID = '" . mysqli_real_escape_string($db_connection, $id) . "'";
    $query = mysqli_query($db_connection, $query);
    if (!$query){
      $result  = 'error';
      $message = 'query error';
    } else {
      $result  = 'success';
      $message = 'query success';
    }
  }

  } elseif ($job == 'delete_company'){
	  
    // Delete company
    if ($id == ''){
      $result  = 'error';
      $message = 'id missing';
    } else {
      $query = "DELETE FROM my_table_info WHERE HEADID = '" . mysqli_real_escape_string($db_connection, $id) . "'";
      $query = mysqli_query($db_connection, $query);
      if (!$query){
        $result  = 'error';
        $message = 'query error';
      } else {
        $result  = 'success';
        $message = 'query success';
      }
    }
  
  }
  
  // Close database connection
  mysqli_close($db_connection);
}
// Prepare data
$data = array(
  "result"  => $result,
  "message" => $message,
  "data"    => $mysql_data
);
// Convert PHP array to JSON array
$json_data = json_encode($data);
print $json_data;
?>

toddsimonds · February 21, 2017, 10:23pm

layout.css

html {
  font-size: 14px;
  overflow-y: scroll;
  overflow-x: auto;
}
body {
  background-color: #ddd;
  font-family: 'Oxygen', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  text-align: left;
  color: #666;
}

/* General -------------------------------------------------------------------------------------- */
* {
  padding: 0;
  border: 0;
  outline: 0;
  margin: 0;
}

h1, h2 {
  font-weight: normal;
  font-size: 1rem;
}

a {
  cursor: pointer;
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition:    all 0.2s ease 0s;
  -o-transition:      all 0.2s ease 0s;
  transition:         all 0.2s ease 0s;
}

ul {
  list-style-type: none;
}

table {
  border-collapse: collapse;
}
table th,
table td {
  font-weight: normal;
  text-align: left;
  vertical-align: middle;
}

label {
  cursor: pointer;
}
input,
button,
select {
  background-color: transparent;
  font-family: 'Oxygen', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: #666;
}
button,
select {
  cursor: pointer;
}
button {
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition:    all 0.2s ease 0s;
  -o-transition:      all 0.2s ease 0s;
  transition:         all 0.2s ease 0s;
}
select {
  -webkit-appearance: none;
}

input[type=text],
input[type=number],
input[type=email],
input[type=url],
input[type=password],
input[type=date],
input[type=search],
input[type=tel] {
  -webkit-appearance: none;
}
input[type=number] {
  -moz-appearance: textfield;
}
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}

/* Page container ------------------------------------------------------------------------------- */
#page_container {
  width: 95%;
  padding: 40px 5px 55px 5px;
  margin: 0 auto 0 auto;
}

/* Header --------------------------------------------------------------------------------------- */
h1 {
  font-weight: 700;
  font-size: 2.2rem;
  color: #f70;
  margin: 0 0 25px 0;
}

button.button {
  height: 35px;
  display: inline-block;
  background-color: #999;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  padding: 0 15px 0 15px;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
  margin: 0 0 25px 0;
}
button.button:hover,
button.button:active {
  background-color: #333;
}

/* Datatable ------------------------------------------------------------------------------------ */
.dataTables_wrapper {
  position: relative;
  padding: 50px 0 50px 0;
}

.dataTables_length {
  width: auto;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 110px 0 0;
}
.dataTables_length label {
  line-height: 30px;
  margin: 0;
}
.dataTables_length select {
  width: 100px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  color: #666;
  padding: 0 50px 0 10px;
  border: 1px solid #ccc;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
  margin: 0;
}
.dataTables_length:after {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #999;
  font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.2rem;
  line-height: 30px;
  text-align: center;
  color: #fff;
  content: '\f107';
  pointer-events: none;
  -webkit-border-top-right-radius:    6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-topright:        6px;
  -moz-border-radius-bottomright:     6px;
  border-top-right-radius:            6px;
  border-bottom-right-radius:         6px;
}
.dataTables_length select::-ms-expand {
  display: none;
}

.dataTables_filter {
  position: absolute;
  top: 0;
  right: 0;
}
.dataTables_filter label {
  line-height: 30px;
}
.dataTables_filter input {
  width: 200px;
  height: 30px;
  display: inline-block;
  background-color: #fff;
  line-height: 30px;
  color: #666;
  padding: 0 0 0 10px;
  border: 1px solid #ccc;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
  margin: 0 0 0 10px;
}
.dataTables_filter input:focus {
  background-color: #ffd;
}

.dataTables_paginate {
  position: absolute;
  bottom: 0;
  left: 0;
}
.dataTables_paginate a {
  width: 30px;
  height: 30px;
  float: left;
  background-color: #999;
  font-weight: normal;
  line-height: 29px;
  text-align: center;
  color: #fff;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
  margin: 0 10px 0 0;
}
.dataTables_paginate a.current,
.dataTables_paginate a:hover,
.dataTables_paginate a:active,
.dataTables_paginate a:focus {
  background-color: #333;
}
.dataTables_paginate a.previous,
.dataTables_paginate a.next {
  font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  line-height: 30px;
}
.dataTables_paginate a.previous:before {
  content: '\f104';
}
.dataTables_paginate a.next:before {
  content: '\f105';
}

.dataTables_info {
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: 30px;
}

table.datatable {
  width: 100% !important;
  line-height: 1.4rem;
}
table.datatable th,
table.datatable td {
  background-color: #fff;
  padding: 5px 10px 5px 10px;
  border: 1px solid #ccc;
}

table.datatable thead th {
  background-color: #999;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  padding-top: 7px;
  padding-bottom: 8px;
}
table.datatable thead th.sorting,
table.datatable thead th.sorting_desc,
table.datatable thead th.sorting_asc {
  cursor: pointer;
}
table.datatable thead th.sorting:active,
table.datatable thead th.sorting_desc:active,
table.datatable thead th.sorting_asc:active {
  background-color: #333;
}

table.datatable tbody tr:nth-child(even) td {
  background-color: #eee;
}
table.datatable tbody tr:hover th,
table.datatable tbody tr:hover td {
  background-color: #ffd;
}
table.datatable tbody tr:hover td.dataTables_empty {
  background-color: #fff;
}
table.datatable tbody td.company_name {
  width: 100%;
}
table.datatable tbody td.integer {
  text-align: right;
  white-space: nowrap;
}
table.datatable tbody td.nowrap {
  white-space: nowrap;
}

table.datatable tbody td.functions .function_buttons {
  width: 190px;
  height: 30px;
  margin: 0 auto 0 auto;
}
table.datatable tbody td.functions .function_buttons li {
  float: left;
  padding: 0 10px 0 0;
}
table.datatable tbody td.functions .function_buttons li.function_delete {
  padding: 0;
}
table.datatable tbody td.functions .function_buttons a {
  width: 30px;
  height: 30px;
  display: inline-block;
  background-color: #999;
  font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 29px;
  text-align: center;
  color: #fff;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
}
table.datatable tbody td.functions .function_buttons .function_edit a:before {
  font-size: 1.1rem;
  content: "\f040";
}
table.datatable tbody td.functions .function_buttons .function_clone a:before {
  font-size: 1.2rem;
  line-height: 30px;
  content: "\f0c5";
}
table.datatable tbody td.functions .function_buttons .function_report a:before {
  font-size: 1.2rem;
  line-height: 30px;
  content: "\f1c1";
  }
table.datatable tbody td.functions .function_buttons .function_tab a:before {
  font-size: 1.2rem;
  line-height: 30px;
  content: "\f209";
}
table.datatable tbody td.functions .function_buttons .function_delete a:before {
  font-size: 1.2rem;
  line-height: 30px;
  content: "\f1f8";
}
table.datatable tbody td.functions .function_buttons a:hover,
table.datatable tbody td.functions .function_buttons a:active,
table.datatable tbody td.functions .function_buttons a:focus {
  background-color: #333;
}
table.datatable tbody td.functions .function_buttons span {
  display: none;
}

/* Lightbox ------------------------------------------------------------------------------------- */
.lightbox_bg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.lightbox_container {
  display: none;
  width: 80%;
  height: 90%;
  position: fixed;
  top: 5%;
  left: 10%;
  z-index: 200;
  background-color: #fff;
  color: #666;
  overflow-y: scroll;
  overflow-x: auto;
  padding: 50px 0 0 0;
   -webkit-box-sizing: border-box;
  -moz-box-sizing:     border-box;
  box-sizing:          border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
}

.lightbox_close {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 45px;
  right: 45px;
  font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 35px;
  text-align: center;
  color: #f70;
  cursor: pointer;
  border: 2px solid #f70;
  -webkit-border-radius: 35px;
  -moz-border-radius:    35px;
  border-radius:         35px;
}
.lightbox_close:before {
  content: '\f00d';
}
.lightbox_close:hover {
  color: #333;
  border-color: #333;
}

.lightbox_content {
  width: 642px;
  padding: 0 50px 0 50px;
}
.lightbox_content h2 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 2rem;
  color: #f70;
  margin: 0 0 25px 0;
}

.lightbox_content .input_container {
  width: 600px;
  margin: 0 0 10px 0;
}
.lightbox_content .input_container:after {
  clear: both;
  height: 0;
  display: block;
  font-size: 0;
  line-height: 0;
  content: ' ';
}

.lightbox_content .input_container label {
  width: 200px;
  float: left;
  font-size: 1rem;
  line-height: 32px;
}
.lightbox_content .input_container label span.required {
  font-weight: bold;
  color: #f70;
}

.lightbox_content .input_container .field_container {
  width: 400px;
  float: right;
  position: relative;
}
.lightbox_content .input_container .field_container label.error {
  width: 400px;
  display: block;
  background-color: #fff1e6;
  line-height: 1.4rem;
  color: #333;
  padding: 5px 0 6px 10px;
  border: 1px solid #f70;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
  margin: 0 0 5px 0;
}
.lightbox_content .input_container .field_container label.error.valid {
  display: none !important;
}
.lightbox_content .input_container .field_container input {
  width: 400px;
  height: 32px;
  background-color: #f9f9f9;
  line-height: 30px;
  color: #666;
  padding: 0 0 0 10px;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
}
.lightbox_content .input_container .field_container input:focus {
  background-color: #ffd;
  color: #000;
}

.lightbox_content .input_container .field_container.error:after,
.lightbox_content .input_container .field_container.valid:after {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 0;
  right: -42px;
  font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}
.lightbox_content .input_container .field_container.error:after {
  content: '\f00d';
  color: #c00;
}
.lightbox_content .input_container .field_container.valid:after {
  content: '\f00c';
  color: #090;
}

/* Largefield conatiner */

.lightbox_content .input_container .largefield_container {
  width: 400px;
  float: right;
  position: relative;
}
.lightbox_content .input_container .largefield_container label.error {
  width: 400px;
  display: block;
  background-color: #fff1e6;
  line-height: 1.4rem;
  color: #333;
  padding: 5px 0 6px 10px;
  border: 1px solid #f70;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
  margin: 0 0 5px 0;
}
.lightbox_content .input_container .largefield_container label.error.valid {
  display: none !important;
}
.lightbox_content .input_container .largefield_container input {
  width: 400px;
  height: 92px;
  background-color: #f9f9f9;
  line-height: 30px;
  color: #666;
  padding: 0 0 0 10px;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
  word-wrap: break-word;
}
.lightbox_content .input_container .largefield_container input:focus {
  background-color: #ffd;
  color: #000;
}

.lightbox_content .input_container .largefield_container.error:after,
.lightbox_content .input_container .largefield_container.valid:after {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 0;
  right: -42px;
  font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}
.lightbox_content .input_container .largefield_container.error:after {
  content: '\f00d';
  color: #c00;
}
.lightbox_content .input_container .largefield_container.valid:after {
  content: '\f00c';
  color: #090;
}

/* End of large field container */

.lightbox_content .button_container {
  width: 600px;
  height: 35px;
  text-align: right;
  padding: 15px 0 50px 0;
}
.lightbox_content .button_container button {
  height: 35px;
  display: inline-block;
  background-color: #999;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  padding: 0 15px 0 15px;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
}
.lightbox_content .button_container button:hover {
  background-color: #333;
  color: #fff;
}

/* Message / noscript --------------------------------------------------------------------------- */
#message_container,
#noscript_container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  text-align: center;
  color: #fff;
}
#message_container {
  display: none;
}
#message,
#noscript {
  width: 980px;
  line-height: 20px;
  padding: 10px 5px 10px 6px;
  margin: 0 auto 0 auto;
}
#message  p,
#noscript p {
  display: inline-block;
  position: relative;
  padding: 0 0 0 28px;
}
#message  p:before,
#noscript p:before {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f70;
  font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  -webkit-border-radius: 20px;
  -moz-border-radius:    20px;
  border-radius:         20px;
}
#message.success  p:before,
#noscript.success p:before {
  content: '\f00c';
}
#message.error  p:before,
#noscript.error p:before {
  content: '\f00d';
}

/* Loading message ------------------------------------------------------------------------------ */
#loading_container {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.85);
  text-align: center;
}
#loading_container2 {
  width: 100%;
  height: 100%;
  display: table;
}
#loading_container3 {
  display: table-cell;
  vertical-align: middle;
}
#loading_container4 {
  width: 350px;
  height: 250px;
  position: relative;
  background-color: #fff;
  font-size: 1.4rem;
  line-height: 1.4rem;
  color: #666;
  padding: 165px 0 0 0;
   -webkit-box-sizing: border-box;
  -moz-box-sizing:     border-box;
  box-sizing:          border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
  margin: 0 auto 0 auto;
}
#loading_container4:before {
  width: 100%;
  position: absolute;
  top: 80px;
  left: 0;
  font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 4rem;
  line-height: 4rem;
  text-align: center;
  color: #f70;
  content: '\f013';
  -webkit-animation: spin 2s infinite linear;
  animation:         spin 2s infinite linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform:         rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform:         rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform:         rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform:         rotate(359deg);
  }
}

toddsimonds · February 21, 2017, 10:27pm

In Layout.css I have a container called largefield_container that I was hoping to make a a word-wrap field that was more of a textfield but it won’t work. The text field it creates is larger but the text doesn’t wrap and is always in the middle of the field. Any help would be most appreciated, thank you.

coderboy · February 23, 2017, 8:02am

##For Clone:
Clone is just a combination of edit and add. So, you can reuse the edit/add form.
I’ve reused the code of edit for displaying the form and used the add_company method for cloning.

In the webapp.js file

// Clone company button
$(document).on('click', '.function_clone a', function(e){
  e.preventDefault();
  // Get company information from database
  show_loading_message();
  var id      = $(this).data('id');
  var request = $.ajax({
    url:          'data.php?job=get_company',
    cache:        false,
    data:         'id=' + id,
    dataType:     'json',
    contentType:  'application/json; charset=utf-8',
    type:         'get'
  });
  request.done(function(output){
    if (output.result == 'success'){
      $('.lightbox_content h2').text('Clone company');
      $('#form_company button').text('Clone company');
      $('#form_company').attr('class', 'form clone');
      $('#form_company').attr('data-id', ''); //set data-id to empty
      $('#form_company .field_container label.error').hide();
      $('#form_company .field_container').removeClass('valid').removeClass('error');
      $('#form_company #rank').val(output.data[0].rank);
      $('#form_company #company_name').val(output.data[0].company_name);
      $('#form_company #industries').val(output.data[0].industries);
      $('#form_company #revenue').val(output.data[0].revenue);
      $('#form_company #fiscal_year').val(output.data[0].fiscal_year);
      $('#form_company #employees').val(output.data[0].employees);
      $('#form_company #market_cap').val(output.data[0].market_cap);
      $('#form_company #headquarters').val(output.data[0].headquarters);
      hide_loading_message();
      show_lightbox();
    } else {
      hide_loading_message();
      show_message('Information request failed', 'error');
    }
  });
  request.fail(function(jqXHR, textStatus){
    hide_loading_message();
    show_message('Information request failed: ' + textStatus, 'error');
  });
});

// Clone company submit form
$(document).on('submit', '#form_company.clone', function(e){
  e.preventDefault();
  // Validate form
  if (form_company.valid() == true){
    // Send company information to database
    hide_ipad_keyboard();
    hide_lightbox();
    show_loading_message();
    var form_data = $('#form_company').serialize();
    var request   = $.ajax({
      url:          'data.php?job=add_company',
      cache:        false,
      data:         form_data,
      dataType:     'json',
      contentType:  'application/json; charset=utf-8',
      type:         'get'
    });
    request.done(function(output){
      if (output.result == 'success'){
        // Reload datable
        table_companies.api().ajax.reload(function(){
          hide_loading_message();
          var company_name = $('#company_name').val();
          show_message("Company '" + company_name + "' cloned successfully.", 'success');
        }, true);
      } else {
        hide_loading_message();
        show_message('Clone request failed', 'error');
      }
    });
    request.fail(function(jqXHR, textStatus){
      hide_loading_message();
      show_message('Clone request failed: ' + textStatus, 'error');
    });
  }
});

##For 1’s and 0’s
You need to first create the html field in the form, like such
###In the index.html

<div class="input_container">
	<label for="checkbox_field">Checkbox: <span class="required">*</span></label>
	<div class="field_container">
	  <input type="checkbox" name="checkbox_field" id="checkbox_field" value="" required>
	</div>
</div>

###In the webapp.js
After you get the data in the edit/clone, inside request.done(), you place the logic to check the value set is true or false. And, according to the value, you check/uncheck the checkbox.

(output.data[0].checkbox_field) ? $("#form_company #checkbox_field").prop('checked', true) : $("#form_company #checkbox_field").prop('checked', false);

##For large container
I don’t exactly understand your need. What is that you need to do?

Create a large container with bigger width and height?
By word wrapped textfield you mean to create a textarea?

Post any pics you have.

toddsimonds · February 23, 2017, 6:18pm

The update for Clone worked perfect thank you again. The large container should be a textarea yes, sorry for the poor wording. I’ve attached a picture of what I see when i try to add information to the box. As you can see it just keeps going and never word wraps which is what I need it to do. If possible, if the textarea box can grow as the data does that would be ideal but I’m not greedy I’ll take what I can get Thank you.

toddsimonds · February 23, 2017, 7:42pm

Sadly, I’m still having a problem with the checkbox. I’ve taking the code you gave me and creating a variable for checkbox then put it in request.done(function(output, checkbox) { and I’ve also tried putting the code after request.done(function(output) { but it just sits there forever after you hit the Update Record button never coming back and not updating the record. I apologize that I don’t understand where you mean for it to go. Thank you for everything you’ve truly been instrumental in getting me through this.

coderboy · February 24, 2017, 4:39am

Okay, here’s what you need to do.
##For 1’s and 0’s
I tried it using a BIT datatype for the 1’s and 0’s, if you’re using a varchar(1) or similar, you need to make a slight change.
###In the index.html

<div class="input_container">
	<label for="checkbox_field">Checkbox: <span class="required">*</span></label>
	<div class="field_container">
              <!-- don't have required -->
	  <input type="checkbox" name="checkbox_field" id="checkbox_field" value="">
	</div>
</div>

###In the webapp.js
Since, you would get a “1” or “0” from the database as a string, you can either change it to true/false in the data.php or just leave it as it is. Inside the request.done() when successful on edit, have this:

(output.data[0].open == "1") ? $("#form_company #open").prop('checked', true) : $("#form_company #open").prop('checked', false); // check for 1

###In the data.php
When saving it back to the database, you should be careful to not screw up the query. I screwed it up once or twice myself, because since I added updation query to the end, I didn’t have a comma before it. Also, since it’s a BIT field, it shouldn’t have a ‘’ before/after the value.
Also, notice the space at the end which doesn’t screw up the query for WHERE.

if (isset($_GET['open']) && $_GET['open'] == 'on') { $query .= "open = 1 "; } else { $query .= "open = 0 "; }
// if you have varchar type for the 1s and 0s, add a '' like such
if (isset($_GET['open']) && $_GET['open'] == 'on') { $query .= "open = '1' "; } else { $query .= "open = '0' "; }

##For Textarea
I feel you’re using a input tag for textarea. You can use textarea HTML tag for multi-line inputs
###In the index.html

<div class="input_container">
  <label for="headquarters">Headquarters: <span class="required">*</span></label>
  <div class="field_container">
    <textarea name="headquarters" id="headquarters" value="" required></textarea>
  </div>
</div>

##css
Remove the height part and copy from input

.lightbox_content .input_container .field_container textarea {
  width: 400px;
  background-color: #f9f9f9;
  line-height: 30px;
  color: #666;
  padding: 0 0 0 10px;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-border-radius: 6px;
  -moz-border-radius:    6px;
  border-radius:         6px;
}

That should do it.

toddsimonds · February 24, 2017, 4:14pm

Thank you so much. I remember I tried setting the field to a textarea before but I forgot about the css file for formatting so it never looked right. It’s perfect now though so thank you so much. I still can’t get the checkbox to work but you’ve given me plenty to work with so I’ll keep hammering away at it. Thank you again you’ve been awesome and I truly appreciate all the help!

system · May 26, 2017, 11:14pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.