How to set a value to a data attribute within a script element

Question

I have this code:

<div class="cc-selector col-md-3">
<form method="POST" action="<?php echo base_url() . 'home/cart_finish/go'; ?>" class="checkout-form">
    <input type="hidden" name="payment_type" value="omise">
    <script src="https://cdn.omise.co/omise.js.gz"
        data-key="<?php echo $omise_public_key_test; ?>"
        data-image=" "
        data-frame-label="Acme"
        data-button-label="<?php echo translate('pay_now');?>"
        data-submit-label="<?php echo translate('submit');?>"
        data-location="no"
        data-amount=" "
        data-currency="us"
        >

      var total = $('#grand').html();
      $("[data-amount]").attr('data-amount', total);
     </script>  
</form>

I want to set a value to the "data-amount" attribute. I tried with the above code, but it doesn't work.

Note: Omise is a payment gateway similar to Stripe. That code will render a pay button. I have to had the data-amount set before its render. That's why I cannot wait for the $document to be ready. I hope it makes sense.

If a script element has a src attribute specified, it should not have a script embedded inside its tags. — Rayon
– Rayon, Commented May 18, 2017 at 6:22
Ad id to it and use that id with in your code also put your code in another script tag not in that one which call cdn.omise — Osama
– Osama, Commented May 18, 2017 at 6:24
What is expected result of setting data-* attribute at <script> element? — guest271314
– guest271314, Commented May 18, 2017 at 6:27

guest271314 · Accepted Answer · 2017-05-18 06:44:17Z

1

Append the <script> element to document without a src attribute. At a separate <script> element select script element and set data-amount attribute, and src attribute to path to resource.

    <script id="script"
        data-key="<?php echo $omise_public_key_test; ?>"
        data-image=" "
        data-frame-label="Acme"
        data-button-label="<?php echo translate('pay_now');?>"
        data-submit-label="<?php echo translate('submit');?>"
        data-location="no"
        data-amount=" "
        data-currency="us"
        >
     </script>  
     <script>           
     var total = $('#grand').html();
     $("#script[data-amount]")
     .attr({
       "data-amount": total,
       "src":"https://cdn.omise.co/omise.js.gz"
     });
     </script>
</form>

answered May 18, 2017 at 6:44

guest271314

1

Sign up to request clarification or add additional context in comments.

Comments

TheErikPowell · Accepted Answer · 2017-05-18 12:33:26Z

0

Couple of things,

If you want to manipulate the script tag, you can't do it from inside itself (as far as my experience has shown).
You can't edit the script tag until it exists (is loaded).
The button has the data-amount attribute. Can you not just edit that?

$(function(){
        // Button configure will merged and override with default configure.
        // And has effect with this button only.
        OmiseCard.configureButton('button[data-frame-label="Acme"]', {
          amount:           30.95,
          currency:         'thb',
          image:            'YOUR_LOGO_URL',
          frameLabel:       'Merchant name',
          frameDescription: 'Merchant description',
          submitLabel:      'Pay $30.95',
          buttonLabel:      'Pay with Omise',
          location:         'no',
          billingName:      '',
          billingAddress:   '',
          submitFormTarget: null,
        });
        OmiseCard.attach();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="cc-selector col-md-3">
    <form method="POST" action="<?php echo base_url() . 'home/cart_finish/go'; ?>" class="checkout-form">
        <input type="hidden" name="payment_type" value="omise">
        <script src="https://cdn.omise.co/omise.js.gz"
            data-key="Something"
            data-image=" "
            data-frame-label="Acme"
            data-button-label="Button"
            data-submit-label="Button"
            data-location="no"
            data-amount=" "
            data-currency="us"
            >
         </script>
    </form>

edited May 18, 2017 at 12:33

answered May 18, 2017 at 6:38

TheErikPowell

858 bronze badges

4 Comments

Daniel Over a year ago

Sorry, it's not working. The attribute value needs to be set before the user clicks on the button.

TheErikPowell Over a year ago

I have updated the script to reflect your note above about what the omise script is doing

Daniel Over a year ago

Still not working. It does set the value, but only after the button is rendered. I need it before.

TheErikPowell Over a year ago

From looking at the api on omise.co/omise-js-api#usage-sample the bottom of the page indicates a method for updating the configuration of a previously configured button. I have included all the value in the example in my snippet but you could likely just use the amount value to update the button as needed.

Surya R Praveen · Accepted Answer · 2025-01-13 15:24:22Z

When the attribute is set, its value is always converted to a string. For example: element.dataset.example = null is converted into data-example="null".

HTML When the attribute is set, its value is always converted to a string. For example: element.dataset.example = null is converted into data-example="null".

HTML

<div id="partnerLocatorTagName">
    Carina Anand
</div>

JS

const partnerLocatorScript: HTMLScriptElement =
    this.dom.createElement('script');

partnerLocatorScript.id = 'partnerLocatorScriptID';

partnerLocatorScript.src =
    'https://google.com/prm/js/locator.js?v=4.15.3&pid=1234';

partnerLocatorScript.dataset.config =
    '{"directory_objects":{"directory_object":"","sublisting_object":""},"directoryObjects":{"directory_object":"","sublisting_object":""}}';
const partnerLocatorTagName = this.dom.getElementById(
    'partnerLocatorTagID'
);

partnerLocatorTagName?.appendChild(partnerLocatorScript);

FINAL

<div id="partnerLocatorTagName" src="https://google.com/prm/js/locator.js?v=4.15.3&pid=1234" data-config='{"directory_objects":{"directory_object":"","sublisting_object":""},"directoryObjects":{"directory_object":"","sublisting_object":""}}'>
        Carina Anand
    </div>

Collectives™ on Stack Overflow

How to set a value to a data attribute within a script element

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related