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
Related
I am having an issue where I believe Angular2 is interfering with how it handles normal anchor tags in HTML. I have several links within the page under "Content2" with attempts in referencing sections of that page.
<div id="navigation">
<a [routerLink]="['#section01']" fragment="section01" style=background:magenta>Section 1</a><br/>
<a [routerLink]="['#section02']" fragment="section02" style=background:cyan>Section 2</a><br/>
<a href="#section03" style=background:yellow>section 3</a><br/>
<a href="#section04" style=background:red>section 4</a><br/>
<a [routerLink]="['/content02']" fragment="section05" style=background:green>Section 5</a><br/>
</div>
My goal is to allow the navigation bar to serve as a navigation tool that sits outside of the HTML I am trying to call, but is still able to directly link sections within the HTML, in this case to Content2.
Here's the Plunker to my predicament:
https://next.plnkr.co/edit/MFtSgY0e57nAG6D5
I have even tried to reference the HTML with a direct routerLink from the navigation bar but it will not comply. I'm sure I am missing something very fundamental to Angular2 routing. Or perhaps I'm missing how the routes should have been structured in the first place.
In my index.html I have a sidebar that needs to be displayed only for certain views and not for all. So this sidebar is inside index.html and below it is the ng-view div. Also a global controller is associated with the body tag.
<body ng-controller='init'>
<div class='sidebar' ng-show='sidedisplay'>
</div>
<div ng-view=''></div>
</body>
Inside my init controller by default I have : $scope.sidedisplay = false; console.log('Here');
Now when I run the project, the html loads and I see the sidebar and then after some 4-5 seconds i get here in the console log and the sidebar disappears. Why is the controller loading so much later than the HTML?? How can i rectify this?
You probably want to make use of ng-cloak.
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?
Hello!!
i have a question and i haven't found any solution for it anywhere...
So, I have a button that link to internal div page (#page2) with a very long list, I need that the internal div page will be "loaded" before the transition will start...
Here is a very simple Sample Code:
<!-- Page #1 -->
<!-- ... -->
<div data-role="content">
<p>View internal page: goto Page 2</p>
</div>
<!-- ... -->
<!-- Start of Page #2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<ul><li>...</li>
<li>...</li>
<!-- About 300+ of: <li>...</li> -->
</ul>
</div>
So, Clicking over The link to #page2 should give you jquery mobile "Loading..." And after it "loaded" the content the transition should begin..
The reason Im doing it in the same page it that im inserting to the page#2 div dynamically all facebook friends (Long list), and it take a long time from the Click and until the transition begin...
Here is a nice example of what i need:
http://www.mpdtunes.com
Just go to: Live Demo-> Login -> Click Artists...
Any suggestions are welcome!
Thank you very much!!!!
Basically you want to do this:
Use button like this:
goto Page 2
Add a click event to it:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#to-page2', function(){
// Load internal page content
});
});
Where #index is an id of your button containing page.
Show loading animation aka ajax loader
setTimeout(function(){
$.mobile.loading('show');
},1);
SetTimeout is needed because web-kit browsers have a problem with dynamically triggered ajax loader.
Load your internal page content. Now if you are using 1 HTML page with multiple pages you can append new content to listview immediately. This is because listview is already loaded into the DOM. If you are using several HTML pages then store your page content into localstorage variable.
Hide ajax loader, again with setTimeout.
Start page transition with:
$.mobile.changePage("#page2");
If you have 1 HTML page then this is it. If you have stored your page content inside a localstorage then you will need to load it during the pagebeforeshow event of a second page, like this:
$(document).on('pagebeforeshow', '#page2', function(){
// Load internal page content from local-storage and append it
});
Last step is listview page content initialization. For that look at my other answer, just look for a topic regarding listview.
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.