I am dynamically loading content into my modals, and often it will be a page that is already a normally accessible page on my site.
So I want to be able to reuse that controller/action and load it into my modal but obviously the controller already uses a layout. So when I load the page into my modal, the header and footer of my site is all in the modal again, which I don't want.
One solution I thought of that might work, but seems like a dirty workaround, is to have in my Appcontroller a check for a URL parameter that says it is a modal call for the page (not a regular call). It then overrides the layout with a special modal one.
//app_controller.php
public function beforeRender() {
if (isset($this->params['passed']['_modal'])) {
$this->layout = 'modal';
}
}
// In my jQuery call to open the modal:
myModal.load('users/view/5/_modal').dialog('open');
Then in the modal.ctp layout I would include a stylesheet that looks something like:
// modal_layout.css
#import url("normal_layout.css");
.header, .footer {display:none;}
So I don't have to redefine all of my normal layout's CSS but I can just hide the parts I don't want to show.
This seems like a bit of a stupid method of doing it, and I don't know if it even works, but surely someone has had to do this before with CakePHP, so what would you guys suggest?
if ($this->request->is('ajax')) {
$this->layout = 'ajax';
}
Now you can configure your Layout/ajax.ctp as you want.
You could create an element.
$('#myModal').load("<?=url('users/view/5/_modal')?>", {type:'post'}, function(){
$('#myModal').dialog({title:'open',autoOpen:false, modal:false, height:600, width:700});
$('#myModal').dialog('open');
});
function view($my_customer_id, action) {
//do stuff here
$this->render(DS.'elements'.DS.'users'.DS.'modal');
}
use RequestHandler to detect ajax request. Put this line at the end of your action:
if ($this->RequestHandler->isAjax())$this->render('view_name','ajax');
It turned out I didn't need to anything so complex. I simply created a hidden div in my layout:
<div id="modal"></div>
And then in my layout's existing CSS I added certain rules to hide elements I don't want to see when a page is loaded in a modal:
#header, #footer {display:none;}
That way I can load a page into the modal but it still has all the normal styling that is already defined in the layout's CSS. Pages are loaded into the modal by using their normal CakePHP URL:
$('#modal').load('controller/action/param:whatever').dialog('open');
If you want the content of your modal dialog box to be simply the content of the view of an action you simply need to add the following a the top of the controller's action:
$this->layout = null;
This will disable the layout and all output the content{html} of the view
Related
I have a collapsible sidebar navigation, and any time users click a link on it, I have the sidebar hide automatically. I achieve this in the run method by using the following code:
app.run(function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function () {
$rootScope.closeNavigation();
})
});
Where app is my Angularjs module.
The problem is that it gets a little unintuitive to use, when you click a link in the navigation for the page you're already on, and then nothing happens. What I would like is to have the sidebar close anyway, so that the users still get focus on the content, even if it's the same content.
But Angularjs doesn't execute the $routeChangeSucess event, if there is no route change happening. So what can I use instead?
You simply need to use ng-show = isPanelVisible and ng-click = closePanel() on the html sidepanel tag (e.g. a <div>).
Then, define $scope.closePanel() in the controller associated to the actual view. For instance
$scope.closePanel = function() {
$scope.isPanelVisible = false;
}
See an example here. Code is here. Note that it doesn't use ng-show, but the behaviour is the same.
I need to display or load a HTML page within another HTML page on a button click.I need this in a popup with the main html page as the background..pls can any tell me proper suggestions.
Take a look at the Facebox jQuery plugin. It does pretty much exactly what you're asking for. For example you can have a link like this to some remote page like so
text
then just call the facebox plugin when your content is loaded like so
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
});
and your content will render in a modal window. You can also take a look at Fancybox or ThickBox which provide very similar functionality.
try using windows.open() function.
for Example
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = "https://www.linkedin.com/cws/share?mini=true&url=" + location.href;
var win = window.open(URL, "_blank", strWindowFeatures);
I am wondering why if i use jquery $.load function or some pluging such as fancybox to load content dynamically on the site, the layoug is not loaded but only the view as if it were an element.
My $.load() calls a controller action as if it was a normal link, like:
$('#demo').load("http://"+ document.domain +"/tables/users/edit/", {input : data}, function(dat){
//whatever
});
This is not something I personally dislike, like this I avoid creating elements and calling them using $this->render('/Elements/xxxx', false); from my controllers.
I want to know if this is the proper way to work with or if it is some kind of cheat or bug of cakephp.
How should we treat this type of content which is not a proper "view" (as won't have a layout, headers...etc), but an "element" loaded dynamically? As a view? As an element?
Thanks.
Check /Layouts/ajax.ctp this is the layout that is rendered for ajax calls. Usually you don't want to have all the header and footer around the element you request when doing an ajax call.
Burzum is on the right track.
Your controller will load the default layout unless you tell it to use /Layouts/ajax.ctp. So in your edit function you'd want to switch layouts depending on how the function is being called. For example:
if($this->request->is('ajax')){
$this->layout = 'ajax';
}// else use controller default...or specify another layout to use here.
I'm trying to use the jQuery UI Tabs Ajax to load some tabs content via Ajax. Everything works, content is loaded and everything, but the problem I'm having is this:
Let's say I have the following tab in a cakePHP view file:
<ul>
<li>Tabs 1</li>
</ul>
As you can see, the href attibute of my a element points to a controller action (controller => my_controller and action => my_action) in this case. The problem I'm having is that, when I first load the page, the action my_action is actually executed BEFORE I even click on the tab. How do I prevent this from happening? Obviously, I want my_action to be called only when I click on the tabs.
Any help please
Thank you
Can you paste my_action from my_controller, and app_controller beforeRender function? I try an answer without a partial code from your app
I think is a render problem.. Or check you app_controller (beforeRender) ...
First of all, in the controller, you need $this->layout = 'ajax';
Second, in the app_controller, don't load the layout because it stop the ajax. (or you can "protect" your layout from your app_controller trough a condition)
I am quite confused on how to have my own layout for each page in cakephp. Currently, there is a default.ctp which I have modified to have my main layout and included the $content_for_layout code. So whatever I have entered in the pages\home.ctp gets reflected. But I want to have a login and register layout and also their individual pages. How can I go about achieving this? Should I even edit the default.ctp? Or create another layout for my main page?
Please assist.
You can specify a different layout in your Controller methods, e.g.
function index() {
$this->layout='my_index_layout'; //app/views/layouts/my_index_layout.ctp
}
function view($id) {
$this->layout = 'my_view_layout'; //app/views/layouts/my_view/layout.cpt
}
But I want to have a login and register layout and also their individual pages.
The "layout", as understood in Cake, is mostly the header and footer. And it sounds like you are referring to the layout of content. You can do the layout of content in each individual view file.
Should I even edit the default.ctp? Or create another layout for my main page?
Yes, it is there for you to modify. If you want more layouts, you can create more in that folder and specify the layout in the controller (otherwise, it defaults to "default" layout).