I have a div which displays edit button on hover.
But I don't know how display a partial view representing an edit form in this div only instead of the show view.
I haven't no backbone or client-side js framework plugged in my sailsjs app, I didn't manage to understand how it works, not enough documentation about backbone or angular + sails for me.
Could you help me for rendering this partial view please ?
Thanks by advance,
Cyril
Sails uses ejs-locals in its view rendering code, so in your views you can do:
<%- partial ('foo.ejs') %>
to render a partial located at /views/foo.ejs. All of your locals will be sent to the partial automatically.
One thing to note: partials are rendered synchronously, so they will block Sails from serving more requests until they're done loading. We're considering replacing the code for loading partials to make it asynchronous, but for now it's something to keep in mind while developing your app, especially if you anticipate a large number of connections.
Related
If this isn't possible please let me know!
I'm hoping there's a solution to what I'm asking.
I need to move the Next/Prev buttons, located in the pagenavigation plugin to after the <jdoc:include type="component" />; Basically render it anywhere in my templates' index.php?
Is there any way to do this?
This is the code that renders the pagination:
<?php
if (!empty($this->item->pagination) && $this->item->pagination && $this->item->paginationposition && !$this->item->paginationrelative):
echo $this->item->pagination;
?>
<?php endif; ?>
As you can see the pagination is part of the item. As you can see if you look at the pagenavigation content plugin the pagination values are created in response to the onContentBeforeDisplay event. The plugin is hard coded to only work for articles in the single article view.
So to use it in a different component you would really need to create a second plugin for that component (or you could do any component or anything besides the single article view, that all would be easy to code using context).
To locate it in a different place in the single article view you would have to move the block of code to the desired location in the layout. Potentially you could also use css to locate the rendering of the block somewhere else on the page. (But more on this at the bottom.)
Unfortunately (but nor surprisingly given its name) onContentBeforeDisplay comes really late, in the view (unlike with pagination in the backend).
I always find it confusing because this frontend "pagination" property controlled by this plugin has nothing to do with backend pagination which is controlled by a JPagination object. I believe if is because of backward compatibility all the way to 1.0. ALso because the template chrome for pagination chrome are called pagination.php.
That leads me to the next thing I'll mention. You can make a file pagination.php and put it in the html folder of your template. You can see an example of this in the core template protostar. THat's where you would do the CSS or whatever other tricks you want to do to make the pagination do what you want. I think if you work hard enough at it (possibly using javascript or possibly calling that file from a module) you can pretty much achieve whatever you want.
I am trying to understand the architecture of Play Framework (internally how it works). In other framework like struts we can create index.html page and place in web folder with entry in web.xml file.
In Play the start point is main.scala.html page and all other pages inherited from it by placing all the content wrapped in
#main(title =""){
}
like index.scala.html page. But I couldn't find the place where main.scala.html page is registered to Play framework (no entry in routes file or other place?) or may be I am missing some points here.
So far from the play docs I understood that every scala.html page is basically a method call which sounds right to me.
So my goal is basically create other pages like main.scala.html page which will act as container for other sub pages and arrange my code in more modular way
Sorry if I am asking a dumb question.
Thanks in Advance
According to the Play docs main.scala.html is a layout - just common view which allows to inject HTML from other views and references to it by (content: Html) . main layout just wraps code that index view injected to it. (with optional arguments)
The opposite situation is usage of include or tag so just pointing the place where another view should be placed in the current view (also with optional arguments).
You don't need use them at all - Play doesn't enforce you to do that, you can use separate view (without layout) for each action.
On the other hand if some number of views should share same set of JS and/or CSS then layout(s) are native choice to do that job.
For an example instead of using main.scala.layout you can create ie. frontend.scala.html, backend.scala.html, guest.scala.html so your FE views will use #frontend(){ code...}, BE #backend(){ code... } etc.
You are unlimited in number of layouts/views/tags and other includes ;) All belongs to you. That's Play!
I'm trying to use a custom video player NPAPI plugin (view FireBreath) inside an tabbed ExtJS application. The plugin lives in one tab, and the others contain presentations of other non-video data.
When switching from tab to tab, the element that contains the plugin is destroyed, and all plugin state is lost. Is there any way to configure an ExtJS tabbed panel so that the html contained in it is not altered when switching to another tab (just hidden)? The alternative is to re-populate the plugin state when returning to the tab, but this would be associated with an unacceptable delay (mostly while waiting for video key frames).
Thanks,
O
I don't know about your ExtJS approach, if you can solve it on that side that would of course be preferrable.
However, if you can't, you can avoid the reinitialization by moving the stream handling to a helper application that is running in the background. The plugin would launch it as needed and receive the stream data from it after registering for it.
The helper would be told when to kill a stream and possibly kill it by itself after some timeout (to avoid session leaks in case of crashing plugins etc.).
I was about to consider a helper application as recommended above, or look into rewriting the plugin to be windowless. Both might be more robust solutions for other JS frameworks.
Fortunately, the solution ended up being simpler than this, at least for ExtJS. By default, ExtJS sets "display: none" on the tabbed view's div whenever it is undisplayed, which calls the plugin destructor. After doing a little more looking through their enormous API, ExtJS has a parameter hideMode as part of the Ext.panel.Panel base class:
'display' : The Component will be hidden using the display: none style.
'visibility' : The Component will be hidden using the visibility: hidden style.
'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.
Defaults to: "display"
Setting the parent Panel that contains the plugin to hideMode: 'offsets' fixed the problem perfectly.
I`m using asp.net mvc 2.0 and trying to create reusable web site parts, that can be added at any page dynamically.
The problem I have is how to load a partial view with all related js and data? Ive tried the following ways to do that:
Use partial view and put all the js into it. In main view use render partial. But to initialize partial view I need to add model to current action method model to be able to make RenderPartial("MyPartialView", Model.PartialViewModel).
Also I do not have a place to put additional data I need to fill my form(like drop down lists values, some predefined values etc).
Use RenderAction, but it seems it have same problems as RenderPartial, except for I do not need to add anything to any other model.
Any other oprions are greatly appreciated.
As I understand it, RenderAction performs the full pipeline on the action, then renders the result - so what is rendered is the same as what you'd see if you'd browsed to the action.
I've used RenderAction to render 'widgets' throughout a site, but in my view they should be independent of the page rendering them, otherwise they're not really widgets and should be part of the rendering page's code instead. For instance, if there's a log in form, you will always take the user to a page that can process the information, no matter what page they are currently on, so this makes for a good widget. Other ways I've used it is to show a shopping basket or advertising. Neither of which are dependent on the page being shown.
Hope this helps a little!
I'm new to GWT, and I'm sure this is answered in SO somewhere but I've yet to find
I downloaded the GWT 2.0 eclipse plugin, and was pleased to see it comes with a starter project.
However, I was surprised that when running it, there is an unpleasent flickering...
The text loads without the CSS first
It takes a while untill the select box apears
(If you don't see the flicker, try and press F5 to refresh)
All mature GWT apps seem to have a loader before that but I didn't find an easy, standard way to add it.
It seems this app loads in this order: (correct me please if I mixed it up, its only my guess)
Basic layout HTML,
All JavaScript, and CSS
Runs the logic on the "onload" event (soonest time your compiled javaScript can start - ?)
So I can't programmatically add a loading spinner before GWT was loaded, a bit of a catch 22 for me
Am I missing something basic? is there a best practice way to add that initial spinner?
I was thinking simply adding a div with an animated gif, and in the onload event - hide it.
But I'm sure there is something better.
Let me know if this is a duplicate question
Update: found this related question, not answering mine though...
I've handled this problem before by not using the GWT module to load CSS, but loading it directly in the tag itself. If you do this, the browser will always load the CSS first, even before the GWT JS is loaded.
This means you'll lose a bit of flexibility and speed, but its the only workaround I've used so far.
EDIT: Extra info cause I want the bounty :D
If you do not remove the
<inherits name='com.google.gwt.user.theme.standard.Standard'/> from your module.gwt.xml file, then the GWT standard theme is loaded in the JS file that GWT creates. This JS file loads after the HTML page renders, and injects the CSS after load. Hence the flicker.
To avoid the flicker, you can comment out that line and insert your own stylesheet into the <head> of your HTML file. This ensures your CSS loads before the HTML renders, avoiding any flicker. If you really want the GWT theme, you get it out of the source code.
To use a spinner with GWT is quite easy. One simple way would be to keep it in a div with an id in the HTML file itself. Then, in the onModuleLoad(), simply hide that div by calling RootPanel.get("spinner").setVisible(false);
That should show the spinner till GWT loads itself.
Here's what we do to implement a spinner.
You put something like the following HTML just below the script line that loads your application (ie. the one with nocache.js). e.g.:
<div id="loading">
<div id="loading-msg">
<img src="icons/loading-page.gif" lt="loading">
<span>Loading the application, please wait...</span>
</div>
</div>
Then in your application EntryPoint you reach into the page using the DOM and remove that div. e.g.
final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
DOM.removeChild(RootPanel.getBodyElement(),
loading.getElement());
}
Ehrann: I'm afraid the practice mentioned in the above answers is the only way for now. GWT doesn't provide similar features to show/hide a "loading" frame "on the fly". I guess one of the reason is that this requirement is not so "common" for all GWT users, one person might want a very different style of the "loading" than others. So you have to do that by yourself.
You can have a look at the GXT showcase page (based on GWT too): http://www.extjs.com/explorer/ for how they do that. For the source of it, download Ext GWT 2.1.0 SDK here: http://www.extjs.com/products/gxt/download.php and check the samples/explorer folder after extracting it. For details see the edit below:
EDIT
Check the source code for http://www.extjs.com/examples/explorer.html and you can see a div with id "loading". For each samples (extending Viewport), GXT.hideLoadingPanel(loadingPanelId) is called in onAttach() (the initialization), which hides the loading frame.
Check source code of Viewport here
Check source code of GXT.hideLoadingPanel here
You can do it in a similar way.
You could put an HTML loading message in the host page (use style attributes or embed the style tag in the header to make sure that it's styled), and remove the message once your modules has loaded, e. g. Document.get().getBody() with .setInnerHTML("") or .removeChild(), and then present your application programmatically however you want.