AJAX call to controller returns admin dashboard html

Question

Calling a controller with location

Vendor\Orderitemstatestatus\Controller\Adminhtml\orderitemstatestatusmapping\OrderStatus.php

The controller is called through AJAX from admin custom form as follows

    setAfterElementHtml('
            <script>
            require(["jquery", "jquery/ui"], function($){ 
                   $(document).ready(function() {
                    $("#page_order_status").click(function() {
                        var customurl = "orderitemstatestatus/orderitemstatestatusmapping/orderstatus";
                        $.ajax({
                           url: customurl,
                           type: "POST",
                           showLoader: true,
                           data: {form_key: window.FORM_KEY},
                       success: function(response) { 
                                    console.log(response);
                           },
                           error: function (xhr, status, errorThrown) {
                               console.log(errorThrown);
                           }
                       });
                        });
                   });
                });
</script>'

);  

Is there something wrong with the url? The secret keys to url is disabled from the backend.

routes.xml:

 <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
    <router id="admin">
        <route id="orderitemstatestatus" frontName="orderitemstatestatus">
            <module name="Vendor_Orderitemstatestatus" before="Magento_Adminhtml" />
        </route>
    </router>
</config>

OrderStatus.php file:

<?php
namespace Vendor\Orderitemstatestatus\Controller\Adminhtml\orderitemstatestatusmapping;

use Magento\Backend\App\Action;
use Magento\Framework\App\Filesystem\DirectoryList;


class orderstatus extends \Magento\Backend\App\Action
{

    /**
     * @param Action\Context $context
     */
    protected $resultJsonFactory;
    public function __construct(Action\Context $context,\Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory)
    {
        $this->resultJsonFactory = $resultJsonFactory;
        parent::__construct($context);
    }

    /**
     * Save action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        $data = $this->getRequest()->getPostValue();
        // return Json(new {msg="Successfully added "});
        return  $this->resultJsonFactory->create()->setData(['data' => 'file successfully called']);

}
}

The controller should simply return "file successfully called in json format" but returns dashboard page html.

Answer 1

It simply looks that it URL issue,which is not being found in ajax call.

To Fix this you can do following things -

1) Check the ajax request URL in Developer console > Network Tab, you would find the whole URL here and you can copy this URL from here and can hit direct on browser. By doing this you can get idea what wrong you are doing in ajax URL.

2) You should use url.builder in your ajax call to create correct URL to your controller. Like this--

setAfterElementHtml('
            <script>
            require(["jquery", "jquery/ui","mage/url"], function($,urlBuilder){ 
                   $(document).ready(function() {
                    $("#page_order_status").click(function() {
                       // var customurl = "orderitemstatestatus/orderitemstatestatusmapping/orderstatus";
                        //USE OF URL BUILDER
                        var customurl = urlBuilder.build('orderitemstatestatus/orderitemstatestatusmapping/orderstatus');  
                        $.ajax({
                           url: customurl,
                           type: "POST",
                           showLoader: true,
                           data: {form_key: window.FORM_KEY},
                       success: function(response) { 
                                    console.log(response);
                           },
                           error: function (xhr, status, errorThrown) {
                               console.log(errorThrown);
                           }
                       });
                        });
                   });
                });
</script>'

);  

Now you need to follow point (1) again to check URL.

if URL still not generating well then share your console snapshot here.

Answer 2

In my case, the following solution worked:

setAfterElementHtml('
            <script>
            require(["jquery", "jquery/ui","mage/url"], function($, urlBuilder){ 
                   $(document).ready(function() {
                    $("#page_order_status").click(function() {
                        var order_status = $("#page_order_status :selected").text();
                        $.ajax({
                           url: "'.$this->getUrl("*/*/orderstatus").'",
                           type: "POST",
                           showLoader: true,
                           data: {form_key: window.FORM_KEY,value: order_status},
                       success: function(response) { 
                                    console.log(response["data"]);
                                    $("#page_order_state").val(response["data"]);

                           },
                           error: function (xhr, status, errorThrown) {
                               console.log(errorThrown);
                           }
                       });
                        });
                   });
                });
</script>'

);      

I used $this->getUrl("*/*/orderstatus") to get the current base url.