grails: display new web page via an ajax call

Question

I've had a look at a number of posts and none seem to handle this problem.

I am trying to send data from a javascript via an ajax call and then get that data into a grails controller/action at server level to process and then to display that web page. The data gets transferred okay but the target web page fails to replace the current web page.

Here is the ajax call that sends the data to the action successfully:

 $.ajax({
      type: "POST",
      url: "createVideopNm",
      dataType: "json",
      contentType: "application/json",
      asynch: false,
      processData: false, 
        data: vidData 
          //data: vidAudioId, 
          // data: { name: "Mike", location: "UK" }, 
    })
    .done(function(msg, status, error) { 

            alert( "getJsVCoords Done: data SAVED - Sys status: " + status
                    + "\n" +
                    " Error: " + error
                    + "\n" +
                    " responseText: " + msg.responseText
                    ) 
    })
    .error(function(msg, status, error) { 
        alert( "getJsVCoords Error: Data NOT Saved -1- Sys status: " + status 
                + "\n" +
                " Error: " + error
                + "\n" +
                " responseText: " + msg.responseText
            ) 
    })

Here is the controller action which is definitely run through from the ajax call:

    def createVideopNm(Integer max) {

    if(request.method == 'GET')
    {
        log.debug(" createVideopNm - GET ")
    }
    else if(request.method == 'POST')
    {
        // POST called from javascript functrionsendVidData in pNm

        log.debug(" createVideopNm - POST -1-")

        def jsonObject = request.JSON
        log.debug(" createVideopNm - POST -2-" + jsonObject.xCoord)

        render ( ['X': jsonObject.xCoord , 'Y': jsonObject.yCoord , 'P' : jsonObject.picId, 'A' : jsonObject.audioId] as JSON)

        log.debug(" createVideopNm - POST -3-")
    }

    def workVideo= prepVideopNm()
    flash.message = "createVideopNm workVideo nm: ${workVideo}"
    log.debug(" createVideopNm - -4-")

    params.max = Math.min(max ?: 10, 100)
    log.debug(" createVideopNm - -5-")
    [workVideo: workVideo]
    log.debug(" createVideopNm - -6-")

    return true
}

As you can see I have a GET and a POST path through the action - if I simply bring up the page by typing in the URL in the browser address field it works fine. But if I invoke the action through the ajax call it does not appear - all logging indicates every thing is fine. For example, the Chrome web diagnostic tool Console has a message - "XHR finished loading: ' url name '

Comparing the grails log file for both the GET and the POST/ajax operations there are some additional grail log messagesfor the GET which reflects the fact it does correctly display the web page:

2013-05-16 20:05:42,104 [http-bio-9000-exec-8] DEBUG homevu1.VideosController  -  createVideopNm - -4-

2013-05-16 20:05:42,104 [http-bio-9000-exec-8] DEBUG homevu1.VideosController  -  createVideopNm - -5-

2013-05-16 20:05:42,104 [http-bio-9000-exec-8] DEBUG homevu1.VideosController  -  createVideopNm - -6-

2013-05-16 20:05:42,215 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - resolveResourceAndURI: [dir:images, file:favicon.ico]
2013-05-16 20:05:42,216 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - resolveResourceAndURI: [dir:images, file:apple-touch-icon.png]
2013-05-16 20:05:42,217 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - resolveResourceAndURI: [dir:images, file:apple-touch-icon-retina.png]
2013-05-16 20:05:42,218 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - resolveResourceAndURI: [dir:css, file:main.css]
2013-05-16 20:05:42,219 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - resolveResourceAndURI: [dir:css, file:mobile.css]
2013-05-16 20:05:42,219 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - laying out resources for request org.apache.catalina.connector.RequestFacade@275a7e94: [:]
2013-05-16 20:05:42,220 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - Rendering resources for disposition [head]
2013-05-16 20:05:42,220 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - Rendering resources, modules in tracker: null
2013-05-16 20:05:42,220 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - Rendering resources, modules needed: []
2013-05-16 20:05:42,220 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - Rendering non-deferred resources, modules: []...
2013-05-16 20:05:42,220 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - Rendering page fragments for disposition: head
2013-05-16 20:05:42,220 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - Removing outstanding request disposition: head
2013-05-16 20:05:42,221 [http-bio-9000-exec-8] DEBUG resource.ResourceTagLib  - resolveResourceAndURI: [dir:HomeVu1/skin, file:HomeVu.jpg, absolute:false]

Whereas the POST via ajax operation the logging simply stops after the 'createVideopNm - -6-' message.

What is different in the behavior when an grails action is invoked via an ajax call as opposed to directly by typing in the url address into a browser?

Answer 1

How are you replacing the old page with new html content/ data content from server? I see no code here in your js call is doing that, just giving some alert.

As Sergio said your last statement of the action must be [workVideo: workVideo], not true if you want workVideo in your gsp to be rendered. Then in your "".done(function(msg, status, error) { "" you have to parse that data and populate the div/other, you want in your gsp page.

Or you simply use for calling ajax and put the div id in 'update' above; and you have to render view/template from your action. you can see details of remoteLink here: remoteLink

Answer 2

Please, try to remove the render and test again. Maybe there is a conflict. You are using render and after a return. (I try to post a comment, but I don't have reputation for that yet).