Grails on Groovy | From within a grails HQL, how would I use a MySQL / Oracle Native Function | HQL Query use MySQL Native Functions | Register Functions for MySQL Native Support

To call a MySQL native function in HQL query builder, the SQL dialect must be aware of it. You can add your function at runtime in BootStrap.groovy like this:

import org.codehaus.groovy.grails.commons.GrailsApplication import org.codehaus.groovy.grails.web.servlet.GrailsApplicationAttributes import org.hibernate.dialect.function.SQLFunctionTemplate import org.hibernate.type.StringType import org.springframework.context.ApplicationContext class BootStrap { def init = { servletContext -> ApplicationContext applicationContext = servletContext.getAttribute(GrailsApplicationAttributes.APPLICATION_CONTEXT) GrailsApplication application = (GrailsApplication) applicationContext.getBean("grailsApplication") def dialect = applicationContext.sessionFactory.dialect def MyFunction = new SQLFunctionTemplate(StringType.INSTANCE, "MyFunction(?1)") dialect.registerFunction('MyFunction', MyFunction) } def destroy = { } }

MySQL native function registered with our Grails project, now we are able to call the function in our HQL queries like below:

package com.pkm import grails.transaction.Transactional @Transactional class HomeService { void callMe() { List result = Table1.executeQuery("select id,name,roll,MyFunction(id) from Table1") println(result) } }

MySQL > Create Function > Call MySQL Function > Execution MySQL Function > MysQL Show Listed Functions

MySQL find_in_set Sith Multiple Search String | MySQL Variable With Multiple Values | MySQL Use of REGEXP | Search IN With Multiple Values

Problem is like below:

We know that find_in_set only search by a single string find_in_set('2', '2,4,6,8') In the above example, '2' is the only string used for search. So we are looking for if there is any way to use find_in_set kind of functionality and search by multiple strings, like find_in_set('2,4,6', '2,3,4,6,8,10')

The only solution is to use REGEXP

where CONCAT(",", t2.id, ",") REGEXP ",(2|4|6|8|10),"

Full query would be like below:

SELECT t1.*, SUM(t2.score) AS score_total, GROUP_CONCAT(t2.subject ORDER BY t2.id ASC) AS subjects, GROUP_CONCAT(t2.id ORDER BY t2.id ASC) AS t2_id FROM table1 t1 JOIN table2_child t2 ON (t1.id = t2.table1_id) WHERE CONCAT(",", t2.id, ",") REGEXP ",(2|4|6|8|10)," GROUP BY t1.id

HTML + CSS TRICKS, FLOAT LEFT DIV WITH EQUAL HEIGHT, MAGIC OF USING FLEX - CSS BEGINING

<section class="container"> <div class="left-half"> <article> <h1>Left Half 1</h1> </article> </div> <div class="left-half"> <article> <h1>Left Half 2</h1> </article> </div> <div class="left-half"> <article> <h1>Left Half 3</h1> <p>Weekends don't</p> </article> </div> <div class="left-half"> <article> <h1>Left Half 4</h1> <p>Weekends don't</p> <p>Weekends don't</p> </article> </div> <div class="left-half"> <article> <h1>Left Half 5</h1> <p>Weekends don't</p> <p>Weekends don't</p> </article> </div> <div class="left-half"> <article> <h1>Left Half 6</h1> <p>Weekends don't</p> </article> </div> </section>

html, body, section { height: 100%; } body { color: #fff; font-family: sans-serif; font-size: 1.25rem; line-height: 150%; text-align: center; text-shadow: 0 2px 2px #b6701e; } h1 { font-size: 1.75rem; margin: 0 0 0.75rem 0; } .container { display: flex; flex-flow: row wrap; justify-content: flex-start; } .left-half { background-color: #ff9e2c; padding: 0; width: calc(50% - 6px); border: 2px solid red; display: flex; justify-content: flex-start; align-items: flex-start; }

Jsfiddle link

$(window).width() AND $(window).outerWidth() excluding the scrollbar width > Window and viewport width in CSS and Javascript

It is very unpleasant that $(window).width() or $(window).outerWidth() does not return actual view port width scroll bar width. Especially when trying to match the window width to the CSS media queries.

Currently if you have a media query for responsive design with the CSS like:

@media screen and (max-width: 1600px) { body {background: red;} }

When the background color is actually applied to the document by the browser, jQuery tells the window width is less than 1600px (1600 - scrollbar width). But you know its not the expected result.

This is very unpleasant situation cases where there are some mobile-specific stuff that needs to be done in both, CSS and JS. And they would need to be done at the exactly same width of the document/window.

However, plain JavaScript returns 1600 as the window width when asked using below code snippet:

window.innerWidth

MySQL > Create Function > Call MySQL Function > Execution MySQL Function > MysQL Show Listed Functions

Use of MySQL function will make our coding easier. Function can contain some business logic.

So I will create MySQL function first using below query:

DELIMITER // DROP FUNCTION IF EXISTS MyFunction; CREATE FUNCTION MyFunction(p1 INT) RETURNS VARCHAR(50) BEGIN DECLARE v1 VARCHAR(50) DEFAULT ""; SELECT concat(name,'-',roll) INTO v1 FROM table1 WHERE id = p1; RETURN v1; END; //

So our MySQL function created, now we will list our available MySQL functions using below query:

SHOW FUNCTION STATUS

Now we will select/execute MySQL function using below query

select *,MyFunction(id) as 'function' from table1;

Which will results like below screenshot:

JQuery Custom Popup Example

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom Popup</title> <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1,minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="custom-popup.js?v=<?= time() ?>"></script> <script type="text/javascript"> $(document).ready(function () { console.log(CustomPopup.getAvailableOptions()); var body = $(document.body), html = body.find(".move-container").clone(true); // to get or check initial config of CustomPopup just console log below // CustomPopup.getAvailableOptions() // and all available events shown in "triggers" array // so what you need to do popup.trigger("close") to close popup body.find(".open-popup-html").click(function() { CustomPopup.fromHTML($("<div>Are you sure want to delete?</div>")); }); body.find(".open-popup-url").click(function() { CustomPopup.fromURL("popup.php", {id: 0}, { // you also can set all below function and variables // as html data attribute onOpen: function(p) { console.log("POPUP OPENED"); // disabling popup p.trigger("disable"); setTimeout(function() { // enabling popup p.trigger("enable"); }, 2000); }, onClose: function(p) { console.log("POPUP CLOSED"); }, onSubmit: function(p) { p.trigger("show-loading"); console.log("POPUP SUBMITTED"); // return false will not close popup immediately // you have to close manually by popup.trigger("close") setTimeout(function() { p.trigger("close-loading"); setTimeout(function() { p.trigger("close"); }, 2000); }, 2000); return false; }, popupTitle: "POPUP TITLE", yesText: "YES TEXT", noText: "NO TEXT", showTitle: true, showClose: true, popupClass: "some-class", beforeSend: function(xhr) { xhr.setRequestHeader('X-Test-Header1.1', 'test-value1'); xhr.setRequestHeader('X-Test-Header2.1', 'test-value2'); }, xhrFail: function(jqXHR, textStatus, errorThrown) { console.log(jqXHR); console.log(textStatus); console.log(errorThrown); } }); }); }); function formSubmitted() { alert("POPUP SUBMITTED"); } </script> </head> <body> <button class="open-popup-html">Open popup from HTML</button><br/> <button class="open-popup-url">Open popup from URL</button><br/> <button type="button" data-popup-url="popup.php" class="my-popup-opener" data-popup-class="" data-yes-text="Save" data-on-submit="formSubmitted" data-popup-title="MY POPUP" data-on-open="formOpened" data-no-text="Close" data-show-title="1"> Open Popup On Click Html Element (.my-popup-opener) </button> </body> </html>

On popup submit there will be an overlay shown above.

You can download full source code from here

JQuery TreeView Example And Stylish Select DropDown

Create TreeView example: Here container is the boundary within tree dropdown will contains. If you open this tree view in popup, container will be popup body.

var tree = $("div.tree-inside-this-div").treeView({ json: r, openAll: 0, noText: "Select...", change: function (value) { console.log(value); }, value: "1.1.2.2.3.2", container: $(document.body) });

To set specific value or to select desired tree node:

tree.value("100");

You can put a attribute named "selected": true to auto select node when create tree.

"children": [ { "id": "1.1.2.2.3.2.4.1", "text": "Label - 4.1", "selected": true }, { "id": "1.1.2.2.3.2.4.2", "text": "Label - 4.2" } ]

You can also convert select to stylish dropdown:

$(document.body).find("select").selectView();

You also can use this tree view for custom action menu using below command $(document.body).find("select.action_menu").actionView({ actionWidth: 140 });

And finally you download source code from here.