Question 404812 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Javascript Class Methods as Onclick

I am trying to create a dynamic page generator, which means having multiple pages rendered each with their own instance of a javascript class that will help things like searching and exporting table data.

So my class would be like this:

class Table(){
   constructor(TableName, default){
        this.TableName = TableName;
        this.default = default
   }

   addObject(id, parent, onclick, icon){
       parent.append("<img id='" + id + "' src='" + icon + "' onclick='" + onclick + "'>");
   }
   
   export(){
      //export the data
   }
}

I can use the addObject just fine as that’s triggered within a function call, not directly onto an onclick, but that addObject will add an export icon that should call the specific export function for that specific table, knowing which data set to pull from. So far, my efforts have not been fruitful.

const table = new Table;
table.addObject("export", "#toolbar", "table.export()", Icons.EXPORT)

This does not work, even if running table.export() does in the console, or if I pass in the actual function instead of it as a string and attach it using jQuery.

I’ve seen some examples that would rewrite the function as:

 this.export = function () {
    //code here
 }

But the whole point is to be able to make the code easy to work with, and I feel like that could complicate it for developers writing new functions.

I’ve also attached it in jQuery with (and without) the binding:

    $(document).on('click', '#export', function(){
        table.export().bind(table)
    });

Is there something I’m missing?

Tags:

2

Answers


  1. 0

    Ok maybe it is just a typo. Your instantiation of Table should be with parentheses

    Login or Signup to reply.
  2. 0

    I don’t really know how you’re implementing this feature in your project…

    But my guess is that your parent can’t reach you table constant (witch contains your Table object)… Thus not accessing it’s export method…

    The following approach will let the interpreter handle the accessibility to the desired handler function for clicks. It’s functional.

    // Option 1
function addObject_1 ( id, parent, onClick, icon )
{
  const MyImageTag = document.createElement('img');
  
  MyImageTag.id = id;
  MyImageTag.src = icon;
  MyImageTag.onclick = onClick;
  
  parent.append(MyImageTag);
}

// Option 2
function addObject_2 ( id, parent, onClick, icon )
{
  const MyImageTag = document.createElement('img');
  
  MyImageTag.id = id;
  MyImageTag.src = icon;
  
  MyImageTag.addEventListener('click', onClick);
  
  parent.append(MyImageTag);
}

function MyOnClick ()
{
  window.alert(`My Click Event worked on: ${this.id}`);
}

addObject_1('My1', MyContent, MyOnClick, 'about:blank');
addObject_2('My2', MyContent, MyOnClick, 'about:blank');
    <style>
  img { min-width: 30px; min-height: 30px; background-color: #F00; } 
</style>
<div id="MyContent"></div>

    In your original code the addObject appends a plain <img onclick='table.export()'> to any parent. But the context that contains parent can access table.export()? What if if in your parent context the table symbol is any other thing than your Table instance? In your code there’s no way to know. That’s why you should avoid implementing your onclick callbacks in plain text.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search