Saturday, June 16, 2018

Grails on Groovy > Grails 2 > How to know programmatically if a view or a layout file exists in grails | Check if view or layout file exists

I want to know programmatically if a view or a layout exists in grails.
Since Grails 2.0, you can inject a GrailsConventionGroovyPageLocator:
package com.pkm

import org.codehaus.groovy.grails.web.pages.discovery.GrailsConventionGroovyPageLocator

class HomeController {
    GrailsConventionGroovyPageLocator groovyPageLocator

    def index() {
        println(groovyPageLocator.findView("myView"))
        println(groovyPageLocator.findViewByPath("/home/myView"))
        println(groovyPageLocator.findTemplate("myTemplate"))
        println(groovyPageLocator.findTemplateByPath("/home/myTemplate"))
        render(text: "Done")
    }
}
Will output like below, it no view found, null return.
URL [file:C:/Grails-project-path/grails-app/views/home/myView.gsp]

URL [file:C:/Grails-project-path/grails-app/views/home/myView.gsp]

URL [file:C:/Grails-project-path/grails-app/views/home/_myTemplate.gsp]

URL [file:C:/Grails-project-path/grails-app/views/home/_myTemplate.gsp]

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

Friday, June 8, 2018

$(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

Thursday, June 7, 2018

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:


Monday, May 7, 2018

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