2. PHPRunner Tips and Tricks
  3. Guide 13 - New types of data entries. Integration of JavaScript.
This topic is locked

Guide 13 - New types of data entries. Integration of JavaScript.

 		4/29/2021 4:25:36 PM
PHPRunner Tips and Tricks
fhumanes author

I have been creating PHPrunner plugins and a large set of possibilities is available. On some occasions I have had requests to make EDIT type plugins that I have not been able to integrate since this type of code requires that the JavaScript code has a special structure and characteristic and how I indicate, many of them do not fulfill it.

It also requires that you adjust to the jQuery versions (v. 1) and Bootstrap (V.3), which Phprunner incorporates.

Objective:

Explanation how you can include JavaScript plugins as an information entry field (ADD and EDIT) without having to write/make a PHPRunner Plugin.

If you are interested in this information and want to download the example, see this article.
fhumanes author 4/29/2021

Objective:

Explanation How you can include JavaScript plugins as an information entry field (ADD and EDIT) without having to write / make a PHPRUNNER plugin.

DEMO: https://fhumanes.com/edit_plugin.

TECHNICAL SOLUTION:

This solution is not being able to be similar to PHPrunner Plugins, as it will lack the possibility of "on line" operation and will only work on new pages for ADD and EDIT (only one instance of the plugin on the page).

Although the example is built with version 10.2 of phprunner, the method used serves for 9.x and 10.x versions.

What we want to do in the example is to use the entry specified in this URL: https://bootsnipp.com/snippets/dgwp To get this result:

img alt
For this, I will explain how I have done it:

img alt

To include all the code (CSS, HTML and JavaScript) that requires the new edition we will use the "Code Snippet" functionality and we will include it next to the presentation of the field that will contain the value resulting from that entry.

So that the entry is not duplicated, the receiving field will indicate, through JavaScript that hide() is hidden. We need this field so that PHPRunner receives the corresponding value and saves it in the database, but we want the way to edit (HTML presentation) has the special format that we have chosen.

In the "JavaScript Onload" event we will have this code:

var ctrlNumber = Runner.getControl(pageid, 'Number_value');
ctrlNumber.hide();

this.on('beforeSave', function(formObj, fieldControlsArr, pageObj){
var number =document.getElementById("quant").value;
if ( number < 2 ) {
alert("It is necessary that the value is greater than 1");
Runner.delDisabledClass(pageObj.saveButton ); // Activate again, button SAVE
return false;
} else {
// ctrlNumber.show();
ctrlNumber.setValue(number);
return true;
}
});

If you set, this code does:

  • Hidden the receiving field of value.
  • Before saving the "Save" form, it makes the controls that are required in the presentation field and if it is not correct, it informs it by "Alert" and returns to the form.
  • If the content is valid, move this content to the receiving field (the one in the table).

You have to take into account other types of details, such as:

  • For the "Code Snippet" to have the field value, the "BEFORE DISPLAY" event must be used to create a session variable that transports the value to the SNIPPET code.$_SESSION['Number_value'] = $values['Number_value'];

I also put the code to generate the HTML code that requires the presentation field, usting in each case will require different code, but, surely, it can be created in this same way (Snippet code and "minus_and_plus.php").

$value = $_SESSION['Number_value'];
include 'MyCode/minus_and_plus.php';
echo $value;

I'm sorry, I can not put the code for problems of this forum.

I leave the example code so that you can install and review on your PC.

In this URL you will be able to find many javascript plugin that you can incorporate to your developments https://www.jqueryscript.net/

For any questions or concerns, you can I communicate with me through my email fernandohumanes@gmail.com