Get Base Url Or Dynamic Url In view Js or html files

Question 1

I figure it out to get dynamic url in the front end if I need I can simply define mage/url and the use it as url.build('<Modulename>/<controllername>/<action>/')

When I tried the same thing for the backend it didn't return me the expected result.

It gave the the current url and append the path which I had given.

Can anyone explain how this works out. Do I need to define the baseUrl somewhere ?

Question 2

Thanks to Khoa for his explanation what I wanted to achieve is in my admin form I am calling an external url with ajax. I was using a static path so I wanted it dynamically. So here's what I have done.

My Layout XML File

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="content">
 <uiComponent name="namespace_modulename_form"/>
 <block class="Namespace\Modulename\Block\Adminhtml\Edit" name="edit" template="Namespace_Modulename::edit.phtml" />
 </referenceContainer>
 </body>
</page>

Layout Phtml File I defined the baseUrl.

 <script>
 require([
 'mage/url'
 ], function(url) {
 return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getAdminBaseUrl();?>');
 })
 </script>

My block file which returns the base url

<?php
namespace Namespcae\Modulename\Block\Adminhtml;
class Edit extends \Magento\Framework\View\Element\Template
{
 protected $_configReader;
 public function __construct(
 \Magento\Framework\View\Element\Template\Context $context,
 \Magento\Framework\App\DeploymentConfig\Reader $configReader
 ) {
 $this->_configReader = $configReader;
 parent::__construct($context);
 }
 public function getAdminBaseUrl(){
 $config = $this->_configReader->load();
 $adminSuffix = $config['backend']['frontName'];
 return $this->getBaseUrl() . $adminSuffix . '/';
 }
}

Now in my js files I can use it as.

define([
 'Magento_Ui/js/form/element/abstract',
 'mage/url'
], function (Abstract, url) {
 'use strict';
 return Abstract.extend({
 url.build('namespace_module/controllername/action/');
 });
});

Question 3

Just Do That Only in js file

define(['mage/url'], 
 function (url) {
 'use strict';
 var url = url.build('<modulename>/<controllername>/<actionname>');
});

Result will be:

http://ip_address/<modulename>/<controllername>/<actionname>

Question 4

This will not give me the same result In backend. So need to define the base the url in block first

Question 5

But in ur question u mention that u want URL in js so this will helpful. Now tell me in which file do u want URL. Is your problem solved or not?

Question 6

How we get base url of site using url.build() function?

Question 7

using this -> define(['mage/url']

Question 8

Not work backend

Question 9

The most important thing we need to know: We need to set base url for url.build('<Modulename>/<controllername>/<action>/'):

lib/web/mage/url.js

 setBaseUrl: function (url) {
 baseUrl = url;
 },
 build: function(path) {
 if (path.indexOf(baseUrl) != -1) {
 return path;
 }
 return baseUrl + path;
 }

Basically, there are two places where to set the base url:

vendor/magento/module-checkout/view/frontend/templates/onepage.phtml vendor/magento/module-checkout/view/frontend/templates/cart/shipping.phtml

return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');

So, in your admin, you have to set the admin base url.

Question 10

Ok I get that. But talking about admin forms, where I need this to be implemented. My form is created using ui component so how Can I set the url as it has been defined in onepage or shipping ?

Question 11

Hello, you can explain more details about your issue. About Ui component: magento.stackexchange.com/questions/97291/…

Priyank 7,7627 gold badges39 silver badges70 bronze badges · Answer 1 · 2016-10-04 07:03:49Z

Thanks to Khoa for his explanation what I wanted to achieve is in my admin form I am calling an external url with ajax. I was using a static path so I wanted it dynamically. So here's what I have done.

My Layout XML File

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="content">
 <uiComponent name="namespace_modulename_form"/>
 <block class="Namespace\Modulename\Block\Adminhtml\Edit" name="edit" template="Namespace_Modulename::edit.phtml" />
 </referenceContainer>
 </body>
</page>

Layout Phtml File I defined the baseUrl.

 <script>
 require([
 'mage/url'
 ], function(url) {
 return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getAdminBaseUrl();?>');
 })
 </script>

My block file which returns the base url

<?php
namespace Namespcae\Modulename\Block\Adminhtml;
class Edit extends \Magento\Framework\View\Element\Template
{
 protected $_configReader;
 public function __construct(
 \Magento\Framework\View\Element\Template\Context $context,
 \Magento\Framework\App\DeploymentConfig\Reader $configReader
 ) {
 $this->_configReader = $configReader;
 parent::__construct($context);
 }
 public function getAdminBaseUrl(){
 $config = $this->_configReader->load();
 $adminSuffix = $config['backend']['frontName'];
 return $this->getBaseUrl() . $adminSuffix . '/';
 }
}

Now in my js files I can use it as.

define([
 'Magento_Ui/js/form/element/abstract',
 'mage/url'
], function (Abstract, url) {
 'use strict';
 return Abstract.extend({
 url.build('namespace_module/controllername/action/');
 });
});

Nitesh Kuyate 2,1486 gold badges27 silver badges48 bronze badges · Answer 2 · 2017-01-15 10:26:54Z

9

Just Do That Only in js file

define(['mage/url'], 
 function (url) {
 'use strict';
 var url = url.build('<modulename>/<controllername>/<actionname>');
});

Result will be:

http://ip_address/<modulename>/<controllername>/<actionname>

Share

Improve this answer

edited Feb 13, 2017 at 12:14

answered Jan 15, 2017 at 10:26

Nitesh Kuyate's user avatar

Nitesh Kuyate

2,1486 gold badges27 silver badges48 bronze badges

5

This will not give me the same result In backend. So need to define the base the url in block first

Priyank
– Priyank

2017年01月16日 08:33:50 +00:00
Commented Jan 16, 2017 at 8:33
But in ur question u mention that u want URL in js so this will helpful. Now tell me in which file do u want URL. Is your problem solved or not?

Nitesh Kuyate
– Nitesh Kuyate

2017年01月16日 14:13:46 +00:00
Commented Jan 16, 2017 at 14:13
How we get base url of site using url.build() function?

Prince Patel
– Prince Patel

2017年07月24日 13:21:58 +00:00
Commented Jul 24, 2017 at 13:21
using this -> define(['mage/url']

Nitesh Kuyate
– Nitesh Kuyate

2017年07月24日 14:52:33 +00:00
Commented Jul 24, 2017 at 14:52
Not work backend

Navnit Viradiya
– Navnit Viradiya

2025年07月21日 07:18:24 +00:00
Commented Jul 21 at 7:18

Add a comment |

Khoa Truong 32.5k11 gold badges91 silver badges159 bronze badges · Answer 3 · 2016-10-03 15:55:16Z

The most important thing we need to know: We need to set base url for url.build('<Modulename>/<controllername>/<action>/'):

lib/web/mage/url.js

 setBaseUrl: function (url) {
 baseUrl = url;
 },
 build: function(path) {
 if (path.indexOf(baseUrl) != -1) {
 return path;
 }
 return baseUrl + path;
 }

Basically, there are two places where to set the base url:

vendor/magento/module-checkout/view/frontend/templates/onepage.phtml vendor/magento/module-checkout/view/frontend/templates/cart/shipping.phtml

return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');

So, in your admin, you have to set the admin base url.

Ok I get that. But talking about admin forms, where I need this to be implemented. My form is created using ui component so how Can I set the url as it has been defined in onepage or shipping ?
Hello, you can explain more details about your issue. About Ui component: magento.stackexchange.com/questions/97291/…

Stack Exchange Network

Get Base Url Or Dynamic Url In view Js or html files

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

Get Base Url Or Dynamic Url In view Js or html files

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions