Magento 2 - url.build does not work for admin url

Question

I have tried url.build to build request url for ajax call in magento 2, it does not work ?

JS File code: ( view/adminhtml/web/js/files.js)

/*global window,requirejs*/
requirejs(['jquery', 'Magento_Ui/js/modal/confirm', 'mage/url'], function ($, confirmation, urlBuilder) {
    'use strict';
    $('body #custom_email_button').on('click', function () {
        var requestUrl = urlBuilder.build('productpricequote/email/send');
        console.log(requestUrl);
    });
});

Output:

'productpricequote/email/send'

Any help much appreciated!

Thanks

Answer 1

This should work for you.

define(['jquery', 'Magento_Ui/js/modal/confirm', 'mage/url'], 
  function ($, confirmation, urlBuilder) {
   'use strict';

    $('body #custom_email_button').on('click', function () {
        var requestUrl = urlBuilder.build('productpricequote/email/send');
        console.log(requestUrl);
    });

});

Answer 2

The solution you have implemented in your question is seemed to be accepted by all, but it does not work in fact. So I'm suggesting you some different way:

1. Create a block at app/code/Vendor/Module/Block/YourBlock.php

<?php
namespace Vendor\Module\Block;

class YourBlock extends \Magento\Framework\View\Element\Template
{
    protected $storeManager;
    public function __construct(
        \Magento\Store\Model\StoreManagerInterface $storeManager,
    ) {
        $this->storeManager= $storeManager;
    }
    public function getBaseUrl()
    {
        return $this->storeManager->getStore()->getBaseUrl();
    }
}

2. In your template add this script:

<script>
window.baseUrl = <?php echo json_encode($block->getBaseUrl()); ?>
</script>

3. And update your script as follows:

/*global window,requirejs*/
requirejs(['jquery', 'Magento_Ui/js/modal/confirm'], function ($, confirmation, urlBuilder) {
    'use strict';
    $('body #custom_email_button').on('click', function () {
        var requestUrl = window.baseUrl+'productpricequote/email/send'
        console.log(requestUrl);
    });
});

4. Output

YourBaseUrl/productpricequote/email/send

Answer 3

Try this use "/admin/productpricequote/email/send"

urlBuilder.build("/admin/productpricequote/email/send");

Answer 4

I know, it's not a direct answer to the initial question but I hope it'll help someone.

In case you're looking for a way to pass a URL to a Knockout component that's configured in XML, you just need to use 'url' type instead of 'string'.

<item name="path" xsi:type="url" path="foo/bar/buzz"/>

And you'll get something like

https://yousitename.test/admin/foo/bar/buzz/key/59fc5267a61f37216f082211266f336ff7674b25153d2075efde9c3033fa872f/

An example of a button

<button name="sync" component="Module_Name/js/form/components/your_component_name">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="formElement" xsi:type="string">container</item>
                        <item name="actions" xsi:type="array">
                            <item name="0" xsi:type="array">
                                <item name="targetName" xsi:type="string">${ $.parentName }.sync</item>
                                <item name="actionName" xsi:type="string">redirect</item>
                                <item name="params" xsi:type="array">
                                    <item name="path" xsi:type="url" path="foo/bar/buzz"/>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
                <settings>
                    <title translate="true">Sync</title>

                    <imports>
                        <link name="customerId">${ $.provider }:data.customer_id</link>
                    </imports>
                </settings>
            </button>

Answer 5

I have found solution for this. we just need to add a / before url.

Example:

JS File code: ( view/adminhtml/web/js/files.js)

/*global requirejs*/
requirejs(['jquery', 'Magento_Ui/js/modal/confirm', 'mage/url'], function ($, confirmation, urlBuilder) {
    'use strict';
    $('body #custom_email_button').on('click', function () {
        var requestUrl = urlBuilder.build('/productpricequote/email/send');
        console.log(requestUrl);
    });
});

Output:

'http://siteurl.com/productpricequote/email/send'

Hope this helps! :)