When I use normal return this->render('create', ['model' => $model]) my pop-up window goes all haywire. When I change to return $this->renderAjax('create', ['model' => $model]); everything is magically in their correct places. I have looked around quite a bit to read about renderAjax() but there seem to be absolutely nothing out there. Can someone tell me what it does? I know ajax but from what I know it usually has nothing to do with css or bootstrap.
To know the difference between render() and renderAjax() first you need to understand how render() works.
Basically when render() is called every piece of JS and CSS code and file references registered with the view is gathered in several arrays to be rendered later on in proper places - these places are stored in the layout and their code is rendered by calling beginPage(), head(), beginBody(), endBody() and endPage().
You can point where the JS code should be rendered by setting the second parameter in related methods - like for example:
$this->registerJs("alert()", \yii\web\View::POS_HEAD);
renders
<script type="text/javascript">alert()</script>
in layout where the method $this->head() is.
Everything is working fine until you want to render only a main part of view without the layout. Without it (and its methods like beginPage()) the JS and CSS references cannot be rendered in the previous way and that is why this fancy jQuery code rotating the square does not work - JS library has not been included there.
When you are calling $this->render() from within the view or just calling $this->renderPartial() from the controller exactly this is happening - layout is not applied.
renderAjax() comes now to the rescue.
This method doesn't care about layout because it calls beginPage(), head(), beginBody(), endBody() and endPage() methods by itself. Thanks to this every JS piece of code can be attached to the rendered view and the jQuery library can rotate this square once again even when it needs to be done inside an AJAX popup.
render() public method
Renders a view.
The view to be rendered can be specified in one of the following formats:
path alias (e.g. "#app/views/site/index");
absolute path within application (e.g. "//site/index"): the view name starts with double slashes. The actual view file will be looked for under the view path of the application.
absolute path within current module (e.g. "/site/index"): the view name starts with a single slash. The actual view file will be looked for under the view path of the current module.
relative view (e.g. "index"): the view name does not start with # or /. The corresponding view file will be looked for under the view path of the view $context. If $context is not given, it will be looked for under the directory containing the view currently being rendered (i.e., this happens when rendering a view within another view).
renderAjax() public method
Renders a view in response to an AJAX request.
This method is similar to render() except that it will surround the view being rendered with the calls of beginPage(), head(), beginBody(), endBody() and endPage(). By doing so, the method is able to inject into the rendering result with JS/CSS scripts and files that are registered with the view.
renderAjax()
render()
Related
I am not sure if I am adding my JS assets correctly and would like some advice if I am not.
In octoberCMS I have created a custom formWidget that uses the Google Maps API.
I am using my formWidget inside a child form that is rendered via AJaX as a modal when required.
If I use the following code in my widget class:
public function loadAssets(){
$this->addJs("http://maps.googleapis.com/maps/api/js?key=myappkeyhere&libraries=places");
$this->addJs('js/geocomplete/jquery.geocomplete.min.js');
$this->addJs('js/addressinput.js');
$this->addCss('css/addressinput.css');
}
The JS loads with the Page load and not when the widget is rendered. This produces these issues:
The google-maps API returns an error saying it has been loaded multiple times.
Events tied to DOM elements in the child fail since the elements are not in the DOM until the form is called.
The workaround I am using is to embed my JS into the formWidget partial.
Is there a way to make the addJS method work for the formWidget when it is part of a child form?
After some investigation, I realised that my formWidget using the addJs() method would make the widget JS available globally to the entire page even before the formWidget existed or was even needed.
While I could have created an elaborate, fancy JS involving listeners for DOM insertions and blah blah blah, this was not ideal (mainly because the widget properties change based on implementation).
The quickest/safest way to include JS that is tightly bound to a complex formWidget is to include it in the partial. This ensures the form widget will work properly both in a standalone form and in situations where the widget is part of child form that is created via an Ajax load.
(If you know of a better way please let me know)
I have javascript files defined in the <head> of both my layout decorator template and my individual pages which are decorated. When I update a thymeleaf fragment in one of my pages the javascript defined in the head of the parent page no longer works. Is there a standard way to 'refresh' these js files?
Thanks.
Additional clarification :
I have a form submitted by an ajax call which updates a table in the page. I have a Jquery onClick function targeting a button in the updated table. The javascript doesn't seem able to bind to the returned elements in the updated part of the page. I select by element class and can see that the selection works prior to the partial fragment render.
For me it is unclear what you mean by
javascript defined in the head of the parent page no longer works.
The page is created on the server. Normally it contains urls of the javascript files
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
In this case 'refreshing' the javascript files can happen only in the client.
Check the html of the page in the client.
Are the tags as expected ?
Are there tags for all expected javascript files ?
With the browser tools (for example Google Chrom developer tools ) check that all script files are actually loaded.
If this doesnt help, it could be that the order of the script tags has changed between the first and second load. This could cause a different behaviour of the javascript executed in the browser.
EDIT :
With the initial load you bind javascript callbacks to dom elements.
You do this directly or through Jquery or other libraries.
When a new dom element is loaded, it has no callbacks bound to it, even if it has the same id as a replaced dom element.
So after the load you have to bind your callbacks again.
If you bound them 'by hand', just bind it again.
If you are using a JQuery plugin, that made the bindings, look into the code or documentation, many of them have a function for that or you can call initialization again.
Once you added new content to the DOM you need to bind again the new content.
Let's say I have a button with some class, the event in binded to the class:
<button class="someclass">Button 1</button>
<script>
var something = function() {
// do something
};
$(".someclass").on("click", something);
</script>
If I add more buttons from the same class to the DOM, they will have not have the click event binded. So once you load the new content via ajax, also remove all binding and add again (you need to remove or you will have buttons with 2 events).
$(".someclass").off("click");
$(".someclass").on("click" , something);
The page that I'm working with has a couple tabs and the content of each tab is loaded in via ajax by requesting a partial view from the controller. The problem is that the partial view uses knockoutjs, so it is bound to a view model. In this particular scenario, the page is loaded up in its entirety first time through, so all of the bindings work fine. When you switch tabs, it requests a partial view and replaces the tab content area with the new page. When you switch back to the first tab, it'll successfully loads the partial, except it would appear that all of the knockout bindings have been lost so there is a lot of missing data.
I can't place the viewmodel declaration and model bind in the partial because jquery hasn't been loaded by that point. Or so it would seem ($ is not defined).
The view model is declared and bound on the main page that calls the partial view(s), not the partial view itself, so I thought the model would still be available and bind successfully, but it does not. I know I'm doing this wrong, and partial view are super wonky when it comes to javscript so I'm hoping to steal a bit of insight from you guys.
Here's the basic setup:
If you are able to bind to specific non-overlapping areas of the page, then you could choose to call ko.applyBindings(someViewModel, someDomElement) like in this answer: Can you call ko.applyBindings to bind a partial view?
However, if you have an overall view model bound to the page and then "islands" of content that are loaded via a partial that you want to bind later, then one option would be to go for something like this: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html. So, you would set up a binding on the container of where your partial goes that tells Knockout to keep its hands off of that area. Then when you load the partial, you can safely call ko.applyBindings(someViewModel, innerContainer).
The binding might look like:
ko.bindingHandlers.stopBinding = {
init: function() {
return { controlsDescendantBindings: true };
}
};
and you would use it like:
<div id="outerContainer" data-bind="stopBinding: true">
<div id="innerContainer">
...load your partial here
</div>
</div>
Then, ko.applyBindings(someViewModel, document.getElementById("innerContainer"));
I use Ember.js (1.0. RC) and would like to apply Isotope.js's functionality to some of my views located in a "container".
So my route basically loads the models containing the needed data from a server, sets up the controller's content and binds it to the model's data, which works fine.
Next I declared a template for my IndexRoute which iterates over all the loaded items like this:
{{each item in this itemViewClass="App.ItemView"}}
The items are the images that should be filtered with isotope.js. ItemView only refers to a simple template for the time being.
The execution chain is the following: Route -> Fetching model data -> Set up controllers -> Create IndexView -> Pile up all the ItemViews in a DIV-container.
Now I need to check whether all the ItemViews are loaded and the rendering is finally finished to apply isotope.js's filtering functionality but I can't figure out how to do that.
The didInsertElement of the IndexView event fires as soon as it's been rendered and before the ItemViews were added to the DOM.
I already tried to set up a ContainerView which would work in conjunction with Ember.run.scheduleOnce("afterRender"...) if I didn't fetch the data through the models but hardcoded it to the content variable.
The CollectionView also did me no favor with this exercise.
Any ideas how to solve that misery? I'd really appreciate it. Thanks.
I am not sure how exactly isotope.js works..considering its just a jquery plugin, you can call isotope like this even if it is a ContainerView or CollectionView.
didInsertElement: function() {
Ember.run.next(this, function(){
this.$().isotope({}) // or watever code u want to write
});
}
This makes sure that the code inside ember.run runs once rendering is done completely..
I have a partial view that I have included on my _Layout.cshtml. It simply has a javascript function that changes an image based on the state of my system. I don't need to reload any data, I don't need to go to the code of the controller for anything, I simply need to reload that partial view.
I tried many of the examples that I found here but couldn't get any of them to work. I felt as if they were too complex for what I was doing anyway. Any guidance would be appreciated.
Thanks,
Steve
If the partial is loaded into the layout directly then there's no straightforward way to refresh it, because it's basically a part of the complete rendered page.
Your best bet is to render the partial using $.load or whatever equivalent you have available by hitting a controller method and rendering the result into a container (like a div). You would have to do this within a script that is loaded with the layout itself, by observing document.ready or something like that. Once you have that in place then it's trivial to keep reloading or refreshing the contents by hitting the controller method as many times as you need. For example in jQuery:
$(document).ready(function () {
RefreshPartial();
window.setInterval(RefreshPartial, 10000);
});
function RefreshPartial() {
$('#container').load('/some/controller/endpoint', {parameters});
}
This will call the controller method, and set the inner contents of the element identified with #container. You can call RefreshPartial as many times as you want.
Partial views only exist on the server. The only way to "refresh" the partial is to go back to the server to get it again.
Obviously, you must be doing something in the partial that needs refreshing. Whatever that is, should be callable from javascript to do the refresh.