1

I'm looking for a way to modify the default dehavior of a select template.

I just want to add a button and keeping what's already done by magento team. So, I copied the template select.phtml in my extension but it is a "text/x-magento-template" and not a "text/x-magento-init". And I found very few resources about this javascript templating system.

I tried that in a test.js:

require(['jquery'], function ($) {
    $("input[id^='btn-test']").click( function () {
         console.log('click');
    });
});

And this is my select.phtml :

<h1>Template test</h1>
<input type="button" id="btn-test-1" value="OK" /> 
<script id="custom-option-select-type-template" type="text/x-magento-template">
    <div id="product_option_<%- data.option_id %>_type_<%- data.group %>" class="fieldset">
        <input type="button" id="btn-test-2" value="OK" /> 
    </div>
</script>

<script type="text/x-magento-init">
{
   "*": {
     "HappyDev_Test/test": {}
   }
}
</script>

Clicking the first button works as expected but the one in the javascript template doesn't produce anything.

How can I do to insert my own code in the javascript template ?

3
  • Not sure that duplicate IDs will work in this scenario even if this is plain HTML. Try using classes for jquery targeting instead Mar 25 '16 at 20:05
  • The problem doesn't come from the duplicate ID. I updated the code to avoid it and still have the same problem.
    – Plup
    Mar 25 '16 at 20:48
  • In fact, in need to add my own javascript in the Underscore.js template. But no success until now.
    – Plup
    Mar 26 '16 at 2:00
2

Your code bind the click event only to the elements that exist at the time of binding. Replace your test.js code with below one:

require(['jquery'], function ($) {
    $(document).on("click","input[id^='btn-test']", function () {
         console.log('click');
    });
});
2
  • It works. But I'm not really sure why.
    – Plup
    Mar 26 '16 at 17:18
  • Because when you bind click event, it bind the click event only to the elements that exist at the time of binding. See this blog for more detail about event binding for dynamic elements. Mar 26 '16 at 17:36
0

Try this javascript code
You can define underscore library as well below

require(['jquery','jquery/ui','underscore','mage/template'], function ($, jqui, _, mageTemplate) {
    $("#btn-test").on("click", function () {
        console.log('click');
    });
});
4
  • Thanks for your help but I have the same result.
    – Plup
    Mar 26 '16 at 3:00
  • I'm still reading the underscoreJS doc but I don't understand how and where the "<%- data.something %>" is built.
    – Plup
    Mar 26 '16 at 3:04
  • clear js in pub/static and re-deploy for update any changed. M2 use underscore for migrate PrototypeJS to jquery . It quitely helpful and mageTemplate for bind dynamic data inside template. I not get clear about this much
    – mrtuvn
    Mar 26 '16 at 3:08
  • I cleared the code and changed the "console.log('click')" in "console.log('test2')" to be sure that the new version was running. I just checked the code again and run another test but I have the same result: the button in the x-magento-template doesn't trigger the console.log().
    – Plup
    Mar 26 '16 at 3:42
0

My problem has been solved but was not linked to my initial question.

I post here the solution found for this question :

the template

<!-- <?php var_dump($this->customData); ?> -->
<input type="button" id="btn-mage" value="Test magento" />
<script type="text/x-magnento-template" id="mage-template">
        <ul id="<%- data.id %>">
                <li>Name: <%- data.name %></li>
                <li>Location: <%- data.location %></li>
        </ul>
</script>
<script type="text/x-magento-init">
{
        "*": {
                "HappyDev_Test/test": {}
       }
 }
</script>

and the JS :

$(document).on("click", "#btn-mage", function () {
         var tmpl = mageTemplate('#mage-template');
         var data = {
                 data: {
                         name: 'John',
                         location: 'New York'
                 }
         };
         $('#target').after(
                 tmpl(data)
         );
});

I'm still trying to find a way to load data from a PHP Block in my magento script template.I'd appreciate if somebody has a clue how to do that.

1
  • you should post new question for this, as this was not related to your previous question. Mar 30 '16 at 5:50

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.