You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@click.apache.org by Damian Penney <da...@penney.org> on 2011/08/18 15:43:05 UTC

page called via ajax not rendering when ajaxbehavior added

So I have a page that is loaded via a jQuery $('#divid).load() method that
loads just fine until I add an ajax behavior to an actionlink that is
included on the page at which point it no longer renders. If I go the url
directly /page/page.htm it renders correctly.

When called via ajax the logs show
[Click] [info ] handleRequest:  /groups/groups.htm - 31 ms

While when called directly I see
[Click] [info ] renderTemplate: /groups/groups.htm - 43 ms
[Click] [info ] handleRequest:  /groups/groups.htm - 70 ms

So it appears that renderTemplate isn't being called

Any ideas as to what might be going on here?

Thanks, Damian

Re: page called via ajax not rendering when ajaxbehavior added

Posted by Bob Schellink <sa...@gmail.com>.
Nice, I didn't know jQuery allowed one to extend the Ajax request like that.

regards

Bob

On 2011/08/19 16:37 PM, Damian Penney wrote:
> I'm not sure if this was the most efficient way to do it but this is what I did (and I haven't
> tested it across all browsers either).
>
>
> First I copied the default ajax transport from jquery-1.6.2.js and added this bit
>
> if (c["X-Requested-With"]) {
>       delete c["X-Requested-With"]
> }
>
> (apologies for the minified variable names)
>
> I added that whole function as a new transport for datatype "click"
>
> $.ajaxTransport("click", function (a) {
>     .....
>
> The other thing I need was a converter so that jQuery knows what to do with the response (it doesn't
> do anything at all in my case so perhaps there is a way to skip it.
>
> $.ajaxSetup({
>      converters: {
> "html click": function (a) {
>              return a
>          }
>      }
> });
>
>
> To call it you just need to set dataType as click in your ajax call
>
>   $.ajax({
>          url: '/myurl/page.htm',
>          dataType: "click",
>          accepts: {"click": "text/html"},
>          success: function(data) {
>                 $('#container').html(data);
>           },
>          error: function(data) {
>                alert("error" + data.error());
>           }
>       });
>
>
>
> Here is the whole chunk.
>
>
> var xhrOnUnloadAbort = window.ActiveXObject ?
> function () {
>      for (var a in xhrCallbacks) {
>          xhrCallbacks[a](0, 1)
>      }
> } : false, xhrId = 0, xhrCallbacks;
>
> $.ajaxSetup({
>      converters: {
> "html click": function (a) {
>              return a
>          }
>      }
> });
>
> $.ajaxTransport("click", function (a) {
>      if (!a.crossDomain || jQuery.support.cors) {
>          var b;
>          return {
>              send: function (c, d) {
>                  var e = a.xhr(),
>                      f, g;
>                  if (a.username) {
>                      e.open(a.type, a.url, a.async, a.username, a.password)
>                  } else {
>                      e.open(a.type, a.url, a.async)
>                  }
>                  if (a.xhrFields) {
>                      for (g in a.xhrFields) {
>                          e[g] = a.xhrFields[g]
>                      }
>                  }
>                  if (a.mimeType && e.overrideMimeType) {
>                      e.overrideMimeType(a.mimeType)
>                  }
>                  if (!a.crossDomain && !c["X-Requested-With"]) {
>                      c["X-Requested-With"] = "XMLHttpRequest"
>                  }
>
>                  if (c["X-Requested-With"]) {
>                      delete c["X-Requested-With"]
>                  }
>
>                  try {
>                      for (g in c) {
>                          e.setRequestHeader(g, c[g])
>                      }
>                  } catch (h) {}
>                  e.send(a.hasContent && a.data || null);
>                  b = function (c, g) {
>                      var h, i, j, k, l;
>                      try {
>                          if (b && (g || e.readyState === 4)) {
>                              b = undefined;
>                              if (f) {
>                                  e.onreadystatechange = jQuery.noop;
>                                  if (xhrOnUnloadAbort) {
>                                      delete xhrCallbacks[f]
>                                  }
>                              }
>                              if (g) {
>                                  if (e.readyState !== 4) {
>                                      e.abort()
>                                  }
>                              } else {
>                                  h = e.status;
>                                  j = e.getAllResponseHeaders();
>                                  k = {};
>                                  l = e.responseXML;
>                                  if (l && l.documentElement) {
>                                      k.xml = l
>                                  }
>                                  k.text = e.responseText;
>                                  try {
>                                      i = e.statusText
>                                  } catch (m) {
>                                      i = ""
>                                  }
>                                  if (!h && a.isLocal && !a.crossDomain) {
>                                      h = k.text ? 200 : 404
>                                  } else if (h === 1223) {
>                                      h = 204
>                                  }
>                              }
>                          }
>                      } catch (n) {
>                          if (!g) {
>                              d(-1, n)
>                          }
>                      }
>                      if (k) {
>                          d(h, i, k, j)
>                      }
>                  };
>                  if (!a.async || e.readyState === 4) {
>                      b()
>                  } else {
>                      f = ++xhrId;
>                      if (xhrOnUnloadAbort) {
>                          if (!xhrCallbacks) {
>                              xhrCallbacks = {};
>                              jQuery(window).unload(xhrOnUnloadAbort)
>                          }
>                          xhrCallbacks[f] = b
>                      }
>                      e.onreadystatechange = b
>                  }
>              },
>              abort: function () {
>                  if (b) {
>                      b(0, 1)
>                  }
>              }
>          }
>      }
> });
>
> On Thu, Aug 18, 2011 at 10:02 PM, Bob Schellink <sabob1@gmail.com <ma...@gmail.com>> wrote:
>
>     Hi Damian,
>
>
>     On 2011/08/19 01:05 AM, Damian Penney wrote:
>
>         All sorted - within jQuery I just added a new ajax transport for dataType 'click' that
>         removed the
>         X-Requested-With header and then added an associated converter; all working perfectly now.
>
>
>
>     Very interesting. I didn't think it would be possible with jQuery ;-)
>
>     Do you mind posting a snippet on how you achieved this?
>
>     regards
>
>     Bob
>
>


Re: page called via ajax not rendering when ajaxbehavior added

Posted by Damian Penney <da...@penney.org>.
I'm not sure if this was the most efficient way to do it but this is what I
did (and I haven't tested it across all browsers either).


First I copied the default ajax transport from jquery-1.6.2.js and added
this bit

if (c["X-Requested-With"]) {
     delete c["X-Requested-With"]
}

(apologies for the minified variable names)

I added that whole function as a new transport for datatype "click"

$.ajaxTransport("click", function (a) {
   .....

The other thing I need was a converter so that jQuery knows what to do with
the response (it doesn't do anything at all in my case so perhaps there is a
way to skip it.

$.ajaxSetup({
    converters: {
        "html click": function (a) {
            return a
        }
    }
});


To call it you just need to set dataType as click in your ajax call

 $.ajax({
        url: '/myurl/page.htm',
        dataType: "click",
        accepts: {"click": "text/html"},
        success: function(data) {
               $('#container').html(data);
         },
        error: function(data) {
              alert("error" + data.error());
         }
     });



Here is the whole chunk.


var xhrOnUnloadAbort = window.ActiveXObject ?
function () {
    for (var a in xhrCallbacks) {
        xhrCallbacks[a](0, 1)
    }
} : false, xhrId = 0, xhrCallbacks;

$.ajaxSetup({
    converters: {
        "html click": function (a) {
            return a
        }
    }
});

$.ajaxTransport("click", function (a) {
    if (!a.crossDomain || jQuery.support.cors) {
        var b;
        return {
            send: function (c, d) {
                var e = a.xhr(),
                    f, g;
                if (a.username) {
                    e.open(a.type, a.url, a.async, a.username, a.password)
                } else {
                    e.open(a.type, a.url, a.async)
                }
                if (a.xhrFields) {
                    for (g in a.xhrFields) {
                        e[g] = a.xhrFields[g]
                    }
                }
                if (a.mimeType && e.overrideMimeType) {
                    e.overrideMimeType(a.mimeType)
                }
                if (!a.crossDomain && !c["X-Requested-With"]) {
                    c["X-Requested-With"] = "XMLHttpRequest"
                }

                if (c["X-Requested-With"]) {
                    delete c["X-Requested-With"]
                }

                try {
                    for (g in c) {
                        e.setRequestHeader(g, c[g])
                    }
                } catch (h) {}
                e.send(a.hasContent && a.data || null);
                b = function (c, g) {
                    var h, i, j, k, l;
                    try {
                        if (b && (g || e.readyState === 4)) {
                            b = undefined;
                            if (f) {
                                e.onreadystatechange = jQuery.noop;
                                if (xhrOnUnloadAbort) {
                                    delete xhrCallbacks[f]
                                }
                            }
                            if (g) {
                                if (e.readyState !== 4) {
                                    e.abort()
                                }
                            } else {
                                h = e.status;
                                j = e.getAllResponseHeaders();
                                k = {};
                                l = e.responseXML;
                                if (l && l.documentElement) {
                                    k.xml = l
                                }
                                k.text = e.responseText;
                                try {
                                    i = e.statusText
                                } catch (m) {
                                    i = ""
                                }
                                if (!h && a.isLocal && !a.crossDomain) {
                                    h = k.text ? 200 : 404
                                } else if (h === 1223) {
                                    h = 204
                                }
                            }
                        }
                    } catch (n) {
                        if (!g) {
                            d(-1, n)
                        }
                    }
                    if (k) {
                        d(h, i, k, j)
                    }
                };
                if (!a.async || e.readyState === 4) {
                    b()
                } else {
                    f = ++xhrId;
                    if (xhrOnUnloadAbort) {
                        if (!xhrCallbacks) {
                            xhrCallbacks = {};
                            jQuery(window).unload(xhrOnUnloadAbort)
                        }
                        xhrCallbacks[f] = b
                    }
                    e.onreadystatechange = b
                }
            },
            abort: function () {
                if (b) {
                    b(0, 1)
                }
            }
        }
    }
});

On Thu, Aug 18, 2011 at 10:02 PM, Bob Schellink <sa...@gmail.com> wrote:

> Hi Damian,
>
>
> On 2011/08/19 01:05 AM, Damian Penney wrote:
>
>> All sorted - within jQuery I just added a new ajax transport for dataType
>> 'click' that removed the
>> X-Requested-With header and then added an associated converter; all
>> working perfectly now.
>>
>
>
> Very interesting. I didn't think it would be possible with jQuery ;-)
>
> Do you mind posting a snippet on how you achieved this?
>
> regards
>
> Bob
>

Re: page called via ajax not rendering when ajaxbehavior added

Posted by Bob Schellink <sa...@gmail.com>.
Hi Damian,

On 2011/08/19 01:05 AM, Damian Penney wrote:
> All sorted - within jQuery I just added a new ajax transport for dataType 'click' that removed the
> X-Requested-With header and then added an associated converter; all working perfectly now.


Very interesting. I didn't think it would be possible with jQuery ;-)

Do you mind posting a snippet on how you achieved this?

regards

Bob

Re: page called via ajax not rendering when ajaxbehavior added

Posted by Damian Penney <da...@penney.org>.
All sorted - within jQuery I just added a new ajax transport for dataType
'click' that removed the X-Requested-With header and then added an
associated converter; all working perfectly now.

Thanks for getting me back on the right track.
Damian


On Thu, Aug 18, 2011 at 11:34 AM, Damian Penney <da...@penney.org> wrote:

> Thanks Bob - my use case is that the navbar loads all the pages via ajax
> loads; one of those pages has some additional ajax functionality.which was
> causing the issue.
>
> Thanks for the tip regards the X-Requested-With. I'll see what I can do
>
> Damian
>
> On Thu, Aug 18, 2011 at 11:26 AM, Bob Schellink <sa...@gmail.com> wrote:
>
>> Hi Damian,
>>
>> Reason is that Click processes things slightly different when it detects
>> an Ajax request on a page with AjaxBehaviors. Click tries to match the
>> incoming request to a registered Ajax target control and if it cannot find
>> it, does nothing.
>>
>> For backwards compatibility Click *will* render the page as is if no Ajax
>> target control is registered.
>>
>> Generally Click pages is not loaded through Ajax, so I'm not sure your use
>> case is catered for. You could try and remove the Ajax request header
>> "X-Requested-With", which is how click identifies Ajax requests. If you can
>> remove that header using jQuery, Click should render the page.
>>
>> Alternatively you could extend ClickServlet and change the behavior to fit
>> your needs. Probably have to look at the method: "processAjaxPageEvents".
>>
>> regards
>>
>> Bob
>>
>>
>> On 2011/08/18 15:43 PM, Damian Penney wrote:
>>
>>> So I have a page that is loaded via a jQuery $('#divid).load() method
>>> that loads just fine until I
>>> add an ajax behavior to an actionlink that is included on the page at
>>> which point it no longer
>>> renders. If I go the url directly /page/page.htm it renders correctly.
>>>
>>> When called via ajax the logs show
>>> [Click] [info ] handleRequest:  /groups/groups.htm - 31 ms
>>>
>>> While when called directly I see
>>> [Click] [info ] renderTemplate: /groups/groups.htm - 43 ms
>>> [Click] [info ] handleRequest:  /groups/groups.htm - 70 ms
>>>
>>> So it appears that renderTemplate isn't being called
>>>
>>> Any ideas as to what might be going on here?
>>>
>>> Thanks, Damian
>>>
>>
>>
>

Re: page called via ajax not rendering when ajaxbehavior added

Posted by Damian Penney <da...@penney.org>.
Thanks Bob - my use case is that the navbar loads all the pages via ajax
loads; one of those pages has some additional ajax functionality.which was
causing the issue.

Thanks for the tip regards the X-Requested-With. I'll see what I can do

Damian

On Thu, Aug 18, 2011 at 11:26 AM, Bob Schellink <sa...@gmail.com> wrote:

> Hi Damian,
>
> Reason is that Click processes things slightly different when it detects an
> Ajax request on a page with AjaxBehaviors. Click tries to match the incoming
> request to a registered Ajax target control and if it cannot find it, does
> nothing.
>
> For backwards compatibility Click *will* render the page as is if no Ajax
> target control is registered.
>
> Generally Click pages is not loaded through Ajax, so I'm not sure your use
> case is catered for. You could try and remove the Ajax request header
> "X-Requested-With", which is how click identifies Ajax requests. If you can
> remove that header using jQuery, Click should render the page.
>
> Alternatively you could extend ClickServlet and change the behavior to fit
> your needs. Probably have to look at the method: "processAjaxPageEvents".
>
> regards
>
> Bob
>
>
> On 2011/08/18 15:43 PM, Damian Penney wrote:
>
>> So I have a page that is loaded via a jQuery $('#divid).load() method that
>> loads just fine until I
>> add an ajax behavior to an actionlink that is included on the page at
>> which point it no longer
>> renders. If I go the url directly /page/page.htm it renders correctly.
>>
>> When called via ajax the logs show
>> [Click] [info ] handleRequest:  /groups/groups.htm - 31 ms
>>
>> While when called directly I see
>> [Click] [info ] renderTemplate: /groups/groups.htm - 43 ms
>> [Click] [info ] handleRequest:  /groups/groups.htm - 70 ms
>>
>> So it appears that renderTemplate isn't being called
>>
>> Any ideas as to what might be going on here?
>>
>> Thanks, Damian
>>
>
>

Re: page called via ajax not rendering when ajaxbehavior added

Posted by Bob Schellink <sa...@gmail.com>.
Hi Damian,

Reason is that Click processes things slightly different when it detects an Ajax request on a page 
with AjaxBehaviors. Click tries to match the incoming request to a registered Ajax target control 
and if it cannot find it, does nothing.

For backwards compatibility Click *will* render the page as is if no Ajax target control is registered.

Generally Click pages is not loaded through Ajax, so I'm not sure your use case is catered for. You 
could try and remove the Ajax request header "X-Requested-With", which is how click identifies Ajax 
requests. If you can remove that header using jQuery, Click should render the page.

Alternatively you could extend ClickServlet and change the behavior to fit your needs. Probably have 
to look at the method: "processAjaxPageEvents".

regards

Bob

On 2011/08/18 15:43 PM, Damian Penney wrote:
> So I have a page that is loaded via a jQuery $('#divid).load() method that loads just fine until I
> add an ajax behavior to an actionlink that is included on the page at which point it no longer
> renders. If I go the url directly /page/page.htm it renders correctly.
>
> When called via ajax the logs show
> [Click] [info ] handleRequest:  /groups/groups.htm - 31 ms
>
> While when called directly I see
> [Click] [info ] renderTemplate: /groups/groups.htm - 43 ms
> [Click] [info ] handleRequest:  /groups/groups.htm - 70 ms
>
> So it appears that renderTemplate isn't being called
>
> Any ideas as to what might be going on here?
>
> Thanks, Damian