1

I have Magento 2.3 installed, and I'm trying to create a small form in sales_order_view.xml and saving the form using ajax.

Following is the code

XYZ/Sales/view/adminhtml/layout/sales_order_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="order_additional_info">
            <block class="XYZ\Sales\Block\Adminhtml\Order\View\XYZBlock" name="sales_order_view_xyz" template="order/view/xyz.phtml" after="-"/>
        </referenceContainer>
    </body>
</page>

XYZ/Sales/Block/Adminhtml/Order/View/XYZBlock.php

<?php
namespace XYZ\Sales\Block\Adminhtml\Order\View;

use \Magento\Backend\Block\Template;
class XYZBlock extends \Magento\Backend\Block\Template
{

    public function getAjaxUrl()
    {
        $this->getUrl('itdsaleslocation/storelocation/index');
    }

}

XYZ/Sales/view/adminhtml/templates/order/view/xyz.phtml

<div id="order_history_block" class="edit-order-comments">
        <div class="order-history-block" id="history_form">

            <div class="admin__field">
                <label for="somefield" class="admin__field-label">
                    <?= /* @noEscape */ __('Some Field') ?>
                </label>
                <div class="admin__field-control">
                    <input  name="somefield"
                            type="text"
                            id="somefield"
                            class="input-text admin__control-text"/>
                </div>
            </div>

            <div class="admin__field">
                <div class="order-button-actions">
                    <div id="submit-button"
                         class="action-default scalable action-save action-secondary"
                        style="cursor: pointer"
                    >
                        Save
                    </div>
                </div>
            </div>
        </div>
</div>

<script type="text/javascript">
    require([
        "jquery"
    ], function($){
        $('#submit-button').on('click',function(){  
            $.ajax({
                url:"'" + <?php echo $block->getAjaxUrl(); ?> + "'",
                success: function(response){
                    console.log(response);
                }
            });
        });
    });
</script>

XYZ/Sales/etc/adminhtml/routes.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="itdsaleslocation" frontName="itdsaleslocation">
            <module name="XYZ_Sales"/>
        </route>
    </router>
</config>

XYZ/Sales/Controller/Adminhtml/StoreLocation/Index.php

<?php

namespace XYZ\Sales\Controller\Adminhtml\StoreLocation;

use Magento\Backend\App\Action;

class Index extends Action
{
    public function __construct(Action\Context $context)
    {
        parent::__construct($context);
    }

    public function execute()
    {
        $arr = array();
        $arr[0] = 'hello';

        echo json_encode($arr);
    }
}

When I click the save button I get the response as

enter image description here

How to submit ajax successfully?

Improve this question

2 Answers 2

Reset to default
9

Please try to update below your script code :

<script type="text/javascript">
    require([
        "jquery"
    ], function($){
        $('#submit-button').on('click',function(){  
            $.ajax({
                url:"'" + <?php echo $block->getAjaxUrl(); ?> + "'",
                data: {form_key: window.FORM_KEY},
                type: 'POST'
                success: function(response){
                    console.log(response);
                }
            });
        });
    });
</script>

---> XYZ/Sales/Controller/Adminhtml/StoreLocation/Index.php

<?php

namespace XYZ\Sales\Controller\Adminhtml\StoreLocation;

use Magento\Backend\App\Action;

class Index extends Action
{
    protected $resultJsonFactory;
    public function __construct(Action\Context $context,\Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory)
    {
        $this->resultJsonFactory = $resultJsonFactory;
        parent::__construct($context);
    }

    public function execute()
    {
       $response = $this->resultJsonFactory->create();
       $response->setData(['test' => 'hello']);
       return $response; 
    }
}

hope its work for you

Improve this answer
4
  • Tried your code, error has gone but in response I get whole page html code, how to get only the json encoded data?
    – Nausif
    Commented Oct 15, 2019 at 6:53
  • please update your controller and than push basic commands than check
    – Anas Mansuri
    Commented Oct 15, 2019 at 7:02
  • did that but still I get full html text in my response in ajax
    – Nausif
    Commented Oct 15, 2019 at 9:08
  • my bad, i forgot the return keyword in getAjaxUrl function, thanks for the help, it resolved my formkey issue :)
    – Nausif
    Commented Oct 15, 2019 at 9:22
3

Your file code function for FormKey

<?php
namespace XYZ\Sales\Block\Adminhtml\Order\View;

use \Magento\Backend\Block\Template;
class XYZBlock extends \Magento\Backend\Block\Template
{   
     public function __construct(
        \Magento\Backend\Block\Widget\Context $context,
        \Magento\Framework\Data\Form\FormKey $formKey,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->formKey = $formKey;
    }

    public function getFormKey()
    {
         return $this->formKey->getFormKey();
    }

    public function getAjaxUrl()
    {
        $this->getUrl('itdsaleslocation/storelocation/index');
    }

}

Phtml file in script changes


<script type="text/javascript">
    require([
        "jquery"
    ], function($){
        var formKey = <?php echo $block->getFormKey() ?>;
        $('#submit-button').on('click',function(){  
            $.ajax({
                url:"'" + <?php echo $block->getAjaxUrl(); ?> + "'",
                data: {form_key: formKey},
                type: 'POST'
                success: function(response){
                    console.log(response);
                }
            });
        });
    });
</script>

Hope this will help you. Thanks.

Improve this answer
2
  • Tried your code, error has gone but in response I get whole page html code, how to get only the json encoded data?
    – Nausif
    Commented Oct 15, 2019 at 6:53
  • thanks for the help, your code worked
    – Nausif
    Commented Oct 15, 2019 at 9:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.