Use HTML5 data attribute as variable, not string

Question

I have an edit account button on each row of a table that makes the table editable. Above each row there are different messages that need to be display. I'd like to pass the different messages with a data attribute on each link. But currently the data attribute only is used as a string. Not to change the different messages. See jQuery below...

      var editAccount = $(".accounts_edit");

      editAccount.click(function(e) {
        e.preventDefault();

        var origHTML = $(this).parents("tr").html();

        var newAccountMsg = "<p>A new account was added by your bank adminstrator. To make payments from the account please link it to your bank account by entering the account number.</p>"

        var authPaymentsMsg = "<p>Contact your <a href=\"#\">bank adminstrator</a> who can authorize payments from this account. This is a security feature.</p>"

        var acctSystemMsg = "<p class=\"error_msg\">This account was retrieved from your accounting system. To make payments from this account, please link it to your bank account by entering your account number.</p>"

        var whatMessage = $(this).data("msg");
        console.log(whatMessage);

        var editHTML = "<tr class=\"accounts_message\">" +
                  "<td class=\"accounts_primary\"></td>" +
                  "<td colspan=\"5\">" + whatMessage + "</td>" +
                "</tr>" + 
                "<tr class=\"accounts_edit\">" +
                  "<td></td>" +
                  "<td><input type=\"text\" class=\"new_account_no\" required=\"required\" /></td>" +
                  "<td><input type=\"text\" class=\"new_account_name\" required=\"required\" /></td>" +
                  "<td><input type=\"text\" class=\"new_starting_check\" required=\"required\" /></td>" +
                  "<td class=\"accounts_enable_ach\">Yes</td>" +
                  "<td class=\"accounts_manage\">" +
                    "<a class=\"btn btn-custom\" href=\"#\">Save</a><a class=\"btn\" href=\"#\">Cancel</a>" +
                  "</td>" +
                "</tr>";

        $(this).parents("tr").replaceWith(editHTML);
      });

Please let me know how var whatMessage can call the different messages and not simply print the data string. Thanks!

Brad Christie · Accepted Answer · 2013-11-18 18:06:26Z

You could use an object and reference the key:

  var editAccount = $(".accounts_edit");

  editAccount.click(function(e) {
    e.preventDefault();        
    var origHTML = $(this).parents("tr").html();

    var messages = {
      newAccountMsg: "<p>A new account was added by your bank adminstrator. To make payments from the account please link it to your bank account by entering the account number.</p>",
      authPaymentsMsg: "<p>Contact your <a href=\"#\">bank adminstrator</a> who can authorize payments from this account. This is a security feature.</p>",
      acctSystemMsg: "<p class=\"error_msg\">This account was retrieved from your accounting system. To make payments from this account, please link it to your bank account by entering your account number.</p>"
    };

    var whatMessage = $(this).data("msg");
    var editHTML = "<tr class=\"accounts_message\">" +
              "<td class=\"accounts_primary\"></td>" +
              "<td colspan=\"5\">" + messages[whatMessage] + "</td>" +
            "</tr>" + 
            "<tr class=\"accounts_edit\">" +
              "<td></td>" +
              "<td><input type=\"text\" class=\"new_account_no\" required=\"required\" /></td>" +
              "<td><input type=\"text\" class=\"new_account_name\" required=\"required\" /></td>" +
              "<td><input type=\"text\" class=\"new_starting_check\" required=\"required\" /></td>" +
              "<td class=\"accounts_enable_ach\">Yes</td>" +
              "<td class=\"accounts_manage\">" +
                "<a class=\"btn btn-custom\" href=\"#\">Save</a><a class=\"btn\" href=\"#\">Cancel</a>" +
              "</td>" +
            "</tr>";

    $(this).parents("tr").replaceWith(editHTML);
  });

Note your messages are now stored in a containing object therefore making each one accessible through a key. the key would then come from the .data('msg') and accessed via messages[$(this).data('msg')].

AlliterativeAlice · Accepted Answer · 2013-11-18 18:06:11Z

2

This could be done with eval() but using an object is a much better solution:

var messages = {
    newAccountMsg: "<p>A new account was added by your bank adminstrator. To make payments from the account please link it to your bank account by entering the account number.</p>",
    authPaymentsMsg: "<p>Contact your <a href=\"#\">bank adminstrator</a> who can authorize payments from this account. This is a security feature.</p>",
    acctSystemMsg: "<p class=\"error_msg\">This account was retrieved from your accounting system. To make payments from this account, please link it to your bank account by entering your account number.</p>"
};

var whatMessage = messages[$(this).data("msg")];

answered Nov 18, 2013 at 18:06

AlliterativeAlice

12.7k9 gold badges56 silver badges73 bronze badges

Collectives™ on Stack Overflow

Use HTML5 data attribute as variable, not string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related