1

In my header section I have user name and if user have access to different location then he has button saying click me. I want to send ajax call on this button. But JS is not working. Can anybody help me how can I trigger click event on this?

<li class="user-name-welcome">
    <span class="user"
          data-role="location-section"
          tabindex="0"
          data-mage-init='{"dropdown":{}}'
          data-toggle="dropdown"
          data-trigger-keypress-button="true"
          data-bind="scope: 'location'">
        <span data-bind="text: location().name"></span>
        <span data-bind="if: location().multilocation">
            (<a href="javascript:void(0)" id="change-location">
            click me
        </a>)
        </span>
    </span>
    </li>`
  • check my code and let me know if now working. – Rohan Hapani Nov 26 '18 at 19:04
0
<li class="user-name-welcome">
    <span class="user"
          data-role="location-section"
          tabindex="0"
          data-mage-init='{"dropdown":{}}'
          data-toggle="dropdown"
          data-trigger-keypress-button="true"
          data-bind="scope: 'location'">
        <span data-bind="text: location().name"></span>
        <span data-bind="click: updateLocation">
            click me
        </span>
    </span>
    </li>`

Now create "updateLocation" function into respencted js file and from that function you need to call ajax request.

  • but in that span I have put an if condition – Daniel_12 Nov 26 '18 at 15:09
  • you can put that if condition into that updateLocation function according to your requirement. – Dhiren Vasoya Nov 27 '18 at 3:48
0

Add this code in your html file :

<li class="user-name-welcome">
    <span class="user" data-role="location-section" tabindex="0" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" data-trigger-keypress-button="true" data-bind="scope: 'location'">
        <span data-bind="text: location().name"></span>
        <span>
            <!-- ko if: location().multilocation -->
            <span data-bind="click: changeLocation"> click me </a>
            <!-- /ko -->
        </span>
    </span>
</li>

For ajax call add this js code in your js file :

define(['uiComponent','jquery','ko','mage/storage'], function(Component,$,ko,storage) {
        'use strict';
        return Component.extend({
            initialize: function () {
                this._super();
            },
            changeLocation: function () {
                myAjaxCall: function(dataToPass) {
                    fullScreenLoader.startLoader();
                    storage.post(
                        'url/of/mycontroller',
                        JSON.stringify(dataToPass),
                        true
                    ).done(
                        console.log("Request complete successfully");
                    ));
                }
            }
        });
});

Deploy content and clean cache.

I hope it will useful for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.