Solved

Why is my onclick event on row <tr> throws "is not defined exception in HTML5/jquery?

Posted on 2013-06-15
5
677 Views
Last Modified: 2013-06-16
Hi:

I'm trying to get the onclick event working in a <tr>

I create <tr>s and add the to my table in javascript.

function LoadTheCodeOnDemand(){

    function ClickGeneratedOrderRow(orderRow){
        alert("Clicked on Row");
    }; 

    function AddARow(){

       tableRow = $('<tr onclick="ClickGeneratedOrderRow(this);"/>');
       // Add a bunch of <td>s to the row
       
       $('#GeneratedOrdersTable > tbody').append(tableRow);

    };

};

Open in new window


When I click on the row at runtime, I get the following error.
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {ClickGeneratedOrderRow(this);

Uncaught Reference Error: ClickGeneratedOrderRow is not defined.

Open in new window


Both of the above functions are defined with the same JS file, so scope should not be an issue (I think).

Any ideas would be helpful here. I think I need to pass the "this" so that I'll be able to tell which row was actually clicked. I can then get the required data from the row.

Any advice/thoughts on this?
0
Comment
Question by:jxbma
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 42

Accepted Solution

by:
sedgwick earned 500 total points
ID: 39250959
that is because u declared ClickGeneratedOrderRow inside LoadTheCodeOnDemand.
try declare it outside this scope, something like:
 
   function ClickGeneratedOrderRow(orderRow){
        alert("Clicked on Row");
    }

function LoadTheCodeOnDemand(){

    function AddARow(){

       tableRow = $('<tr onclick="ClickGeneratedOrderRow(this);"/>');
       // Add a bunch of <td>s to the row
       
       $('#GeneratedOrdersTable > tbody').append(tableRow);

    };

};

Open in new window


btw, why do u declare AddARow() inside LoadTheCodeOnDemand()?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39251175
Should work too :
function LoadTheCodeOnDemand(){

    function AddARow(){

       tableRow = $('<tr onclick="ClickGeneratedOrderRow(this);"/>')
       // Add a bunch of <td>s to the row
       
       tableRow.appendTo('#GeneratedOrdersTable > tbody').click(function() {
               alert("Clicked on Row");
       });

    };

};

Open in new window

0
 
LVL 9

Expert Comment

by:Sar1973
ID: 39251183
Segdwick should have set the point: each function must be declared separately inside the script definition.
0
 
LVL 1

Author Comment

by:jxbma
ID: 39251610
We are integrated with Spring. Declaring functions within a DemandLoadPage() function allows me to package functions in a separate JS file which then get loaded only when the requested page is loaded into the browser.

 (I didn't design the overall architecture here, so I'm not in a position to change it either).

JB
0
 
LVL 1

Author Closing Comment

by:jxbma
ID: 39251683
This works.
I created an Object outside of the scope of the demand load function.
I assigned the function as "a method" on that object.
I then was able to call it via "ScopeObject.ClickGeneratedOrderRow(this)".

All is well,

Thanks,
JB
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question