Quantcast

Template rendering and jQuery/DOM question

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Template rendering and jQuery/DOM question

Chris Lamb
Hi,

I am currently using jQuery to trigger functions based upon class
attributes inside of my Views.

While tidying the page up - I am moving the iterative sections of code
into templates - I have discovered that if I build the section of html
inside of the template - then it will no longer register with the
jQuery functions.

Viewing the code shows that the final html page is an exact match -
however the events are lost in the instance constructed using
templates.

Does this suggest a document loading issue I shall need to be aware of
whenever I use Ajax - be it with jQuery or whatever is next "thing" -
if I use templates to render sections of the pages I output?



--
Chris

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Template rendering and jQuery/DOM question

tomas lin
You need to re-subscribe events when you update your page elements.

Check out .live() and LiveQuery plugin

http://api.jquery.com/live/
http://plugins.jquery.com/project/livequery

On Fri, Sep 10, 2010 at 11:56 AM, Chris Lamb
<[hidden email]> wrote:

> Hi,
>
> I am currently using jQuery to trigger functions based upon class
> attributes inside of my Views.
>
> While tidying the page up - I am moving the iterative sections of code
> into templates - I have discovered that if I build the section of html
> inside of the template - then it will no longer register with the
> jQuery functions.
>
> Viewing the code shows that the final html page is an exact match -
> however the events are lost in the instance constructed using
> templates.
>
> Does this suggest a document loading issue I shall need to be aware of
> whenever I use Ajax - be it with jQuery or whatever is next "thing" -
> if I use templates to render sections of the pages I output?
>
>
>
> --
> Chris
>
> ---------------------------------------------------------------------
> To unsubscribe from this list, please visit:
>
>    http://xircles.codehaus.org/manage_email
>
>
>

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Template rendering and jQuery/DOM question

Chris Lamb
Many thanks, Tomas - I shall have a close look through these links.

I think I was confused because I am having this experience at the
point of initial
page loading - not as a result of a remote call.

I expected issues with remote calls. I did not expect these problems
when using <g:render .../>  at initial page loads.

Does the act of rendering a template have the same lifecycle impact at
initial load as it does when used as a method to update page elements
later? I think that is my question!


Chris



On 10 September 2010 12:08, Tomas Lin <[hidden email]> wrote:

> You need to re-subscribe events when you update your page elements.
>
> Check out .live() and LiveQuery plugin
>
> http://api.jquery.com/live/
> http://plugins.jquery.com/project/livequery
>
> On Fri, Sep 10, 2010 at 11:56 AM, Chris Lamb
> <[hidden email]> wrote:
>> Hi,
>>
>> I am currently using jQuery to trigger functions based upon class
>> attributes inside of my Views.
>>
>> While tidying the page up - I am moving the iterative sections of code
>> into templates - I have discovered that if I build the section of html
>> inside of the template - then it will no longer register with the
>> jQuery functions.
>>
>> Viewing the code shows that the final html page is an exact match -
>> however the events are lost in the instance constructed using
>> templates.
>>
>> Does this suggest a document loading issue I shall need to be aware of
>> whenever I use Ajax - be it with jQuery or whatever is next "thing" -
>> if I use templates to render sections of the pages I output?
>>
>>
>>
>> --
>> Chris
>>
>> ---------------------------------------------------------------------
>> To unsubscribe from this list, please visit:
>>
>>    http://xircles.codehaus.org/manage_email
>>
>>
>>
>
> ---------------------------------------------------------------------
> To unsubscribe from this list, please visit:
>
>    http://xircles.codehaus.org/manage_email
>
>
>



--
Chris Lamb
------------------------------------------------------
[hidden email]

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Template rendering and jQuery/DOM question

tomas lin
We use templates all over the place with jQuery and never really had
any problems as long as all the events were bound using $( document
).ready. If you are using templates and tags in your gsps, it all
renders out as a normal flat HTML file.

Would probably be easier to help if you throw a few concrete examples
rather than ask hypothetically.

On Fri, Sep 10, 2010 at 12:35 PM, Chris Lamb
<[hidden email]> wrote:

> Many thanks, Tomas - I shall have a close look through these links.
>
> I think I was confused because I am having this experience at the
> point of initial
> page loading - not as a result of a remote call.
>
> I expected issues with remote calls. I did not expect these problems
> when using <g:render .../>  at initial page loads.
>
> Does the act of rendering a template have the same lifecycle impact at
> initial load as it does when used as a method to update page elements
> later? I think that is my question!
>
>
> Chris
>
>
>
> On 10 September 2010 12:08, Tomas Lin <[hidden email]> wrote:
>> You need to re-subscribe events when you update your page elements.
>>
>> Check out .live() and LiveQuery plugin
>>
>> http://api.jquery.com/live/
>> http://plugins.jquery.com/project/livequery
>>
>> On Fri, Sep 10, 2010 at 11:56 AM, Chris Lamb
>> <[hidden email]> wrote:
>>> Hi,
>>>
>>> I am currently using jQuery to trigger functions based upon class
>>> attributes inside of my Views.
>>>
>>> While tidying the page up - I am moving the iterative sections of code
>>> into templates - I have discovered that if I build the section of html
>>> inside of the template - then it will no longer register with the
>>> jQuery functions.
>>>
>>> Viewing the code shows that the final html page is an exact match -
>>> however the events are lost in the instance constructed using
>>> templates.
>>>
>>> Does this suggest a document loading issue I shall need to be aware of
>>> whenever I use Ajax - be it with jQuery or whatever is next "thing" -
>>> if I use templates to render sections of the pages I output?
>>>
>>>
>>>
>>> --
>>> Chris
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe from this list, please visit:
>>>
>>>    http://xircles.codehaus.org/manage_email
>>>
>>>
>>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe from this list, please visit:
>>
>>    http://xircles.codehaus.org/manage_email
>>
>>
>>
>
>
>
> --
> Chris Lamb
> ------------------------------------------------------
> [hidden email]
>
> ---------------------------------------------------------------------
> To unsubscribe from this list, please visit:
>
>    http://xircles.codehaus.org/manage_email
>
>
>

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Template rendering and jQuery/DOM question

Chris Lamb
Hi Tomas - I have mocked up some code to try and show what I mean:

Assume this quaint bit of code:

 <g:javascript>
         $(function() {  
        $('.toggleProgs').click(function(){
        $(this).nextUntil("div.programme").next().toggle();      
        });  
        });
  </g:javascript>

If I do this inside of a gsp - I can click on the Programme title and
hide/reveal the div contents:

<g:each var="programme" in='${programmeList}'>        
<div class="programmeArea">
<span class="toggleProgs">Title: ${programme.title};</span>
<div id="prog_${programme.programmeid}" class="programme hidden">
 <g:each var="mocker" in="${programme.mockers}">
<span class="mock-list">
<g:link controller="foo" action="bar"
id="$mocker.mockid">${mocker.title}</g:link>
</span>
 </g:each>
</div>
</div>
 </g:each>

If I do this:

<g:each var="programme" in='${programmeList}'>        
<div class="programmeArea">
<span class="toggleProgs">Title: ${programme.title};</span>
<div id="prog_${programme.programmeid}" class="programme hidden">
<g:render template="programmeMockers" model="['mocker':
${programme.mockers}">Mockups</g:render>
</div>
</div>
 </g:each>

And move the exact, deleted lines into the template _programmeMockers

Then the jQuery on the toggleProgs no longer hides/reveals the div
contents. If I take the generated html code and diff it - there is no
difference at all - yet it behaves differently.

I think it is the fact that the code is the same which is throwing me
- the jQuery code is following the onReady behaviour everywhere else
in the code - but not here.

Is it something obvious I am missing!


Chris

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Template rendering and jQuery/DOM question

Chris Lamb
Tomas - 2 things - please excuse my code error - the render should be:

<g:render template="programmeMockers" model="[mocker:
programme.mockers]">Mockups</g:render>

And also - using the .live in the jQuery - I have the result I expect,
works fine.

Many thanks.



Chris




On 10 September 2010 13:44, Chris Lamb <[hidden email]> wrote:

> Hi Tomas - I have mocked up some code to try and show what I mean:
>
> Assume this quaint bit of code:
>
>  <g:javascript>
>         $(function() {
>                $('.toggleProgs').click(function(){
>                        $(this).nextUntil("div.programme").next().toggle();
>                });
>        });
>  </g:javascript>
>
> If I do this inside of a gsp - I can click on the Programme title and
> hide/reveal the div contents:
>
> <g:each var="programme" in='${programmeList}'>
> <div class="programmeArea">
> <span class="toggleProgs">Title: ${programme.title};</span>
> <div id="prog_${programme.programmeid}" class="programme hidden">
>  <g:each var="mocker" in="${programme.mockers}">
> <span class="mock-list">
> <g:link controller="foo" action="bar"
> id="$mocker.mockid">${mocker.title}</g:link>
> </span>
>  </g:each>
> </div>
> </div>
>  </g:each>
>
> If I do this:
>
> <g:each var="programme" in='${programmeList}'>
> <div class="programmeArea">
> <span class="toggleProgs">Title: ${programme.title};</span>
> <div id="prog_${programme.programmeid}" class="programme hidden">
> <g:render template="programmeMockers" model="['mocker':
> ${programme.mockers}">Mockups</g:render>
> </div>
> </div>
>  </g:each>
>
> And move the exact, deleted lines into the template _programmeMockers
>
> Then the jQuery on the toggleProgs no longer hides/reveals the div
> contents. If I take the generated html code and diff it - there is no
> difference at all - yet it behaves differently.
>
> I think it is the fact that the code is the same which is throwing me
> - the jQuery code is following the onReady behaviour everywhere else
> in the code - but not here.
>
> Is it something obvious I am missing!
>
>
> Chris
>



--
Chris Lamb
------------------------------------------------------
[hidden email]

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Loading...