Magento 2 – Fix jQuery element.click Not Working

ajaxmagento2wishlist

I have used anchor tag with some id, and want to perform ajax call on its call by using id.click() but its not working.here is my code in file view.phtml

<a id="pdp-add-to-wishlist"
   class="action pdp-towishlist"
   href="#">
    <span>
        <img class="favourite" src="image source" />
    </span>
</a>

and jquery is

<script>
require(['jquery'],function($){
    $(document).ready(function(){
        $("#pdp-add-to-wishlist").click(function(){
            alert("hello");
        })
    });
});

if using with id its not working, but when used with class it works, but i need to work with id only.

I tried using with onclick() also but stuck in code

<a id="pdp-add-to-wishlist"
   class="action pdp-towishlist"
   href="#"
   onclick="addtowishlist()">
    <span>
        <img class="favourite" src="image source />
    </span>
</a>

jquery:

<script type="text/javascript">
function addtowishlist() {
    jQuery.ajax({
        type: "POST",
        url: "<?php echo $this->getUrl('wishlist/index/add'); ?>",
        data : {product:<?php echo $productId ?>},
        success: function(data)
        {
            alert("succc");
        }
        error: function (e) {
            alert("not added");
        }
    });
}

but this has some bug which let the page to load for infinite time.

Best Answer

I don't know exactly what are you doing Try code example below may help. You should avoid use js in template if possible. Try to call it from single file

<script type="text/javascript">
//<![CDATA[
 require([
    'jquery',
    'Magento_Ui/js/modal/alert'
], function($, alert) {
   $('#id-of-element').on('click', function(event){
        alert({
           content: $(event.target).parent().val()
        })
      })
   }
 );
//]]>
</script>

Related Solutions

Magento – jQuery event listeners working most of the time but not sometimes

You have to set jQuery dependency for your custom script. You have occurance of problem because of dependency issue.

For Module/Extension Level

You can set at module/extension level dependency like below,

app/code/Packagename/Modulename/view/frontend/requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider"
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        }
    }
};

Add slider.js inside path, app/code/Packagename/Modulename/view/frontend/web/js/slider.js

You can use in any template file like this,

<script>
    require(["jquery","slider"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

Theme Level

If you want to apply require js changes at theme level, Go to theme module,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/requirejs-config.js

Set your theme required js file in requirejs-config.js

var config = {
    paths: {            
            'slider': "Packagename_Modulename/js/slider",
            'customjsfile': "Packagename_Modulename/js/customjsfile",
        },   
    shim: {
        'slider': {
            deps: ['jquery']
        },
        'customjsfile':{
            deps: ['jquery']
        }
    }
};

Add your js file inside web folder of theme,

app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/slider.js
app/design/frontend/{Packagename}/{themename}/Packagename_Modulename/web/js/customjsfile.js

In your template file,

<script>
    require(["jquery","slider","customjsfile"],function($)(){
        $(document).ready(function() {
            $(element).slider({
                   //option
            });
        });
    });
</script>

For your case,

Keep below config in requirejs-config.js file,

var config = {
    paths: {            
            'footerContact': 'Module_Contact/js/contact'
        },   
    shim: {
        'footerContact': {
            deps: ['jquery']
        }
    }
};

Inside phtml file,

<script>
  require(["jquery","footerContact"],function($)(){
    jquery('.element').on('click', function(event) {
        console.log('logging');
    });
  });
</script>

Magento 2.2.3 – How to Create Custom Form

Create layout XML

/app/code/Company/Module/view/frontend/layout/module_index_custom.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Company\Module\Block\Custom" name="customer_index_gallery" template="Vendor_Module::custom.phtml" cacheable="false"/>
    </referenceContainer>
</page>

/app/code/Company/Module/Block/Custom.php

<?php

namespace Vendor\Module\Block;

class Custom extends \Magento\Framework\View\Element\Template
{
    /**
     * Construct
     *
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);
       }

    /**
     * Get form action URL for POST booking request
     *
     * @return string
     */
    public function getFormAction()
    {
        return '/companymodule/controller_name/custom';
        // here controller_name is index, action is booking
    }
}

/app/code/Company/Module/view/frontend/templates/custom.phtml

<form action="<?php echo $block->getFormAction() ?>" method="post">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input name="email" type="text">
    <input type="submit" value="informations">
</form>

/app/code/Company/Module/Controller/Index/Custom.php

<?php

namespace Company\Module\Controller\Index;

use Magento\Framework\Controller\ResultFactory;

class Custom extends \Magento\Framework\App\Action\Action
{
    /**
     * Booking action
     *
     * @return void
     */
    public function execute()
    {
        // 1. POST request : Get booking data
        $post = (array) $this->getRequest()->getPost();

        if (!empty($post)) {
            // Retrieve your form data
            $firstname   = $post['firstname'];
            $lastname    = $post['lastname'];
            $email       = $post['email'];
          
            // Doing-something with...

            // Display the succes form validation message
            $this->messageManager->addSuccessMessage('Booking done !');

            // Redirect to your form page (or anywhere you want...)
            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
            $resultRedirect->setUrl('/companymodule/index/custom');

            return $resultRedirect;
        }
  
    }
}

Best Answer

Related Solutions

Magento – jQuery event listeners working most of the time but not sometimes

Magento 2.2.3 – How to Create Custom Form

Related Topic