I am trying out Playframework with Polymer as a GUI tool. As a JSF developer, I am not really used to developing these ajax codes.
For now, I have this situation in my main.scala.html:
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar>Painel Administrativo</core-toolbar>
<nav>
<core-menu selected="0">
<paper-item noink>
<a href="#routes.ProjetoController.listar()">
<core-icon icon="settings"></core-icon> Projetos
</a>
</paper-item>
<paper-item noink>
<a href="#routes.TipoProjetoController.listar()">
<core-icon icon="settings"></core-icon>Tipos de Projetos
</a>
</paper-item>
</core-menu>
</nav>
</core-header-panel>
<div tool></div>
<div fit>#content</div>
</core-scaffold>
Question is: Is there a way of calling the routes I have into the paper-item elements and partially render it into #content ?? If so, how could I achieve this one page style behavior, without the page resfresh?
PS.: these are not static content.
ProjetoController.listar() should render projeto_listar.scala.html and TipoProjetoController.listar() should render tipoProjeto_listar.scala.html. Those are 2 different dynamic pages which implments main:
#()
#main("Page Title") {
}
Take a look at Page.JS, you can make all the routes in the single page format.
Related
I have a tumblr blog embedded into my website (iframe) and want all clicks to open in a new tab to land on the post detail url (e.g. https://diestadtgaertner.tumblr.com/post/657405245299818496). I already adapted the template to get this working for most post types by exchanging the respective href variable with "https://diestadtgaertner.tumblr.com/post/{PostID}" and add target="_blank". However, I can't get this to work for the pictureset. Does anyone know how this might work?
Help would be greatly appreciated!
Thanks & best,
Torge
You can edit your template so the photoset gets output into a normal div (I think the default is to load photosets inside an iframe themselves, which could be causing you issues.
This is the block from my tumblr template:
<ul>
...
{block:Photoset}
<li class="post photoset">
{block:Photos}
<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}
<img src="{PhotoURL-HighRes}" class="highres" />
{/block:HighRes}
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
<p>
<span class="icon-link ion-ios-infinite-outline"></span>
{block:Date}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}{/block:Date}
</p>
</li>
{/block:Photoset}
</ul>
In any case you could wrap the entire block in the Permalink href. Something like:
<ul>
...
{block:Photoset}
<li class="post photoset">
<a href="{Permalink}"> // this permalink href now wraps the entire content of the post.
{block:Photos}
<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />
{block:HighRes}
<img src="{PhotoURL-HighRes}" class="highres" />
{/block:HighRes}
{/block:Photos}
{block:Caption}
<div class="description">{Caption}</div>
{/block:Caption}
</a>
</li>
{/block:Photoset}
</ul>
The issue now is that the default click links for the images inside this post (if they exist) will no longer function normally.
It is difficult to test this without the link to your site, but I think updating your tumblr template first should hopefully give you the result you are after, but of course I would recommend a backing up your code.
I'm sure this question has already been asked but don't know how to phrase it correctly. I want to do something like that:
MyView.cshtml:
<partial name="_MyPartial">
<span>some content</div>
</partial>
_MyPartial.cshtml:
<div class="partial">
#RenderInnerHtml()
</div>
and the result is:
<div class="partial">
<span>some content</div>
</div>
Is it possible? If not with Partial Views, then with View Components perhaps?
Each tab is a view and each view is loaded and active. When the user closes the tab by clicking on the [x] the view is then destroy and removed. Also, a single view can be loaded multiple times with a different variable, or id. Think multiple documents of the same type.
Views are created by going to a specific route.
This can be done by creating your own viewmodel, adding a collection of views, then adding components as the child views, but this ignores browser history.
After reading it seems the only way to accomplish this is to create your own router. Although I am not new to Aurelia, I am not confident enough to create my own router.
The question is how do you maintain browser history and have multiple active views.
With the help of "Patrick Walters #PWKad" on gitter I was able to put together a proof of concept.
I have the example uploaded to github. Here is the link. https://github.com/BringerOD/AureliaMultiTabExample
The idea is to create routes in your app.js that will handle all of the tabs you will be creating. All of the routes need to point to one viewmodel that will host, compose, and manage them.
You can add more routes or wildcards as you need them. Also if your tabs are complex you could create a hash for a parameter.
I have not figured out how to remove an item from the browser history yet.
Hope this helps someone doing the same thing.
export class App {
configureRouter(config, router) {
config.map([
{ route: ['', 'shell/:section/:viewmodel/:id'], name: 'shell', moduleId: 'shell', nav: false, title: 'shell' }
]);
this.router = router;
}
}
The shell page would then display the tabs and compose the views.
<template>
</ul>
<div class="container-fluid">
<div class="row">
<ul class="nav nav-tabs">
<li repeat.for="workspace of controller.workSpaces" class="${workspace.isActive ? 'active' : ''}" role="presentation">
<a href.bind="workspace.href">
<button class="close" type="button">×</button> ${workspace.viewModel} </a>
</li>
</ul>
<div class="container-fluid" repeat.for="workspace of controller.workSpaces">
<div show.bind="workspace.isActive" class="container-fluid">
<compose containerless view-model="./views/${workspace.section}/${workspace.viewModel}" model.bind="workspace" />
</div>
</div>
</div>
</div>
</template>
Building a jQuery Mobile app in DreamweaverCS6. Have a an ul with multiple links calling html pages each hold a quiz. The "quiz" page is a jqm page with a javascript file doing all the work of the quiz. Everything works fine, but when you click on the li quiz button to load the page it takes a little while to load and the ajax loading spinner is not showing up. This is a problem because you don't know if the app has frozen or not. Any thoughts on how to force the spinner to show while loading the page?
<div data-role="content">
<ul data-role="listview">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
You can use the
$.mobile.showPageLoadingMsg();
and
$.mobile.hidePageLoadingMsg();
You can refer http://jquerymobile.com/demos/1.2.1/docs/config/loadingMessageTextVisible.html for proper usage.
You can reduce the page loading speed by actually writing the contents of each pages in particular div tags like :
<div data-role="page" id="quiz1">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
You can load this page as :
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
</ul>
This will greatly reduce the page loading time and speed up your app.
The way you have your code, those links will do a full refresh, abd not showing the jqm spinner.
What you can do is change a page programatically, which uses the jqm spinner for transitioning pages. More info http://jquerymobile.com/demos/1.2.1/docs/api/methods.html - changePage ($.mobile.changePage())
The idea is to have yours as follows:
<li><a class="quiz1">Quiz 1<a><li>
<script>
$(document).on('pageinit', '.quiz1', function() {
$.mobile.changePage('quiz1.html');
});
</script>
hope you get the idea...
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>