Tag: requirejs

Posted on

How to pass image data using Ajax to server side in backend 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.

Posted on

How to resolve Uncaught ReferenceError: jQuery is not defined(anonymous function) error magento 2?

Many time during custom development in Magento 2 using require js we have faced error like,

Uncaught ReferenceError: jQuery is not defined(anonymous function).
Uncaught TypeError: $(…).customjs is not a function.

Above issue can be resolved using require js paths and shim attribute of requirejs.
Most of the time issue occurs because of jQuery is not loaded before our custom js file due to AMD(asynchronously module dependencies) nature of require js.

Many of the custom js or Third party js library depends on Jquery to load first.
In Magento 2, Magento team used require js concept for improvement of site speed.

So you need to add dependencies in requirejs-config.js file as below. let’s assume you are using slider js names myslider.min.js and they depend on jquery. Your requirejs-config.js file will be as below,

var config = {
    paths: {
            'myslider': 'Vendor_Module/js/myslider.min'
    },
    shim: {
            'myslider': {
                deps: ['jquery'] //gives your parent dependencies name here
            }
    }
};

Gives pathname under the paths object, Your myslider.min.js stay at app/code/<Vendor>/<Module>/view/frontend/web/js/myslider.min.js

Gives dependencies using shim attribute. Our slider depends on jquery.