0

Sorry I have kind of strange problem with Magento 2 I am not use to Magento I made a script which should be executed in the Ulimo template in the header of my website, on the network console the script is loaded good, but the script does nothing.
Her my code :

app/code/Vendor/Zipcode/view/frontend/web/js/ajax.js :

javascript
    define([
        'jquery',
        'underscore',
        'mage/template',
        //'jquery/list-filter'
    ], function (
        $,
        _,
        template
    ) {
        'use strict';
        $.widget('Vendor_ZipCode.ajaxCall', {
            init: function (options) {
                var $element = $(options.element);
                var zipurl = options.AjaxUrl;
                $('#zip_btn').val("not clicked")
                console.log("Test script"); 
                $('#zip_btn').on('click', function () {
                    console.log("Test click"); 
                    $('#zip_btn').val("clicked")
                    var param = 'ajax=1';
                    $.ajax({
                        showLoader: true,
                        url: zipurl,
                        data: param,
                        type: "POST",
                        dataType: 'json'
                    }).done(function (data) {
                        $('#test').removeClass('hideme');
                        var html = template('#test', {posts: data});
                        $('#test').html(html);
                    });
                });
            }
        });
        console.log("Test end");
        return $.Vendor_ZipCode.ajaxCall;
    });

As told my script is present in the network console with 200 status. But there is neither Test script neither "test end" on the web console and the value of the button is not not clicked
when I click the button nothing happen no log "test click", no value "clicked" and of course no Ajax.

app/code/Vendor/ZipCode/view/frontend/template/ziptemplate.phtml

input type='button' id='zip_btn' name='zip_btn'>
<style>  
.hideme{display:none;}
</style>
<script type="text/x-magento-init">
        {
            "*": {
                "Vendor_ZipCode/js/ajax": {
                    "AjaxUrl": "<?php echo $block->getAjaxUrl(); ?>"
                }
            }
        }
</script>
<div id='test' class="hideme">
    <select>
      <% _.each(posts, function(text,value) { %>
         <option value="<%= value %>"><%= text %></option>
      <% }) %> 
     </select>
</div>

It might be important this template is called in the override theme from ultimo theme like I add the following code into

app/design/frontend/Vendor/Custom/Magento_Theme/layout/default.xml

<referenceContainer name="container_header_top_central_1">
                    <block class="Vendor\ZipCode\Block\Ziplist" name="zipForm" template="Vendor_ZipCode::ziptemplate.phtml"></block>
                </referenceContainer>

I have not any error message, just blank web console, no value in button.
the Ajax.js is in the network console with status 200 OK
I reset the cache of my navigator
I did :

php bin/magento setup:upgrade
php bin/magento cache:flush
php bin/magento setup:static-content:deploy -f
php bin/magento setup:di:compile

I don't understand why there is not effect of the script on the page.
if you have any idea they are more than welcome.

PS: In case of Minus please explain why so that I can update my post
EDIT First clue of solution: I change :

app/code/Vendor/Zipcode/viez/frontend/web/js/ajax.js

define([
    'jquery',
    'underscore',
    'mage/template',
    'mage/url'
    //'jquery/list-filter'
], function (
    $,
    _,
    template,
    url
) {
    'use strict';
    $(document).ready(function() {
        var ajaxurl = url.build('ZipCode/Controller/Zipcode');;
        console.log(ajaxurl);
        $('#zip_btn').val("not clicked");
        $('#zip_btn').on('click', function () {
            console.log("Test click"); 
            $('#zip_btn').val("clicked");
            $.ajax({
                showLoader: true,
                url: ajaxurl,
                data: param,
                type: "POST",
                dataType: 'json'
            }).done(function (data) {
                $('#test').removeClass('hideme');
                var html = template('#test', {posts: data});
                $('#test').html(html);
            });
        });

    });
});

Like that it's working let say but I still have a problem, how to set the url for Ajax in this case ? Because Ajax url is not working

0

Try the following command

rm -rf pub/static/frontend/Vendor

After that run the following commands

php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
| improve this answer | |
  • 1
    Thank you for your reply, unfortunatly it's still not working – SylwekFr Aug 27 '19 at 13:05
  • Did you replace the vedor name with your own vendor module? – jawaria Aug 27 '19 at 16:45
  • Yes I did but didn't work, I replaced with a ready function which work (in EDIT), I probably won't use widget then, but I still have the problem with Ajax :( – SylwekFr Aug 28 '19 at 8:18

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.