3x Magento Master
You can show/hide Ajax Loader in Magento Request using Built-in Magento Widget while working with ajax related stuff in the browser.
You can start the loader once the ajax request is started and you can stop the loader widget after the response is getting or failed.
Its simple to add loader widget icon for an ajax request. Continue reading “How to show loader widget in ajax call Magento 2?”
To pass Ajax response from the controller in Magento 2, You need to use Magento\Framework\Controller\Result\JsonFactory Object.
Many times your custom functionality requires you to use Ajax request on a page to display information without any page load and in this situation, you need to know about Ajax use in Magento 2 to achieve your requirement.
Magento\Framework\Controller\Result\JsonFactory is used for sending a response from a controller to an Ajax request.
Pass your response in the setData() method. Continue reading “Ajax response from controller file Magento 2”
By default Image data are not post using ajax. only plain data will be passed as Ajax post. if we need to pass image data using ajax we need to call ajax as below way,
Call jquery using requirejs way in backend template file,
Let’s create a simple example of the form,
<form id="abcd" action="" enctype="multipart/form-data">
<div class="control">
<input type='file' class='multi' name='attachment' id='attachment'/>
</div>
<button type="button" name="submitajax" id="submitajax"></button>
</form>
<script>
require(["jquery"],function($) {
$("#submitajax").on('click', function() {
var file = document.getElementById('attachment').files[0];
var form;
if (typeof file != 'undefined') {
form = new FormData(document.getElementById('attachment'));
form.append('form_key',window.FORM_KEY);
form.append('attachment', file);
form.append('id', getId);
}
$.ajax({
url: "<?= $block->getUrl('myajax/custom/urlname'); ?>",
type: 'post',
mimeTypes: 'multipart/form-data',
data: form,
cache: false,
contentType: false, //this is must required
processData: false, //this is must required
beforeSend: function() {
$('body').trigger('processStart');
},
success: function (response) {
console.log(response);
$('body').trigger('processStop');
}
});
});
});
</script>
We need to Use You FormData() object of Javascript to store our image data and using above way we can just send image data to server side using ajax.