Scratchings

Remove Selected Option from List

This is required for the JIB card renewal page to remove available qualifications once one has been selected so it is not available as an option next time.

HTML

<select id="removeme">
  <option value="0"></option>
  <option value="1">C&G 235631 - Level 3 NVQ - Electrotechnical Services</option>
  <option value="2">City and Guilds The Part Two certificate in Electronics Servicing</option>
  <option value="3">EAL - Electrotechnical Services (Electrical Installation) (Building and Structures) Level 3</option>
  <option value="4">ECITB NVQ Level 3 in Maintaining Plant and Systems - Instrument and Controls</option>
  <option value="5">Level 2 - Electrical Engineering Manufacture (Foundation)</option>
  <option value="6">SVQ - Installing and Commissioning Electrotechnical Systems: Installation Level 3</option>
</select>
<button id="removemebutton">Remove Selected</button>

JQuery

$('#removemebutton').on('click', '', function () {
  // do the stuff to add it to the processing grid first e.g.
  $("#addedQualifications").html($("#removeme").val());
  // then remove it from the list
  $("#removeme").find('option:selected').remove();
});

Add Row To Table

JQuery

  $("#myTable > tbody").append("row content");

Date Picker not Visible on Bootstrap Modal

Using a date picker field in a Bootstrap modal overlay does not work out of the box. You must use the following css to make the picker box visible.

CSS

 

<style>
  .datepicker{z-index:1151;}
</style>

Remove Table Row When Object in Row Clicked

JQuery

$(".delete").click(function() {
  $(this).parents("tr").remove();
});

Bootstrap Alignment Does Not Work in Table Cells

Just add a "custom" stylesheet which is loaded after Bootstrap´s stylesheet. So the class definitions are overloaded.

In this stylesheet declare the alignment as follows:

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

Alternative Modal Ajax Loading Methods

There are 2 ways to populate the modal-body element when the modal is loaded.

1. Via the JQuery.Functions.js

The following code populates the modal-body with an id set thus - id="EditSiteConfigHolder", when the modal is shown.

$('#DialogEditSiteConfig').on('show', function (e) {
  $.ajax({
    type: 'GET',
    async: false,
    url: '/Site/AjaxScripts/Pages.php',
    data: {
      Action: "GetSiteConfigForAjaxEdit"
    },
    success: function (AjaxData) {
      $("#EditSiteConfigHolder").html(AjaxData);
    },
    error: function () {
    }
  });
});

2. Using the data-target. This basically does a JQuery $.load() which is the same as the $.ajax with a type of GET.

I have used this method on this site for the Edit Site Config Modal. This negates the need for the id="EditSiteConfigHolder" on the modal-body. This will get the output from the ajax call and load it directly into the body of the modal.

<a data-toggle="modal" href="Pages.php?Action=GetSiteConfigForAjaxEdit" data-target="#DialogEditSiteConfig">Edit Config</a>

Styling the Horizontal Rule with css

hr.style-six {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

Change Modal Header Background Colour

If you want the modal to sit more comfortably stylewise within your site, do this:

.modal-header {
       background-color: #73BF45;
                  color: #ffffff;
  -webkit-border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0;
}
.modal-header h3 { color: #ffffff; }
.modal-header button.close 
{
      color: #ffffff;
    opacity: 1.0; /* default = 0.2 */
}

This page was last modified on Saturday, 12th July 2014 at 10:11:16 by Gary Keeling. © 2019 GKWeb Design.

Categorised as: Development

GK5 Footer

and whatever