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)
Related
I created an application that allows admins to save slider content to the database and now I want to include the slider on the home page. I have a Slides controller with a slider function that just send the slides content to the slider view.
Here is that controller function:
public function slider()
{
$slides = $this->Slides->find('all');
$this->set('slides', $slides);
$this->set('_serialize', ['slides']);
}
The view for that function only has the following in it:
<?= $this->element('slider'); ?>
I then created an element file called slider and process the slides there. When I go to url /slides/slider the slider is working, but when I go to the root or home page, the slider is empty. It doesn't seem to be keeping the $slides variable in the element.
On the home page:
<?= $this->element('slider'); ?> // then the rest of the home page follows this.
So how do I keep the variable or make it so that I can have the slider view on the home page as well?
The best practice in your case is to use Cells:
View cells are small mini-controllers that can invoke view logic and
render out templates. They provide a light-weight modular replacement
to requestAction().
From the base App dir run cd bin from the console
then run cake bake cell Slider from the console
Go to src/View/Cell/SliderCell.php.
edit the display function,
as the following
public function display()
{
$this->loadModel('Slides');
$slides= $this->Slides->find('all');
$this->set('slides', $slides);
}
Now go to the src/Template/Cell/Slides/display.ctp, and play with $slides in the tepmlate.
To render the Cell anywhere just use this: <?= $this->cell('Slider') ?>
The variables are not sent from the Controller to an element, but from a view.
What you can do is set variables in your controller like this :
$this->set('myvariable','any value');
And, according to cakephp 3 documentation, in the view you can pass the parameter like this:
echo $this->element('helpbox', [
"varToElement" => $myvariable
]);
Source : https://book.cakephp.org/3.0/en/views.html#passing-variables-into-an-element
I am using angularjs framework. I have ng-grid having a column containing link text. On that link click, I want to navigate to different page within the same application. I wanted to pass some parameters to another page, so I used ng-click and then method name. So, my code is like this:
<div class="ngCellText"><a data-ng-click="methodName(parameters)"> Go to Page2 </a>
Inside method:
document.location.href = '/Home/page2/
I used target=_blank but it did not work. Any suggestions ?
Thanks.
You need to use window.open method
$window.open('/Home/page2/');
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 currently working on a single-page scrollable website (5 pages displaying as a single page) using CakePHP. I have worked on each controller action and everything runs well. I have one layout for the entire app and a view for each action. My challenge is finding a way to load the view of each action without reloading the page inside the layout. Should I just put all the view content inside the layout (without echoing $content_for_layout) or could there be a better way to do it?
Considering the div you want to update has the id #content:
$.ajax({
url:"http://yourdomain.com/controller/action",
context:document.body,
dataType:"html",
data:{id:123}, // in case you need to pass some params
success:function(data){
$("#content").html(data);
}
})
The action must return the HTML you want to display inside that div. If you want to have each pags loaded in different div's, you will have to create one div for each page and call AJAX for each one.
When the page is loaded for the first time, you can just pull the data for whatever default action you defined. Then, when you want to change the content, just call AJAX.
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