Difference between revisions of "JQuery / script cheatsheet"

From TempusServa wiki
Jump to navigation Jump to search
old>Admin
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:


=== Navigation ===
==== Redirecting non administrators away from list views ====
  var params =  window.location.href.split("?")[1];
  if( params == "SagID=251&command=list" ) {
    if( ! $( "#TempusServaPage" ).hasClass( "IsAdministrator" ) ) {
      console.log("redirecting to main from list");
      window.location.href = "main";
    }
  }
==== Prevent edit as default command from lists ====
  $(".tableList a").each(function() {
    url = $(this).attr("href").replace("=edit","=show");
    $(this).attr("href",url);
  });
=== Input manipulation ===
==== Building multiselect values from existing services ====
In the following example the field TERRITORY has autocomplete wuth Country values. Output format example: "Denmark, Finland, Sweden"
  function split( val ) {
    return val.split( /,\s*/ );
  }
  function extractLast( term ) {
    return split( term ).pop();
  }
  $(function() {$("#DATA_TERRITORY").autocomplete({
        source: function( request, response ) {
          $.getJSON( "autocomplete?type=dk.p2e.blanket.form.fields.ajax.FieldAjaxCountry&subtype=0", {
            term: extractLast( request.term )
          }, response );
        },
      autoFocus: true,
      min_length: 2,
      delay: 300,
        search: function() {
          // custom minLength
          var term = extractLast( this.value );
          if ( term.length < 2 ) {
            return false;
          }
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
  });});


==== Making radiobuttons unselectable ====
==== Making radiobuttons unselectable ====
Clicking on a radiobutton a second type will remove the selection


   $("input[type=radio]").click( function() {
   $("input[type=radio]").click( function() {
Line 9: Line 72:
       $(this).attr("checked",true).button("refresh");     
       $(this).attr("checked",true).button("refresh");     
   });
   });
==== Transform text input to selectbox ====
Include the following function
  function transformToSelectField( fieldName, valueList) {
    var select = "<select class='form-control' id='DATA_" + fieldName + "' name='DATA_" + fieldName + "' tabindex='2'>";
    var optionsList = valueList.split(" ");
    for (var i = 0; i < optionsList.length; i++) {
    var isSelected = ( getValue(fieldName) == optionsList[i] ) ? " selected " : "";
    select += "<option " + isSelected + " value='" + optionsList[i] + "'>" + optionsList[i] + "</option>";
    }
    select += "</select>";
    console.log( select );
    $("#DATA_" + fieldName).replaceWith( select );
  }
Example usage
  transformToSelectField( "NAME", "Alice Bob" );
=== Copy / paste ===


==== Selecting text for easy copying ====
==== Selecting text for easy copying ====
Line 52: Line 137:
   }
   }


==== Building multiselect values from existing services ====
In the following example the field TERRITORY has autocomplete wuth Country values. Output format example: "Denmark, Finland, Sweden"


  function split( val ) {
=== AJAX lookups ===
    return val.split( /,\s*/ );
 
  }
==== Address lookup in Denmark ====
  function extractLast( term ) {
In custom header
    return split( term ).pop();
  }
  $(function() {$("#DATA_TERRITORY").autocomplete({
        source: function( request, response ) {
          $.getJSON( "autocomplete?type=dk.p2e.blanket.form.fields.ajax.FieldAjaxCountry&subtype=0", {
            term: extractLast( request.term )
          }, response );
        },
      autoFocus: true,
      min_length: 2,
      delay: 300,
        search: function() {
          // custom minLength
          var term = extractLast( this.value );
          if ( term.length < 2 ) {
            return false;
          }
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
  });});


  <script src='script/dawa-autocomplete.js' ></script>


==== Redirecting non administrators away from list views ====
In custom script


   var params =  window.location.href.split("?")[1];
   $("#DATA_ADRESSE").dawaautocomplete({ adgangsadresserOnly: true, baseUrl: 'https://dawa.aws.dk/' });
  if( params == "SagID=251&command=list" ) {
    if( ! $( "#TempusServaPage" ).hasClass( "IsAdministrator" ) ) {
      console.log("redirecting to main from list");
      window.location.href = "main";
    }
  }

Latest revision as of 13:31, 1 December 2023

Navigation

Redirecting non administrators away from list views

 var params =  window.location.href.split("?")[1];
 if( params == "SagID=251&command=list" ) {
   if( ! $( "#TempusServaPage" ).hasClass( "IsAdministrator" ) ) {
     console.log("redirecting to main from list");
     window.location.href = "main";
   }
 }

Prevent edit as default command from lists

 $(".tableList a").each(function() {
   url = $(this).attr("href").replace("=edit","=show");
   $(this).attr("href",url);
 });

Input manipulation

Building multiselect values from existing services

In the following example the field TERRITORY has autocomplete wuth Country values. Output format example: "Denmark, Finland, Sweden"

 function split( val ) {
    return val.split( /,\s*/ );
 }
 function extractLast( term ) {
   return split( term ).pop();
 }
 $(function() {$("#DATA_TERRITORY").autocomplete({
       source: function( request, response ) {
         $.getJSON( "autocomplete?type=dk.p2e.blanket.form.fields.ajax.FieldAjaxCountry&subtype=0", {
           term: extractLast( request.term )
         }, response );
       },
      autoFocus: true, 
      min_length: 2, 
      delay: 300, 
       search: function() {
         // custom minLength
         var term = extractLast( this.value );
         if ( term.length < 2 ) {
           return false;
         }
       },
       focus: function() {
         // prevent value inserted on focus
         return false;
       },
       select: function( event, ui ) {
         var terms = split( this.value );
         // remove the current input
         terms.pop();
         // add the selected item
         terms.push( ui.item.value );
         // add placeholder to get the comma-and-space at the end
         terms.push( "" );
         this.value = terms.join( ", " );
         return false;
       }
 });});

Making radiobuttons unselectable

Clicking on a radiobutton a second type will remove the selection

 $("input[type=radio]").click( function() {
  if( $(this).attr("checked") == 'checked' )
     $(this).removeAttr("checked").button("refresh");
 else
     $(this).attr("checked",true).button("refresh");     
 });

Transform text input to selectbox

Include the following function

 function transformToSelectField( fieldName, valueList) {
   var select = "<select class='form-control' id='DATA_" + fieldName + "' name='DATA_" + fieldName + "' tabindex='2'>";
   var optionsList = valueList.split(" "); 
   for (var i = 0; i < optionsList.length; i++) { 
    var isSelected = ( getValue(fieldName) == optionsList[i] ) ? " selected " : "";
    select += "<option " + isSelected + " value='" + optionsList[i] + "'>" + optionsList[i] + "</option>";
   }
   select += "</select>";
   console.log( select );
   $("#DATA_" + fieldName).replaceWith( select );
 }

Example usage

  transformToSelectField( "NAME", "Alice Bob" );


Copy / paste

Selecting text for easy copying

 //Get Exising Select Options    
 $('form#product select').each(function(i, select){
    var $select = $(select);
    $select.find('option').each(function(j, option){
       var $option = $(option);
       // Create a radio:
       var $radio = $('<input type="radio" />');
       // Set name and value:
       $radio.attr('name', $select.attr('name')).attr('value', $option.val());
       // Set checked if the option was selected
       if ($option.attr('selected')) $radio.attr('checked', 'checked');
       // Insert radio before select box:
       $select.before($radio);
       // Insert a label:
       $select.before(
         $("<label />").attr('for', $select.attr('name')).text($option.text())
       );
       // Insert a 
: $select.before("
"); }); $select.remove(); });

credit

Selecting text for easy copying

 var textNode = document.getElementById('IdOfNodeToBeSelected');
 if (document.selection) {
   var range = document.body.createTextRange();
   range.moveToElementText(textNode);
   range.select();
 } else if (window.getSelection) {
   var selection = window.getSelection();
   var range = document.createRange();
   range.selectNodeContents(textNode);
   selection.removeAllRanges();
   selection.addRange(range);	
 }


AJAX lookups

Address lookup in Denmark

In custom header

 <script src='script/dawa-autocomplete.js' ></script>

In custom script

 $("#DATA_ADRESSE").dawaautocomplete({ adgangsadresserOnly: true, baseUrl: 'https://dawa.aws.dk/' });