:::: MENU ::::
Posts tagged with: jquery

Use jquery magento 2

In this tutorial we will discuss Use jquery magento 2 .i.e how to use jquery in magento 2. with following example you can use jQuery in phtml file.And in this tutorial i will try to explain it briefly and also make it convenient.

Suppose you have created a Magento theme where you need to include jQuery.Usually there comes a conflict that with jquery, JavaScript functions does not work properly.In this tutorial we will learn how to use the Magento 2 built in jQuery library on a custom theme.

Since jquery is already added in magento 2.But if u want to use in custom themes, you will have to do it differently.

If you are adding your custom js library other than jQuery then you need to include the js code inside require function like:

require(['jquery', 'jquery/ui'], function($){
     //your js code here  

For example:
Inside the require function, you can directly access jQuery functionality in place by using either jQuery or its short form alias, the dollar $ sign. For example:

require(['jquery', 'jquery/ui'], function($){
  jQuery(document).ready( function() {
    alert("Page loaded.");

Have a look at the example with $ alias:

require(['jquery', 'jquery/ui'], function($){
  $(document).ready( function() {
    alert("Page loaded.");

Similarly we can use jquery or call widget of magento from js file like:

  'mage/<widget.name>' found in /lib/web/mage dir
], function($){

$.widget('<your_namespace>.<your_widget_name>', $.mage.<widget.name>, {  CODE HERE... });

return $.<your_namespace>.<your_widget_name>;

Furthermore if you get an error, it’s possible that it’s because of duplication of jquery.So check it and remove jquery source first, if you are getting error in page .xml file in layout folder.

then define your jQuery like:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
 define jquery and print message in console
<script type="text/javascript">// < ![CDATA[
       console.log('hello this is dmeo ');

 });// ]]>

That’s it from this tutorial. I hope it serves the purpose.Furthermore please feel free to drop any suggestions or queries in comments section. That will definitely be highly appreciated.

Author: Qaisar Satti
Category: Magento 2
Last Modified: January 1, 2019

Magento 2 Color Picker in system configuration

This tutorial is about addingColor Picker in Magento 2 admin configuration. In this article I will show how to add jquery color picker in Magento 2 system configuration. You can use following step to use this jquery color picker on frontend too. Magento 2 have default lib/web/jquery/colorpicker/js/colorpicker library so you don’t have to add any external library for that. Below are the steps of how to do it:

Lets start with the Image to demonstrate you what it looks like:

Magento 2 color picker

Magento 2 color picker

Here my Module Namespace is QaisarSatti.
And my module name is: HelloWorld

Lets have have a look at different steps below:

1. Create system.xml at app/code/QaisarSatti/HelloWorld/etc/adminhtml/system.xml
All admin config options for your module will go in this file. For color picker we will create a text field as below. Just for your information i have not added complete code here for sake of readability.

    <field id="color_background" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
         <label>Background Color</label>
         <frontend_model>QaisarSatti\HelloWorld\Block\ColorPicker</frontend_model> <!-- block for adding color picker on text box -->

2. Create the QaisarSatti\HelloWorld\Block\ColorPicker.php
This code will enable color picker options with the text box.


namespace QaisarSatti\HelloWorld\Block;

class Color extends \Magento\Config\Block\System\Config\Form\Field {

    public function __construct(
    \Magento\Backend\Block\Template\Context $context, array $data = []
    ) {
        parent::__construct($context, $data);

    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) {
        $html = $element->getElementHtml();
        $value = $element->getData('value');

        $html .= '<script type="text/javascript">
            require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
                $(document).ready(function () {
                    var $currentelement = $("#'
. $element->getHtmlId() . '");
                    $currentelement.css("backgroundColor", "'
. $value .'");  //adding already selected value

                    // Attach the color picker
                        color: "'
. $value .'",
                        onChange: function (hsb, hex, rgb) {
                            $el.css("backgroundColor", "#" + hex).val("#" + hex);
        return $html;


3. Add the color picker JavaScript library.
Now finally we need to add color picker JavaScript library to admin config pages. Magento 2 by default is shipped with Color picker jQuery plugin. This plugin is present in lib/web/jquery/colorpicker/ folder.
Create the app/code/QaisarSatti/HelloWorld/view/adminhtml/layout/adminhtml_system_config_edit.xml. This layout file will be called on all admin configuration pages. We will add our color picker JavaScript and CSS to this layout.

<!-- File: app/code/QaisarSatti/HelloWorld/view/adminhtml/layout/adminhtml_system_config_edit.xml -->

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
        <css src="jquery/colorpicker/css/colorpicker.css"/>

Now clear the cache and refresh the page. You will see the color picker enabled in config option.

That’s it from this tutorial. I strongly believe there is always room for improvement.So i am open for any suggestion and feed back. Please feel free to leave hat you are thinking in the comments section below. Cheers.

Author: Qaisar Satti
Category: Magento 2
Last Modified: December 27, 2018

Magento 2 jquery ajax request

Today topic Magento 2 jquery ajax request. sometime we need to load data with loading the page so for that we need ajax to load data. So today we focus how to use jquery ajax request in magento 2. Magneto have already added the jquery library.you can inject it with require. Here is example of using of jqery ajax for getting the json response from controller.


require(['jquery', 'jquery/ui'], function($){
          method: "POST",
          url: "<?php  echo $block->getUrl('helloworld/ajax/index'); ?>",
          data: { q: "test"},
          dataType: "json"
      .done(function( msg ) {
        //do something with you return data


you we use controller ResultFactory to get back json response.

namespace QaisarSatti\HelloWorld\Controller\Ajax;
use Magento\Framework\Controller\ResultFactory;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
class Index extends Action {
protected $request;
public function __construct(Context $context,array $data = [])
public function execute() {
    $resultJson = $this->resultFactory->create(ResultFactory::TYPE_JSON);
    return $resultJson;

Author: Qaisar Satti
Category: Magento 2
Last Modified: November 5, 2018