Remember to always back up your data before making any changes to it.
Always try out your customizations on a test server first, NOT the live one.
The following customization was tested in PowerSchool 7.11.1, so it might not work in the newer versions.
The following customization was not tested in Internet Explorer.
Are you tired of having to submit an entire page’s worth of data only because you (un)checked a check box, clicked a radio button or changed the selected value of drop-down on that page?
Would you like to be able to make your users happy by providing them with pages that work faster and submit data in the background (without them having to click the “submit” button or them being taken away from the current page)?
Have you ever wondered how cool it could be if the value of certain fields would get saved into the database on the fly (i.e. as you type)?
Well, the code below offers you a possible solution to the above by taking advantage of the powerful $.get(…) and $.post(…) jQuery functions.
The scenario starts from the assumption that the field you are trying to modify (i.e. pass as a parameter via the POST or GET methods) lies inside a form that has both its action and method properties properly defined. So, let’s use the Demographics page (/admin/students/generaldemographics.html) as an example. The field we are trying to modify on the fly is the one holding the student’s Last Name (the first textbox on the first row).
Below is an excerpt of the page showing the elements we need to focus on – the form and the field:
<form action=”/admin/changesrecorded.white.html” method=”POST” onSubmit=”return validateInput()”>
[ … HTML code … ]
<input type=”text” name=”[01]last_name” value=”” size=”25″ maxlength=”50″ id=”lastName”>
[… HTML code … ]
<input type=”hidden” name=”ac” value=”prim”>
[… HTML code … ]
</form>
Below you will find the code that allows you to modify a student’s Last name field straight into the database without you having to submit a form or refresh the page.
So, open a customized version of the Demographics page in a text editor or CPM’s online editor and do the following:
- Just above the </head> tag and between two <script></script> tags, add a “on document ready” jQuery function $j(document).ready(function() { …… } (if there isn’t one, add it). Inside the function you just decalred add the following piece of code:
//define the mandatory fields (as an array of fields as HTMLObjects) that need to be passed along with our target field (in order for the data to be successfully saved)
//for the customized pages on the Admin folder – you’ll have to pass the hidden field with the name “ac”
var mandatoryFields = [$j(“input[name=’ac’]”)];
//this function sends our target field together with the mandatory fields out to the page that will do the saving of the data
function changeFieldInDB(myField,mandatoryFields){
//get the form this element belongs to
var form = myField.closest(“form”);
//get the action of the above-mentioned form
var url = form.attr(“action”);
//get the method of the above-mentioned form
var method = form.attr(“method”);
//get the data of the fields (and their values) in a serialized format (as expected by the POST or GET functions)
//first get the serialized data in the target field
var data = myField.serializeArray();
//then, go through the array of mandatory fields and append the serialization of each element to “data”
for (var i = 0; i < mandatoryFields.length; i++){
data = $j.merge(data, mandatoryFields[i].serializeArray());
}
//define the result of our “passing of parameters” function
var doAction;
//use the right method to pass the parameters (POST or GET)
if (method == “POST”) doAction = $j.post(url, data);
if (method == “GET”) doAction = $j.get(url, data);
//on successfully passing the parameters
doAction.done(function(data){
//do something (display alert, make the border of the field/element flash a couple of times, display an icon (that slowly fades out) next to the target field a.s.o.
});
} - Then call the above function on the field you are targeting (in our example: <input type=”text” name=”[01]MyStudentField” value=””>) in order to change the field’s value in the database upon a certain event.
//when the user types something in the first textbox on the first row field (i.e. “Last Name”)
$j(“[name=’~(JSFieldParam;[01]last_name)’]”).on(“keyup”,function(){
changeFieldInDB($j(this),mandatoryFields);
});
//OR on leaving the target field (when the field loses the focus)
$j(“[name=’~(JSFieldParam;[01]last_name)’]”).focusout(function(){
changeFieldInDB($j(this),mandatoryFields);
});As you can see, there are ways to do things quicker & smarter. Now it’s up to you to find new ways of implementing (and, why not, enriching) the above-presented functionality/code.
PS Help 911 