When Creating an order via the admin. the forms are being loaded by http://localhost/project/Admin/sales/order_create/loadBlock/block/shipping_method,totals,billing_method?isAjax=true

this request will load


reference would be


now if I add this line of code to any of those layouts

    <block name="sample_block"
            ........jsLayout args 


this will work well if My_Module::order/create/shipping/method/sample.phtml is just a normal html template.



my problem is when i try to call the jslayout. its not working.

<div id="cc-ts-trigger" data-bind="scope:'sample-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
                "#cc-ts-trigger": {
                    "Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>

NOTE that the JSlayout is working when refreshing the page(means it was not retrieved via ajax). i tried doing the same in sales_order_create_index.xml and it works so i dont think its a misconfiguration in the layout.

I tried to inspect element after the rendering via ajax. and it stops at

<!-- ko template: getTemplate() --><!-- /ko -->

like it reads it as a normal html comment.

does anyone experience loading a layout via ajax call? do i need to create a new layout processor for this one or magento already has one.

im also not that knowledgeable on creating layout processors

I just want to load a JSlayout in on a layout.xml thats being called by sales/order_create/loadBlock via ajax. Thanks

1 Answer 1


So I was also having this issue, specifically the console error below

Uncaught SyntaxError: Unexpected token ':'
at legacy-build.min.js:1
at Array.map (<anonymous>)
at String.evalScripts (legacy-build.min.js:1)
at legacy-build.min.js:1

The code causing the issue was this (I have removed client-specific details):

    <script type="text/x-magento-init">
        "*": {
            "MyClient_Core/js/giftMessage": {
                "myparam1": "my_value_1",
                "myparam2": "my_value_2",
                "myparam3": "my_value_3"

I will say I am not 100% sure what the root cause of the error is, but I suspect once the block has been loaded the JS attempts to evaluate it but does not know how to handle this syntax when loaded.

I updated this to load the component inline like so:

<div id="gift_options_giftmessage" class="giftcard-form giftcard-send-form fieldset admin__fieldset"
     data-mage-init='{"MyClient_Core/js/giftMessage": {"myparam1": "my_value_1","myparam2": "my_value_2","myparam3": "my_value_3"}}'>

The only real change is adding it within the data-mage-init attribute and removing the element specifier (that might not be the right name for it?) as we are referencing the div directly by initialising it inline.

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.