How to pass namespace variable into click function param variable? jQuery

Question

So I found an awesome solution to get around needing to use Global variables in jQuery here. Everywhere I say namespace, originally I was going to use a Global var.

However I'm not able to send my namespace variable through a param on a simple click function.

I want to do this because I have these variables that need to be saved and used to create modal windows as well as to let the app know what dynamically created buttons control what modal.

So below is an example of my namespace object where I first create the variables My jQuery namespace object:

$.reg = { 
    masterRole : " ", 
    role_ID : " ",
    row_Name : " ",
    ary_Check_Role : []
}; 

$(document).ready(function () {
    ...

As you go through the app the values for those namespace variables get set when you click this button (grabs data from HTML) Variables are set on my roleBtnClicked function

function roleBtnClicked(event){

    $.reg.masterRole  = $(this).html();            /* Get role name: Actor */
    $.reg.role_ID     = $(this).attr('role');      /* Get role-1 */
    $.reg.rowName     = $(this).attr('row');       /* Get row-role-1 */
    $.reg.blueBtn     = $(this).attr('blue');      /* Get blue-btn-1 */

Now a modal window pops up, after clicking some checkboxes and pushing data into an array, when you click the done button(below) all the variables need to be saved into the namespace vars again.

My done button click Function, where I'm trying to pass my namespace variables via param vars

$(".doneButton").click(
    {
        param1: $.reg.masterRole,
        param2: $.reg.role_ID,
        param3: $.reg.rowName,
        param4: $.reg.ary_Check_Role
    },
    doneBtnClicked);

function doneBtnClicked(event){
    alert('$.reg.roleName    = '+$.reg.roleName);
    alert('event.data.param1 = '+event.data.param1);

    masterRole= event.data.param1;
    role_ID  = event.data.param2;
    rowName  = event.data.param3;
    ary_Check_Role = event.data.param4;

Note the 2 Alerts above in the click function, the first one will display the correct value, however the 2nd one doesn't display anything. Also Having a problem getting the Array to come through as well.

So questions: Should I be doing it this way? How do you pass an Array into a jQuery namespace correctly and then get it passed into a click function param?

in your code $.reg.masterRole is set to " " so alerting it would show nothing.. is this code actually representative of what youre using? — Tom Elmore, May 01 '13 at 22:50
Oh sorry there is another function, a button click before the doneButton that does set these variables: $.reg.masterRole= $(this).html(); I'll add this to the question now — Leon Gaban, May 01 '13 at 23:42

score 2 · Accepted Answer · answered May 02 '13 at 14:59

First off, you should avoid putting things into the jQuery object. Use closures for that.

Second: You should use HTML data-... attributes and jQuery data() to attach custom properties to HTML elements. Avoid using non-standard properties.

Third: You can use separate named function definitions for event handlers, but it makes most sense when you actually re-use those functions for different elements across your code (you don't seem to do that). Using anonymous functions that you pass directly to .click(), for example, results in more understandable code.

// use this shorthand instead of $(document).ready(function () { ... });
$(function () {

  // variable reg will be available to all functions 
  // defined within this outer function. This is called a closure.
  var reg = { 
    masterRole : " ", 
    role_ID : " ",
    row_Name : " ",
    ary_Check_Role : []
  };

  $(".roleButton").click(function (event) {
    // modify state
    reg.masterRole  = $(this).html();            /* Get role name: Actor */
    reg.role_ID     = $(this).data('role');      /* Get role-1 */
    reg.rowName     = $(this).data('row');       /* Get row-role-1 */
    reg.blueBtn     = $(this).data('blue');      /* Get blue-btn-1 */

    // note that this requires markup like this:
    // <button data-role="foo" data-row="bar" data-blue="baz">

    // ...
  });

  $(".doneButton").click(function (event) {
    // debug output
    alert(JSON.stringify(reg, 2, 2));
  });

});

Use multiple $(function () { ... }); blocks to separate things that should be separate.

Don't forget to always use var for every variable you declare. Variables declared without var will be global - and you don't want global variables.

Ah thanks, didn't know about closures :) This solves my problem! — Leon Gaban, May 02 '13 at 15:25
You should read about them. They can be hard to grasp at first, but dealing with JavaScript without proper knowledge of closures is not possible; they are absolutely essential to the language. — Tomalak, May 02 '13 at 15:28

How to pass namespace variable into click function param variable? jQuery

1 Answers1

Linked