?
Solved

Javascript Open Wizard on click event from dynamic data

Posted on 2014-09-30
5
Medium Priority
?
332 Views
Last Modified: 2014-09-30
With some C# code, I'm building a Table including a <DIV> tag that I've added a value to that refers to an object ID.

The table will have multiple rows, each having a different object ID, and its own unique <DIV> tag, ie:

<table>
  <tr>
  <th>Function</th>
  <th>Name</th>
  <th>ID</th>
  </tr>
  <tr>
    <td><div id='edit' value='1234'>Edit</div></td>
    <td>Object One</td>
    <td>1234</td>
  </tr>
  <tr>
    <td><div id='edit' value='1235'>Edit</div></td>
    <td>Object two</td>
    <td>1235</td>
  </tr>

Open in new window


I want to be able to use Jquery or Javascript to retrieve the value of which DIV was clicked...  How would I do that?

    var wizard = $("#campaignWizard").wizard();
    $("#edit").click(function () {
        var clickedID = {????};
        wizard.show();
    });

Open in new window

0
Comment
Question by:adworldmedia
[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
  • 3
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40352092
ID attribute MUST be unique in a document.
In you case use a class instead.

Test page : http://jsfiddle.net/bkjb1u9t/1/

For teh sake of your question, use :
var wizard = $("#campaignWizard").wizard();
    $("div[id='edit']").click(function () { //  if you change it to a class use : $("div.edit")
        var myCell = $(this).closest("td"); 
        var nextTD1 = myCell.next();
        var nextTD2 = nextTD1.next();
        alert( nextTD1.text() );
        alert( nextTD2.text() );
        wizard.show();
    });

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 40352094
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 40352162
I would do it like this.

Output your html like shown below - instead of attribute value use the html5 standard for adding custom attributes which prefix your custom values using the data prefix
HTML
<table>
  <tr>
  <th>Function</th>
  <th>Name</th>
  <th>ID</th>
  </tr>
  <tr>
    <td><div class='edit' data-d='1234'>Edit</div></td>
    <td>Object One</td>
    <td>1234</td>
  </tr>
  <tr>
    <td><div class='edit' data-id='1235'>Edit</div></td>
    <td>Object two</td>
    <td>1235</td>
  </tr>

Open in new window

Now the javascript is trivial
    var wizard = $("#campaignWizard").wizard();
    $('div.edit').click(function() {
       // HERE WE GET THE ID VALUE IN THE DIV'S CUSTOM DATA ATTRIBUTE data-id
       // USING THE JQUER .dat() function

       var  clickedID  = $(this).data('id');
        wizard.show();
    });

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 40352168
from julianH code, you should read, line 8, data-id instead data-d
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40353076
@leakim - thanks for catching that
0

Featured Post

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

764 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