Difference between revisions of "JQuery / script cheatsheet"
Jump to navigation
Jump to search
old>Admin |
|||
(6 intermediate revisions by 2 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 ==== | ||
Line 10: | 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 53: | Line 137: | ||
} | } | ||
=== 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/' }); | |||
Latest revision as of 13:31, 1 December 2023
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(); });
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/' });