JavaScript logic displacement to database - Xlinesoft Blog

JavaScript logic displacement to database – Xlinesoft Blog

In this article we will talk about how to minimize the amount of code that JavaScript manages on the added/edit pages. Making your data -based code will help you easily manage forms with a large number of fields. We will take care of functionality such as showing/hiding fields, making reading fields, mandatory, disabled, etc.

This approach will involve the following steps
1. Creation and popular database tables to store triggers (when logic is applied) and actions (what happens when shutting down)
2. PHP Code and C# of the server passing this data to JavaScript
3. The JavaScript code that listens to the “change” event and implement the logic defined in the database.

Database tables

Table triggering. The structure is quite simple. You can see that we store the name of the table, the type of page, the name of the field and which event we hear. In this article we will only show how to implement the most common “change” event, as it covers 95% of the required functionality.

The actions table is a detail, while it triggers it is a teacher. They are linked by the Trigger_id field. This table knows what condition to be checked and what action to be performed. We look at the front row and try to decipher it.

The action is linked to the triggering #1 (change of country event event on the client edit page). The condition is the same and the condition_Value is “USA”. It means that when the country’s field is equal to “USA”, we should continue with our action. And the action itself showing the region’s field.

And here is the SQL script that will create the two tables with sample data.


CREATE TABLE IF NOT EXISTS `actions` (
  `id` int NOT NULL AUTO_INCREMENT,
  `condition` varchar(250) DEFAULT NULL,
  `target` varchar(250) DEFAULT NULL,
  `action` varchar(250) DEFAULT NULL,
  `condition_value` varchar(250) DEFAULT NULL,
  `trigger_id` int DEFAULT NULL,
  KEY `Index 1` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

INSERT INTO `actions` (`id`, `condition`, `target`, `action`, `condition_value`, `trigger_id`) VALUES
	(1, 'equals', 'Region', 'show', 'USA', 1),
	(2, 'empty', 'ContactTitle', 'hide', NULL, 2),
	(3, 'notepmty', 'ContactTitle', 'readonly', NULL, 2),
	(4, 'notempty', 'ContactTitle', 'show', NULL, 2),
	(5, 'notequals', 'Region', 'hide', 'USA', 1),
	(6, 'notempty', 'Fax', 'disable', NULL, 2),
	(7, 'empty', 'Fax', 'enable', NULL, 2),
	(8, 'equals', 'Region', 'clear', 'USA', 1),
	(9, 'equals', 'Region', 'focus', 'USA', 1),
	(10, 'equals', 'Region', 'require', 'USA', 1);

CREATE TABLE IF NOT EXISTS `triggers` (
  `id` int NOT NULL AUTO_INCREMENT,
  `table` varchar(250) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `page` varchar(250) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `event` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `field` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `triggers` (`id`, `table`, `page`, `event`, `field`) VALUES
	(1, 'customers', 'edit', 'change', 'Country'),
	(2, 'customers', 'edit', 'change', 'ContactName');

Server code

The server code goes to BEFOREDISPlay event of each page where this functionality must be implemented. In our situation, this code goes to the editing page of the BEFOREDISPLAY CUSTOMER TABLE. The code itself is quite simple. It only sends all the data of the shares and triggers the tables and makes this data available to JavaScript by means of proxy.

Please note that for a better code structure you must create a PHP or C# external file, define a function there and put this code in this feature. Then in all Beforedisplay events

PHP code


$table = $pageObject->tName;
$page = $pageObject->pageName;

// get all the triggers for the current page and send it to Javascript
$sql = DB::PrepareSQL("select * from triggers WHERE `table`=':1' and page=":2"",
    $table, $page);

$triggers=array();

$rs = DB::Query($sql);
while( $data = $rs->fetchAssoc() )
{
    $triggers[] = $data;
}

// do the same for actions table

$sql = DB::PrepareSQL("SELECT * FROM actions WHERE trigger_id IN (select id from triggers WHERE `table`=':1' and page=":2"",
    $table, $page);

$actions=array();

$rs = DB::Query($sql);
while( $data = $rs->fetchAssoc() )
{
    $actions[] = $data;
}

$pageObject->setProxyValue("triggers", $triggers);
$pageObject->setProxyValue("actions", $actions);

Code C#


dynamic actions = XVar.Array(), page = null, sql = null, triggers = XVar.Array();
table = XVar.Clone(pageObject.tName);
page = XVar.Clone(pageObject.pageName);
sql = XVar.Clone(DB.PrepareSQL(new XVar("select * from triggers WHERE `table`=':1' and page=":2""), (XVar)(table), (XVar)(page)));
triggers = XVar.Clone(XVar.Array());
rs = XVar.Clone(DB.Query((XVar)(sql)));
while(XVar.Pack(data = XVar.Clone(rs.fetchAssoc())))
	{
	triggers.InitAndSetArrayItem(data, null);
	}
sql = XVar.Clone(DB.PrepareSQL(new XVar("SELECT * FROM actions WHERE trigger_id IN (select id from triggers WHERE `table`=':1' and page=":2""), (XVar)(table), (XVar)(page)));
actions = XVar.Clone(XVar.Array());
rs = XVar.Clone(DB.Query((XVar)(sql)));
while(XVar.Pack(data = XVar.Clone(rs.fetchAssoc())))
	{
	actions.InitAndSetArrayItem(data, null);
	}
pageObject.setProxyValue(new XVar("triggers"), (XVar)(triggers));
pageObject.setProxyValue(new XVar("actions"), (XVar)(actions));
return null;

JavaScript Code

The JavaScript code is directed to the JavaScript load event on the page where the action should take, in our case, this is the editing page of the customer JavaScript table. The same idea with creating a JavaScript function and calling from the external file is also valid here.

You can expand this code by adding more types of conditions and more actions. Check the comments online for more information.


$('input, textarea, select, radio').on('change', function() {
        // 'this' refers to the element that triggered the change event
        const str = $(this).attr('id');
        const match = str.match(/^value_(.*?)_/);
        var name;
        if (match) {
            console.log('Value changed for:', match[1] , 'New value:', $(this).val());
            name = match[1];
            value = $(this).val();
        }
        
        // lets see if we have a trigger associated with the current field
        let triggers = proxy['triggers'];
        let actions = proxy['actions'];
        for (const trigger of triggers) {
            if (trigger["field"]==name ) {
                // loop through actions array to see what kind of actions we need to perform
                for (const action of actions) {
                    if ( trigger["id"] == action["trigger_id"]) {
                        
                        var proceed = false;
                        
                        // check conditions
                        // equals
                        if (action["condition"] == "equals") {
                            if ( action["condition_value"] == value ) {
                                proceed = true;
                            }
                        }
                        // not equals
                        if (action["condition"] == "notequals") {
                            if ( action["condition_value"] != value ) {
                                proceed = true;
                            }
                        }
                        // empty
                        if (action["condition"] == "empty") {
                            if ( value.length==0 ) {
                                proceed = true;
                            }
                        }
                        // not empty
                        if (action["condition"] == "notempty") {
                            if ( value.length!=0 ) {
                                proceed = true;
                            }
                        }
                        
                        // do we have mathcing conditions 
                        
                        if (proceed) {
                            // show action
                            if (action["action"] == "show") {
                                pageObj.showField(action["target"]);
                            }

                            // hide action
                            if (action["action"] == "hide") {
                                pageObj.hideField(action["target"]);
                            }
                            // clear action
                            if (action["action"] == "clear") {
                                Runner.getControl(pageid, action["target"]).setValue();
                            }
                            // focus action
                            if (action["action"] == "focus") {
                                Runner.getControl(pageid, action["target"]).setFocus();
                            }
                            // require action
                            if (action["action"] == "require") {
                                Runner.getControl(pageid, action["target"]).addValidation("IsRequired");
                            }
                            
                        }

                    }
                }
            }
        }    
    });

Enjoy!

Technology

Berita Olahraga

Lowongan Kerja

Berita Terkini

Berita Terbaru

Berita Teknologi

Seputar Teknologi

Berita Politik

Resep Masakan

Pendidikan

blog, database, displacement, JavaScript, Logic, Xlinesoft

Anak.Uk

JavaScript logic displacement to database – Xlinesoft Blog

JavaScript logic displacement to database – Xlinesoft Blog

Database tables

Server code

JavaScript Code

Leave a Reply Cancel reply

About Us

Quick Links

Recent Posts

Contact Info

JavaScript logic displacement to database – Xlinesoft Blog

JavaScript logic displacement to database – Xlinesoft Blog

Database tables

Server code

JavaScript Code

Leave a Reply Cancel reply

Related Post

12 greatest ladies’s denim manufacturers that celebrities love for a flattering match

Dark theme admin panel

Kim Kardashian channels Kourtney’s wedding ceremony take a look at Dolce & Gabbana celebration amid ‘copycat’ feud