How to Call LOAD inside jquery

[Ron Chatterjee]

       <div class="one" id="a">Click to read more</div>

      

      <div class="two" id="b">

          {{=LOAD('default','thread.load',args=[threads[i].id, threads[i].name],client_side=True)}}</p>

       </div>

<script>

jQuery(document).ready(function(){

jQuery('.one').click(function(){jQuery('.two').slideToggle()});

});

</script>

Without having to change the layout or using two redirect, I was hoping to combine two pages into one. But calling the LOAD inside the jquery ( Gives me bunch of loading shows up in the menu as in the attached picture). Any help how to inside the load inside the jquery ? Thanks in advance.

http://www.web2py.com/books/default/chapter/29/11/jquery-and-ajax?search=onload

[Anthony]

LOAD() is a Python helper, so it cannot be called via Javascript in the browser. However, you can load/refresh a component via Javascript using $.web2py.component(url, target) (the LOAD() helper simply creates the target div and adds a data attribute that tells web2py.js to call $.web2py.component).

Anthony

[Ron Chatterjee]

Can you please send me a link to an example where its applied so I get to learn from it? Or an example where two views are combined into one?

[Anthony]

I don't think it's in the book. You might find some relevant examples here: https://groups.google.com/forum/#!searchin/web2py/$24.web2py.component.

Anthony

[Ron Chatterjee]

If you look at my code though, I am not calling the LOAD inside the jquery (like you are saying calling LOAD from javascript).  I am calling LOAD outside. All the jquery does it fold or fold back that div element. So why component?

[Anthony]

On Thursday, June 23, 2016 at 11:00:42 AM UTC-4, Ron Chatterjee wrote:

If you look at my code though, I am not calling the LOAD inside the jquery (like you are saying calling LOAD from javascript).  I am calling LOAD outside. All the jquery does it fold or fold back that div element. So why component?

You said you wanted to call LOAD from jQuery.

Anyway, hard to say what the problem is without seeing the code. Make sure your .load view doesn't extend the layout.

Anthony

[Ron Chatterjee]

Funny, you said it that way.  That was the problem. I forgot to take the layout off.  It works fine now. Since you are so good at it.... lol. one problem I still have. When I toggle the link, if I have the thread in a loop. All the links open up. How to modify that javascript so only the request.args(0), I am requesting fold open that div element and every other one remain close. I explained that in a picture (attached).

[Anthony]

You could add a data-* attribute to each pair of divs to identify the specific div that needs to be toggled:

<div class="one" data-id="{{=i}}">Click to read more</div>

<div class="two" data-id="{{=i}}">
  {{=LOAD('default', 'thread.load', args=[threads[i].id, threads[i].name], client_side=True)}}

</div>

<script>
jQuery(document).ready(function(){
  jQuery('.one').click(function() {

    var id = $(this).data('id');
    jQuery('.two[data-id="' + id + '"]').slideToggle()
  });
});
</script>

Or you could wrap both divs in a parent div, give that div an id, and then use that to identify the div to be toggled.

Anthony

[Ron Chatterjee]

You rock Anthony! Thank you.