# Problem ajax custom layout

**URL:** <https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567>\
**Category:** Need Help\
**Created:** [October 30, 2020, 6:13pm UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567 "2020-10-30T18:13:56Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![shadowx.jb](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@shadowx.jb](https://discourse.cakephp.org/u/shadowx.jb)\
**Post date:** [October 30, 2020, 6:13pm UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567/1 "2020-10-30T18:13:57Z")

</div>

I use ajax modal: `http://github.com/kylefox/jquery-modal`

When using the standard template `layout/default.php` it is displayed well without layout, only the content.

But if I set up a different page template:

```
    $this->viewBuilder()->setLayoutPath('domains');
    $this->viewBuilder()->setLayoutPath('other_domain');

```

So the modal is displayed, including the layout and console browser displayed:

`[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.`

and

`DevTools failed to load SourceMap: Could not load content for http://php/manage/init.js.map: HTTP error: status code 404, net :: ERR_HTTP_RESPONSE_CODE_FAILURE`

Bad URL source file…

Modal does not work even if I put the template in the same folder as the default.php file  
I want it to work the same as if I had a template in default.php

Please help

---

<div class="post-metadata">

**Author:** ![FinlayDaG33k](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/finlaydag33k/32/1049_2.png) [@FinlayDaG33k](https://discourse.cakephp.org/u/FinlayDaG33k)\
**Post date:** [October 30, 2020, 9:51pm UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567/2 "2020-10-30T21:51:35Z")

</div>

Hii there,

The first is a warning because your XHR requests are synchronous, causing them to block the main thread.  
This can cause a variety of issues ranging from:

- a slower time for a full page load (eg. by blocking other JS)
- the page outright locking up until the request resolves.

Without knowing the code that causes it, it’s difficult to fix it.  
My best bet would be to use `promises` and/or `async/await` for the request:

```auto
function makeRequest(){
  return new Promise((resolve, reject) => {
    // Make your request here
  });
}

// using the promise as-is
makeRequest().then((res, err) => {
  if(err) {
    // ... Handle errors
    return;
  }
  // ... Process result
});

// using await
async function myCaller() {
  let res;
  try {
    res = await makeRequest();
  } catch(err) {
    // ... Handle errors
    return;
  }
  // ... Continue processing request
}

```

This warning _can_ be ignored but as the warning implies, it may be detrimental for the end user (your visitor) experience due to the reasons listed above.

As for the second error: this is a `404` error meaning it couldn’t find the file at `http://php/manage/init.js.map`.  
Make sure that the sourcemap exists at the location it should be available at (most often in the same directory as the JS file you want to serve).  
This error _can_ be ignored if you want to.  
It may make debugging a bit harder though (since your browser can’t “rebuild” the original JS so it can’t tell you the exact lines something went wrong).

---

<div class="post-metadata">

**Author:** ![shadowx.jb](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@shadowx.jb](https://discourse.cakephp.org/u/shadowx.jb)\
**Post date:** [November 1, 2020, 3:09pm UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567/3 "2020-11-01T15:09:01Z")

</div>

How can I use the functions you wrote? In AppController.php ?

I think there is a bug in PHP CAKE, because if I set this in AppController:

`$this->viewBuilder()->setLayout('default');`

It is the same template as the default is `/template/layout/default.php`

When calling the modal, the entire contents are displayed, including the layout.

If I do not set setLayout … then when calling the modal, only the content from the controller without layout is displayed in the modal.

---

<div class="post-metadata">

**Author:** ![Zuluru](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zuluru/32/1230_2.png) [@Zuluru](https://discourse.cakephp.org/u/Zuluru)\
**Post date:** [November 1, 2020, 5:10pm UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567/4 "2020-11-01T17:10:27Z")

</div>

I believe that when you don’t set the layout, and it’s an Ajax request, it defaults to something other than `template/layout/default.ctp`. I can’t remember for sure, as I am using a plugin to change some aspects of Ajax handling. You should be able to do some debugging in the rendering functions to find what layout it’s using in that case, and do something similar with your custom one.

---

<div class="post-metadata">

**Author:** ![FinlayDaG33k](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/finlaydag33k/32/1049_2.png) [@FinlayDaG33k](https://discourse.cakephp.org/u/FinlayDaG33k)\
**Post date:** [November 1, 2020, 6:13pm UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567/5 "2020-11-01T18:13:28Z")

</div>

No, the code I gave is JavaScript and has nothing to do with CakePHP itself.  
The warnings you got are related to your JavaScript.

As for the template, well, without really seeing what the error itself is (eg. a screenshot), it’s difficult to guess what’s wrong.

---

<div class="post-metadata">

**Author:** ![shadowx.jb](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@shadowx.jb](https://discourse.cakephp.org/u/shadowx.jb)\
**Post date:** [November 1, 2020, 7:37pm UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567/6 "2020-11-01T19:37:16Z")

</div>

> [@Zuluru](#):
>
> methin

Could it be debugged what layout will be used?

---

<div class="post-metadata">

**Author:** ![Zuluru](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zuluru/32/1230_2.png) [@Zuluru](https://discourse.cakephp.org/u/Zuluru)\
**Post date:** [November 1, 2020, 10:19pm UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567/7 "2020-11-01T22:19:43Z")

</div>

You could try the `getTemplate` and `getTemplatePath` functions in the view builder.

---

<div class="post-metadata">

**Author:** ![shadowx.jb](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@shadowx.jb](https://discourse.cakephp.org/u/shadowx.jb)\
**Post date:** [November 2, 2020, 6:20am UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567/8 "2020-11-02T06:20:19Z")

</div>

That’s right, when calling ajax, it’s called ajax layout.

And the solution is as follows:

```
if($this->getRequest()->is('ajax')) {
    $this->viewBuilder()->setLayout('ajax');
} else {
    $this->viewBuilder()->setLayoutPath('domains');
    $this->viewBuilder()->setLayoutPath('other_domain');
}
```

---

<div class="post-metadata">

**Author:** ![Zuluru](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zuluru/32/1230_2.png) [@Zuluru](https://discourse.cakephp.org/u/Zuluru)\
**Post date:** [November 2, 2020, 6:27am UTC](https://discourse.cakephp.org/t/problem-ajax-custom-layout/8567/9 "2020-11-02T06:27:33Z")

</div>

Since the Ajax layout happens automatically, you could maybe simplify to

```auto
if(!$this->getRequest()->is('ajax')) {
    $this->viewBuilder()->setLayoutPath('domains');
    $this->viewBuilder()->setLayoutPath('other_domain');
}
```