1

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

asked Aug 27, 2019 at 9:52
1

1 Answer 1

1

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
answered Aug 27, 2019 at 12:41
3
  • 1
    Thank you for your reply, unfortunatly it's still not working Commented Aug 27, 2019 at 13:05
  • Did you replace the vedor name with your own vendor module? Commented Aug 27, 2019 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 :( Commented Aug 28, 2019 at 8:18

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.