Div Content Reload Off A Link Click - Can U Provide Example?

37 views
Skip to first unread message

Gianna Giavelli

unread,
Feb 18, 2015, 3:20:53 PM2/18/15
to acti...@googlegroups.com
I wanted to post this since this is a very common scenario people will run into. It might already be somewhere in KitchenSink...

I have a basic page with a footer. And the footer has a "info" link which should reload the content div of the main page with that part which is in an external .html or .ftl file "info.html"

I can use Jquery to have the click perform the load, but then it fails because it wants a controller.  I wasn't sure that adding a new method to my controller and a render is the right way? or is there a simpler way to dynamically load a piece of html if I excluded the path from the controllers.

I think there are multiple ways, what's the easist?  Do I add a new @get method to my controller and use render to return the partial? 

<body>
<div id="mycontent">
some stuff
</div>
<div id="footer">
  <a id="loadinfo" href=" ??? ">Show Info A</a>
  <a id="loadinfo" href=" ??? ">Show Info B</a>
  <a id="loadinfo" href=" ??? ">Show Info C</a>
</div>
</body>
















Igor Polevoy

unread,
Feb 18, 2015, 9:17:43 PM2/18/15
to acti...@googlegroups.com
Gianna, not sure I fully understand your question, but will try to respond. 

If you want to replace a chunk of content on the page with some remote content, you can use LinkTo tag for that: 
The working example can be found in KitchenSink (your guess is correct :)):


So, the code: 

<@link_to controller="unobtrusive" action="do-get" form="form1" destination="result1">Ajax Get</@>

means in English:

Execute UnobtrusiveController.doGet() method, submit contents of "form1" in the request and whatever is returned, stick into element with ID "result1". 

Since you want to replace just some static content, you can do it in so many ways:

1. You can use JQuery Ajax and simply pull some static html files from server - this way you do not need to use controllers  - and then stick content into appropriate element. 
2. You can have all static content embedded on the page but not visible until some links are clicked

I think I would prefer #2, since it will be the fastest to work and fastest to implement. 

tx

Gianna Giavelli

unread,
Feb 19, 2015, 2:42:23 AM2/19/15
to acti...@googlegroups.com
OK, I got it working. 

Here is my Jquery. I TRIED link_to but the problem I had is although it fetched the Ajax data perfectly from the controller function, it reloaded the page for some reason. 

<@link_to controller="home2" action="companyInfo" destination="replaceMeFrame">Company Info</@>
So instead... for now:

<script type="text/javascript" language="javascript">
   
     $(document).ready(function() 
     {
        $("#loadcompany").click(function(event)
        {
           $.ajax({
    type: 'GET',
    url       :  '../htmlsnippets/companyinfo.html',        
      success: function(result){
         $('#replaceMeFrame').replaceWith(result);
      }   });   });//loadcompany.click
        

Gianna Giavelli

unread,
Feb 19, 2015, 2:45:22 AM2/19/15
to acti...@googlegroups.com
just to be specific, when I clicked on the link_to link, it reloaded the page showing only the loaded data (not a full page). My page may be too complex or something for the selector to hit I'm not sure. 


On Wednesday, February 18, 2015 at 2:20:53 PM UTC-6, Gianna Giavelli wrote:

Igor Polevoy

unread,
Feb 19, 2015, 10:28:43 AM2/19/15
to acti...@googlegroups.com
You might want  to run KitchenSink to see how it works. All JS code is here:

Unless you have this file in your app, it will not work. However if you do not have this file, and write logic in your pages, that is fine too. 

tx

Gianna Giavelli

unread,
Mar 3, 2015, 12:50:59 AM3/3/15
to acti...@googlegroups.com
Ahh ok. It's a gap in the documentation then I would say. Please try to update next to the link_to section. Even better, maybe add it to core .js stuffs as a function.

Igor Polevoy

unread,
Mar 3, 2015, 12:33:16 PM3/3/15
to acti...@googlegroups.com
Gianna, what do you mean  by " Even better, maybe add it to core .js stuffs as a function." ? 

Gianna Giavelli

unread,
Apr 2, 2015, 4:18:18 AM4/2/15
to acti...@googlegroups.com
Sorry I can't remember. I think just update the documentation is fine. On  the View page just  say  "be sure to load aw.js" 

Views
Views in ActiveWeb are also called templates. They are located in the following directory:
src/main/webapp/WEB-INF/views
No JSPs
ActiveWeb does not use JSPs. The main reason for not using JSPs is thir inability to test generated HTML with JSPs in a test environment. For more on testing, see ... Generating views in tests.
Load the ActiveWeb javascript  aw.js   into your page
Some view functions like link_to require that you have the aw.js script loaded.  Simply place the aw.js file in your webapp/js directory and add loading it to your page header    <script src="../js/aw.js"></script>
 
 
 
Igor Polevoy
unread,
Apr 2, 2015, 12:03:36 PM4/2/15
to acti...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages