I am creating a hierarchical list with expandable/ collapsible list items. When a user clicks on a list item to expand it a table pops up with some info. Right now, grails is rendering all of the tables when the page is loaded. However, I only want the tables to be loaded when the list item is clicked. I am using partial templates to house the table html and using
<g:render>
To render them. Is there a way to convert the code I am going to post so that the div with class="list" to only load on click? If not, is there a way to call the g:render tag only on click?
<g:each in="${group2List}" var="item">
<li class="liClosed"><b>
${item}
</b> <%= Application.findAllWhere((group2): item, (group1): group).size() %>
<ul>
<div class="list">
<table id="portfolio">
<g:render template="tableHeader" />
<g:render template="applicationRow"
collection="${Application.findAllWhere((group2): item, (group1): group)}"
var="applicationInstance" />
</table>
</div>
</ul></li>
<br />
</g:each>
So, Is there a way to add an onClick event for the li that renders that div class="list" only on click? Or a way to call those g:renders onClick while keeping them inside the ul.
Thanks for any help!
Like #sudhir commented above, you can't load server-side content into client-side content. The grails tags are rendered once the page is loaded. But you can use ajax to load the data in the server and render a partial template with the new data in it. That's exactly what you need. You can check out this link that may fit your needs.
Related
I have a nested HTML page as:
<html>
<body>
<div class="container">
<nav class="item_list">...</nav>
<article id="item_details">
<object type="text/html" data="detailsPage?key=document1">
<html>...</html>
</object>
</article>
</div>
</body>
</html>
Inside the main div (class="container") there's a item list on the left (nav class="item_list"). On the right side, it is an article with id item_details. Inside the article, it is a nested html page which shows the details of a selected item. In the nested html page, there's a form to add new item or delete an existing item. This action needs to refresh the nav part.
So my question is - how to refresh the nav part in response of a button click from the nested HTML page? More specifically, I'm using Vert.x as my server application toolkit, it the resolution is by Vert.X, it will be much more helpful.
Thanks in advance.
refresh the nav part in response of a button click from the nested HTML page?
Attach a button click listener as a javascript function
In that function make a request to your vert.x backend with the appropriate data
Return the new nav response you want from your vert.x backend
Use that data in javascript to refresh the nav part
Ps This has nothing to do with vert.x and is regular webapp design patterns
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
So, my boss has this crazy idea - the whole website working on one single page. So far - still ok, but here's the thing:
- the different pages have different divs with content (like usual), and when some div is clicked (or link in it) some of the divs expand/collapse, working in the way of revealing different content. That's fine, but...
he doesn't want to use JavaScript or anything for dynamic view of the website ('cuz I am leaving in 2 weeks and him and the other employee are not capable of JS, thus cannot improve/maintain if needed)
his idea is to have the HTML code, for all the pages variations of the website, stored in the database, and upon clicking some link - reloading the page with the certain HTML. So not different .html files for every page, but only one for all of them.
The problem is that it works for the first page that I load, initially, but then when I call another page, it gets twisted, since I call the function, that retrieves the HTML, but the other call of the previously loaded page is still there, so it calls again. Here's sample, so you understand:
<script runat="server" type="text/C#">
public string getPage(string name)
{
string page = "null";
switch (name)
{
case "media":
page = getMediaPage(); <!-- just function from the code-behind that retrieves the html code from the DB and passes it to the page -->
break;
case "home":
page = getHomePage(); <!-- just function from the code-behind that retrieves the html code from the DB and passes it to the page -->
break;
}
return page;
}
</script>
</head>
<body onload="addEvents();">
<form id="form1" runat="server">
<div id="parent">
<div id="presentation">
SomeCompany ApS Street3 | CITY | INFO#Comapny.com TLF: 999999
</div>
<%=getPage("home") %>
</div>
</form>
So that's how the initial page will be and then just in the parent div I will call the HTML for the other pages. One example of HTML, stored in the DB:
<div id="mainmenu">
<b>HOME</b>
<br />
PRODUCTS
<br />
SUPPORT
<br />
CONTACT
<br />
ABOUT
<br />
</div>
<div id="logo">
</div>
So I call this chunk of code slam it in the page. The twist happens as I have <a href="<%=getPage("media")%>"> clicked, so it loads the page normally, but there is <%=getPage("home") %> standing statically in the page, ALL THE TIME, as I need to start from somewhere, and it attempts to load the previous page again, and... server error.
I know it's kinda stupid idea, but I can't argue with him anymore.
So my question is - is there way of handling all this with some kind of OnClick(Event e) or some other way out, with calling different functions (as I already started).
Or I should just tell the boss that it's not gonna work this way...
As stated, this isn't a great idea, but you could get it to work by using some Web Controls.
Where you have <%=getPage("home") %> in your page, change this to:
<asp:literal id="ltlContent" runat="server" />
On Page_Load call:
ltlContent.Text = getPage("home");
Any links on your page which should load other content, change these to LinkButton controls, and their click events could have:
<asp:LinkButton id="linkMedia" runat="server" onclick="LoadContent" CommandArgument="media" />
public void LoadContent(object sender, EventArgs e){
ltlContent.Text = getPage(e.CommandArgument);
}
you could try the parameters on the get url.
add them on your link "?page=media"
and then you parse the url when you arrive $_GET["page"]
I am using a cms which has a page where new content is added via ajax.
So the content is constantly updating but there are no page refreshes.
This is typically the html for each piece of content which gets added.
<li class="row-1" style="display: block;">
<div class="content">
Body text for content 1
</div>
</li>
As more content gets added the html will look like
<li class="row-2" style="display: block;">
<div class="content">
Example text for content 2
</div>
</li>
<li class="row3" style="display: block;">
<div class="content">
some more example text for content 3
</div>
</li>
etc
On my page load I have jquery being executed for the content which is already existing.
What I would like is jquery to be executed for each new content as it gets loaded on to the page.
Would I create the jquery individually for each item, then load the jquery when each item gets added to the page.
Or would I create a jquery function which detects when new content is added?
For now to begin with I would just like to alert when new content gets added so I can see how it is done?
Thank you for reading and any help provided.
Check answer to this SO question that could be a solution to bind the event on successful ajax load.
This might be the way you want to go for your website.
So what you can do is load the jquery with the elements itself and bind events to these elements.
My application is using JQTouch. The demos show how to GET an html file and display it in the user interface, but I'm loading JSON that I would like to use in a pre-existing DIV. I don't want to create a separate people.html and generate that on the server.
So I have a DIV like this that I would like to load my list of people into the UL.
<div id="people">
<div class="toolbar">
<h1>People</h1>
Back
</div>
<ul class="rounded">
<li class="sep">F</li>
<li>Flintstone, <em>Fred</em></li>
<li>Flintstone, <em>Pebble</em></li>
<li>Flintstone, <em>Wilma</em></li>
<li class="sep">J</li>
<li>Jetson, <em>Elroy</em></li>
<li>Jetson, <em>George</em></li>
<li>Jetson, <em>Jane</em></li>
<li>Jetson, <em>Judy</em></li>
</ul>
</div>
This page is loaded from the start of my application with code that looks like this (it's all in the same HTML page):
..snip..
<li class="arrow">View all</li>
..snip..
What do I need to do to call my people.aspx service which returns JSON? I think I need to use $.getJSON, create a UL from the JSON, and then call something in jqtouch to transition to my people application page (div).
I think you use the goTo function, e.g.
jQT.goTo("#people")
There's a jsfiddle demo here, but it doesn't test the jqTouch functionality.