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
