raghul c raghul c - 1 year ago 71
Ajax Question

How to get a response to the same GSP page

I have two select drop down boxes and once i select the values and click submit i need to retrieve the values from database and check they are same if they are same then i need to display a message in the same gsp page as "Both the values are same". If they are not equal then i should print the retrieved values in the text area in the same gsp page. All these should be displayed in the same gsp page ony

This is my gsp page

<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>Render Domain</title>

<g:javascript plugin="jquery" library="jquery" src="jquery/jquery-1.7.2.js"/>
<script>
$(document).ready(function(){
$('.testMe').click(function(){
var URL="${createLink(controller:'jsonComparison',action:'compare')}";
alert(URL)
alert(asd.value)
alert(asd1.value)
$.ajax({
url:URL,
data: {asd:asd.value,asd1:asd1.value},
success: function(data){
//console.log(resp);
$("#asd").val(resp.asd);
$("#asd").val(resp.asd);
}
});
});
});
</script>


</head>
<body>
<g:form>
<g:select name="asd" from="${eventsList}" value="1" noSelection="['':'-Choose the From Date-']"/>
<g:select name="asd1" from="${eventsList}" value="1" noSelection="['':'-Choose the From Date-']"/>
<%-- <g:actionSubmit value="Compare" action="compare" /> --%>
<button class="testMe">Compare</button>
</g:form>
</body>
</html>

This is my controller method
def compare(){
println "compare method called"
def values = params.asd
def values1 = params.asd1
println "first value"+ values
println "second value"+values1
println "form submitted successfully"
if(values !=null && values1 !=null){
render (view:"index")
}
else{
println "values are same"
}

}


anyone help me out how to do this as i am new to grails and struck on how to do this

Answer Source

I added small example with minimal changes. I assume it's just a learning task because this architecture is not good for real solutions.

ComareController:

class CompareController {

    def index() {
        def eventsList = ['event1', 'event2', 'event3']
        render view: 'index', model: [eventsList: eventsList]
    }

    def ajaxCompare() {
        //You can retrieve entries from DB here like Event.get(params.long('firstEventId'))
        //But it will be better to add EventService to interact with DB
        render status: 200, text: params.firstEvent == params.secondEvent ? "Equal" : "Different: ${params.firstEvent} != ${params.secondEvent}"
    }
}

compare/index.gsp:

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head>
        <title> Render Domain </title>
        <g:javascript plugin="jquery" library="jquery" src="jquery/jquery-1.11.1.js"/>
        <script>
            $(document).ready(function(){
                $('#doCompare').click(function(){
                    $.ajax({
                        url: "${createLink(controller:'compare', action:'ajaxCompare')}",
                        data: {firstEvent: $('#firstEvent').val(), secondEvent: $('#secondEvent').val()},
                        success: function(data){
                            $('#result').val(data)
                        }
                    });
                });
            });
        </script>
    </head>

    <body>
        <g:select name="firstEvent" from="${eventsList}" value="${eventsList.first()}" noSelection="['':'-Choose the From Date-']"/>
        <g:select name="secondEvent" from="${eventsList}" value="${eventsList.last()}" noSelection="['':'-Choose the From Date-']"/>
        <button id="doCompare" onclick="void(0);">Compare</button>
        <br>
        <textarea id="result"></textarea>
    </body>
</html>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download