{"id":374782,"date":"2023-03-30T11:46:45","date_gmt":"2023-03-30T11:46:45","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=374782"},"modified":"2024-02-23T09:50:08","modified_gmt":"2024-02-23T09:50:08","slug":"render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/","title":{"rendered":"Render an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module"},"content":{"rendered":"\n

Magento 2 provides a Magento\\Framework\\Controller\\Result\\JsonFactory<\/strong><\/code>  a class that can be used to return a JSON response from a controller. We will use the factory method of this class to return our HTML in JSON format.<\/p>\n\n\n\n

Create PHTML File<\/strong><\/h4>\n\n\n\n

file index.phtml<\/strong> under app\/code\/Webkul\/AjaxCall\/view\/frontend\/templates<\/code> from where we want to initialize our ajax call.<\/p>\n\n\n\n

\n
<?php\n    $url = $block->getUrl('ajaxcall\/index\/ajaxcontroller');\n?>\n<div id="bodyContentMain">\n<\/div>\n<script type="text\/javascript">\n    require(['jquery'], function($){\n        $(document).ready(function() {\n            setTimeout(function(){\n                $.ajax({\n                    context: '#bodyContentMain',\n                    url: '<?= $url ?>',\n                    type: "POST",\n                    data: {'newText':'Hello Everyone'},\n                }).done(function (data) {\n                    $('#bodyContentMain').html(data.result);\n                    return true;\n                });\n            },2000);\n        });\n    });\n<\/script><\/pre>\n\n\n\n
<\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n\n\n\n
You can call this file by creating a separate controller and layout because ajax will run after this file is loaded. I am not covering here the creation of the controller and layout to load any phtml file.<\/p>\n\n\n\n
You can go through the given below webkul blog for this <\/p>\n\n\n\n
https:\/\/webkul.com\/blog\/create-hello-module-in-magento2\/<\/a><\/p>\n\n\n\n
In this file, we have created one blank div with id #bodyContentMain. Using ajax call we will call the controller file and return an HTML. Using JQUERY we will fill that HTML into div.<\/p>\n\n\n\n
In javascript code,  in the ajax function, we are passing two parameters. First is AjaxUrl which is the URL of the controller (in our case it is ajaxcall\/index\/ajaxcontroller\/, a “ajaxcall” is the front name of our module and ajaxcontroller.php is our controller file) from where we will return a JSON response, the second is the hardcoded text “Hello Everyone”. You can pass any other parameters in this call like product id. For demonstration purposes, we have passed hardcoded text parameters.<\/p>\n\n\n\n
And in the done method, we are filling the div content using data.result, which contains the actual HTML.<\/p>\n\n\n\n
Create Controller File
<\/h4>\n\n\n\n
Create a controller file AjaxController.php<\/strong> under app\/code\/Webkul\/AjaxCall\/Controller\/Index<\/code> directory and write the below code<\/p>\n\n\n\n
<?php\n\/**\n * Webkul Software\n *\n * @category    Webkul\n * @package     Webkul_AjaxCall\n * @author      Webkul\n * @copyright   Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license     https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\AjaxCall\\Controller\\Index;\n \nuse Magento\\Framework\\App\\Action\\Action;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\Controller\\Result\\JsonFactory;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n \nclass AjaxController extends Action\n{\n \n    \/**\n     * @var PageFactory\n     *\/\n    protected $_resultPageFactory;\n \n    \/**\n     * @var JsonFactory\n     *\/\n    protected $_resultJsonFactory;\n \n    \/**\n     * View constructor.\n     * @param Context $context\n     * @param PageFactory $resultPageFactory\n     * @param JsonFactory $resultJsonFactory\n     *\/\n    public function __construct(    \n        Context $context, \n        PageFactory $resultPageFactory, \n        JsonFactory $resultJsonFactory,\n        \\Webkul\\PathologyLab\\Helper\\Data $helper\n    )\n    {\n        $this->_resultPageFactory = $resultPageFactory;\n        $this->helper = $helper;\n        $this->_resultJsonFactory = $resultJsonFactory;\n        parent::__construct($context);\n    }\n \n    \/**\n     * @return \\Magento\\Framework\\Controller\\Result\\Json\n     *\/\n    public function execute()\n    {\n        $result = $this->_resultJsonFactory->create();\n        $resultPage = $this->_resultPageFactory->create();\n        $text = $this->getRequest()->getParam('newText');\n        $block = $resultPage->getLayout()\n                ->createBlock('Webkul\\AjaxCall\\Block\\Index\\AjaxView')\n                ->setTemplate('Webkul_AjaxCall::ajaxview.phtml')\n                ->setData('data',$text)\n                ->toHtml();\n        $result->setData(['result' => $block]);\n        return $result;\n    }\n}<\/pre>\n\n\n\n
we have passed the block file and template file in which we will write our business logic and HTML code respectively. We have passed the hardcoded text variable in the setData method so that it is available in the block file for any business logic.  we are setting our data in the setData method which is preparing JSON output.<\/p>\n\n\n\n
Create Block File<\/h4>\n\n\n\n
Create\u00a0AjaxView.php<\/strong>\u00a0under\u00a0app\/code\/Webkul\/AjaxCall\/Block\/Index<\/code>\u00a0directory and write the below code<\/p>\n\n\n\n
<?php\n\/**\n * Webkul Software\n *\n * @category    Webkul\n * @package     Webkul_AjaxCall\n * @author      Webkul\n * @copyright   Copyright (c)  Webkul Software Private Limited (https:\/\/webkul.com)\n * @license     https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\AjaxCall\\Block\\Index;\n\nuse Magento\\Framework\\View\\Element\\Template;\n \nclass AjaxView extends Template\n{\n    public function __construct(  \n      Template\\Context $context, \n      array $data = []\n    )\n    {\n        parent::__construct($context, $data);\n    }\n \n    protected function _prepareLayout()\n    {\n        return parent::_prepareLayout();\n    }\n\n    \/* you can create any function and write business logic here and *\/\n}<\/pre>\n\n\n\n
Create Template File<\/h4>\n\n\n\n
Create ajaxview.phtml file under app\/code\/Webkul\/AjaxCall\/view\/frontend\/templates<\/code> directory with your HTML code.<\/p>\n\n\n\n
<?php\n$data = $block->getData();\n?>\n<div>\n  <div><?= $data['data'] ?><\/div>\n<\/div><\/pre>\n\n\n\n
You can see here data is available in our template file. We have used a string here just for demonstration but you can pass and use another thing like product id and write or fetch any business logic from the block file and render an HTML code in our template file.<\/p>\n\n\n\n
\"Result\"
Result<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
Magento 2 provides a Magento\\Framework\\Controller\\Result\\JsonFactory  a class that can be used to return a JSON response from a controller. We will use the factory method of this class to return our HTML in JSON format. Create PHTML File file index.phtml under app\/code\/Webkul\/AjaxCall\/view\/frontend\/templates from where we want to initialize our ajax call. You can call this file by creating a separate […]<\/a><\/p>\n","protected":false},"author":169,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[250,230,2070,3132],"class_list":["post-374782","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-ajax","tag-html","tag-magento2","tag-render"],"yoast_head":"\nAjax Call Block Rendreing HTML<\/title>\n<meta name=\"description\" content=\"Rendering an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ajax Call Block Rendreing HTML\" \/>\n<meta property=\"og:description\" content=\"Rendering an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-30T11:46:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-23T09:50:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6-1200x555.png\" \/>\n<meta name=\"author\" content=\"Ramakant Pandey\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ramakant Pandey\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/\"},\"author\":{\"name\":\"Ramakant Pandey\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/e900dd4548d308477830b501e60214fa\"},\"headline\":\"Render an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module\",\"datePublished\":\"2023-03-30T11:46:45+00:00\",\"dateModified\":\"2024-02-23T09:50:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/\"},\"wordCount\":425,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6-1200x555.png\",\"keywords\":[\"ajax\",\"html\",\"Magento2\",\"render\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/\",\"url\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/\",\"name\":\"Ajax Call Block Rendreing HTML\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6-1200x555.png\",\"datePublished\":\"2023-03-30T11:46:45+00:00\",\"dateModified\":\"2024-02-23T09:50:08+00:00\",\"description\":\"Rendering an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6.png\",\"width\":1284,\"height\":594,\"caption\":\"Screenshot-2-6\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Render an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/e900dd4548d308477830b501e60214fa\",\"name\":\"Ramakant Pandey\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ea0042b92622eca16d3d8512f51f69bb43d023e0a40fa07bfc6fc5ca068f56c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1ea0042b92622eca16d3d8512f51f69bb43d023e0a40fa07bfc6fc5ca068f56c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Ramakant Pandey\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/ramakant-pandey019\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ajax Call Block Rendreing HTML","description":"Rendering an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/","og_locale":"en_US","og_type":"article","og_title":"Ajax Call Block Rendreing HTML","og_description":"Rendering an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module","og_url":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-03-30T11:46:45+00:00","article_modified_time":"2024-02-23T09:50:08+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6-1200x555.png","type":"","width":"","height":""}],"author":"Ramakant Pandey","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ramakant Pandey","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/"},"author":{"name":"Ramakant Pandey","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/e900dd4548d308477830b501e60214fa"},"headline":"Render an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module","datePublished":"2023-03-30T11:46:45+00:00","dateModified":"2024-02-23T09:50:08+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/"},"wordCount":425,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6-1200x555.png","keywords":["ajax","html","Magento2","render"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/","url":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/","name":"Ajax Call Block Rendreing HTML","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6-1200x555.png","datePublished":"2023-03-30T11:46:45+00:00","dateModified":"2024-02-23T09:50:08+00:00","description":"Rendering an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/Screenshot-2-6.png","width":1284,"height":594,"caption":"Screenshot-2-6"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/render-an-html-using-an-ajax-call-and-creating-html-from-the-block-in-the-controller-file-programmatically-in-magento-2-module\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Render an HTML Using an Ajax Call and creating HTML from the block in the controller file programmatically in Magento 2 Module"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/e900dd4548d308477830b501e60214fa","name":"Ramakant Pandey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1ea0042b92622eca16d3d8512f51f69bb43d023e0a40fa07bfc6fc5ca068f56c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ea0042b92622eca16d3d8512f51f69bb43d023e0a40fa07bfc6fc5ca068f56c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Ramakant Pandey"},"url":"https:\/\/webkul.com\/blog\/author\/ramakant-pandey019\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/374782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/169"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=374782"}],"version-history":[{"count":19,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/374782\/revisions"}],"predecessor-version":[{"id":374835,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/374782\/revisions\/374835"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=374782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=374782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=374782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}