Adding Dynamic Link To Ajax Data

I have the following being used to populate an ajax datatable.  I want to add a javascript pop-up to it j = 1.

What I want to modify is "<a href="javascript:pop('my_results.asp?part_id=<%=Results(0, j)%>',600,600)"><%=Results(1, j)%></a>"

{
  "data": [
        <%For i = 0 To UBound(Results, 2) - 1%>
            [
            <%For j = 0 To 3%>
                "<%=Results(j, i)%>"
                <%If j < 3 Then %>
                    <%Response.Write ","       '-- don't output a comma on the last element%>
                  <%End If%>
                <%Next%>
            ]

            <%If i < UBound(Results, 2) - 1 Then %>
                <%Response.Write ","           '-- don't output a comma on the last section%>
            <%End If%>
        <%Next%>
]
}

Open in new window

Bob SchneiderCo-OwnerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
what is the code you posted suppose to be for?

to add some kind of dialog, let's say a delete user confirmation dialog box, first get your link built:

<a href="?part_id=<%=Results(0, j)%>" class="delete_modal">Delete</a>

Open in new window


this should be put into wherever you're building your data. from the code above, I'm a bit confused as to what you're doing, it looks like you're building the json data directly from an array. if so, just check your index counter and put the above code on the first pass through for each row.

you'll next want to build the dialog html, to keep things simple, just do:

<div id="delete" >
    <p>Are you sure you want to delete this user?</p>
</div>

Open in new window


finally, you'll need to wire up the click actions to launch the dialog box:

$('#delete').dialog({
        autoOpen: false, 
        width: 400,
        modal: true
    });

    $('.delete_modal').click(function (e) {
        e.preventDefault();
        var targetUrl = $(this).attr("href");
        $('#delete').dialog({
          buttons: {
            "Delete": function() {
              // url to delete a user
            },
            "Cancel": function() {
              $(this).dialog("close");
            }
          }
        });
        $('#delete').dialog("open");
    });

Open in new window


first i would just see if you can get the dialog box to appear, then we can concentrate on exactly what you want it to do
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Actually, you wouldn't add any js or pop up code in your json. That should just be data.

It is best to work this backwards.  

1) Create a sample html page with the bare minimum just for the table.  

2) Create some static json data.  Just a few rows is all you need.

3) Get the sample working as static html with your external json code.

Any kind of pop up will be done by the rendered code.

Your front end html that you create may only look like the sample
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

Open in new window

 
But when run the rendered code will look something like
<table id="example" class="display dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
					<thead>
						<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" aria-sort="ascending" style="width: 133px;">Name</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 208px;">Position</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 99px;">Office</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Extn.: activate to sort column ascending" style="width: 48px;">Extn.</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 88px;">Start date</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 76px;">Salary</th></tr>
					</thead>

					<tfoot>
						<tr><th rowspan="1" colspan="1">Name</th><th rowspan="1" colspan="1">Position</th><th rowspan="1" colspan="1">Office</th><th rowspan="1" colspan="1">Extn.</th><th rowspan="1" colspan="1">Start date</th><th rowspan="1" colspan="1">Salary</th></tr>
					</tfoot>
				<tbody><tr role="row" class="odd"><td class="sorting_1">Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>5407</td><td>2008/11/28</td><td>$162,700</td></tr><tr role="row" class="even"><td class="sorting_1">Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>5797</td><td>2009/10/09</td><td>$1,200,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>1562</td><td>2009/01/12</td><td>$86,000</td></tr><tr role="row" class="even"><td class="sorting_1">Bradley Greer</td><td>Software Engineer</td><td>London</td><td>2558</td><td>2012/10/13</td><td>$132,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>1314</td><td>2011/06/07</td><td>$206,850</td></tr><tr role="row" class="even"><td class="sorting_1">Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>4804</td><td>2012/12/02</td><td>$372,000</td></tr><tr role="row" class="odd"><td class="sorting_1">Bruno Nash</td><td>Software Engineer</td><td>London</td><td>6222</td><td>2011/05/03</td><td>$163,500</td></tr><tr role="row" class="even"><td class="sorting_1">Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>8330</td><td>2011/12/12</td><td>$106,450</td></tr><tr role="row" class="odd"><td class="sorting_1">Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>3990</td><td>2011/12/06</td><td>$145,600</td></tr><tr role="row" class="even"><td class="sorting_1">Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>6224</td><td>2012/03/29</td><td>$433,060</td></tr></tbody></table>

Open in new window


What we need to do is write a javascript or jquery (probably easier to  use) function that listens for the click or hover of the item and then display.

I have an old sample here that does just this http://jsbin.com/sujete/1/edit
The html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

  <meta charset="utf-8">
  <title>padas</title>
</head>
<body>
  <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
  <thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd gradeX">
			<td><input type="checkbox" class="engine" value="234">234</td>
			<td>Internet
				 Explorer 4.0</td>
			<td>Win 95+</td>
			<td class="center"> 4</td>
			<td class="center">X</td>
		</tr>
		<tr class="even gradeC">
			<td><input type="checkbox" class="engine" value="352">352</td>
			<td>Internet
				 Explorer 5.0</td>
			<td>Win 95+</td>
			<td class="center">5</td>
			<td class="center">C</td>
		</tr>
		<tr class="odd gradeA">
			<td><input type="checkbox" class="engine" value="923">923</td>
			<td>Internet
				 Explorer 5.5</td>
			<td>Win 95+</td>
			<td class="center">5.5</td>
			<td class="center">A</td>
		</tr>
      
  </tbody>
    <tfoot>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</tfoot>
  </table>
</body>
</html>

Open in new window

JQuery
$(document).ready(function(){
  $('#example').dataTable();
});
$('.engine').change(function(){
   alert($(this).val());
  
});

Open in new window

You can see that the alert is picking up the value of the input
<input type="checkbox" class="engine" value="234">

Open in new window

But lets say you need other data and perhaps data that is not visible.  You can do this by adding a data- element.  data-runner_name

As example http://jsbin.com/dowil/1/edit
I added just the first row a hyper link to the id and place the runner's name in the attribute data-runner_name.
<input type="checkbox" class="engine" value="234"><a href="#" class="runner" data-runner_name="BobbaBuoy">234</a>

Open in new window

Then the jquery is updated to listen for a click on the class, "runner" and then return the attribute, "runner_name"
$(document).ready(function(){
  $('#example').dataTable();
});
$('.engine').change(function(){
   alert($(this).val());
  
});
$('.runner').click(function(){
  var runner_name=$(this).attr('runner_name');
   alert(runner_name);
  
});

Open in new window

Try the sample and click on the link 234 and you will see your username.

Ideally, this is done in a modal.  If you are using bootstrap, this is built in. Otherwise, using jquery ui as BM has shown.  You can use jquery to dynamically build the a form or whatever you need.  

This may be different than what you are used to and even could seem like more coding. But this is the workflow to use.

The next step is starting at the end and make the final static html.  If you are not sure how to do something but know what the out come should look like, then picture will help us visualize what you want.
0
Bob SchneiderCo-OwnerAuthor Commented:
My datatable shows a list of runners sorted by their total points earned.  I want the runner's name to be a clickable link so that they can see the scores of the individual participants in each race they ran, rather than just their final score.  The "my_results.asp" page does that.  I want that to pop up when you click on the participants name.  I am absolutely fine not using an old school pop-up so I will look your suggestion over, but that is what I am trying to do.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
can you post a small example of your json data? 5 rows max?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If that is going to a new page, no need for pop ups.   Just build the link for the runner.  

Is the data for the id of the runner in the table already (on the same row)?  You can use that to build a link.
0
Bob SchneiderCo-OwnerAuthor Commented:
This is the data

I want the participant's name to be a clickable link that shows each individual runner's race-by-race performance.  I know how to get the data...in fact I have an asp page already created.  My idea was to use a javascript pop-up to display that although now that I am moving in a more progressive direction, a "cooler" window display would be preferred.  I like what happens when I post a question to EE.  As I fill out the form fields I get a little description that appears to the right.  How can I have that appear when I mouse over or click on a name?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you look at the example that I have here http://jsbin.com/dowil/1/edit you can see how to grab data like a name from an id.   From there you want to use a modal. You can use jquery ui as BM pointed out.  Or there is a pure modal in jsmodal http://jsmodal.com/docs/usage.php but I prefer using bootstrap http://getbootstrap.com/javascript/#modals  or even foundation http://foundation.zurb.com/docs/components/reveal.html

Both bootstrap and foundation are responsive libraries with a responsive css grid at it's core.  Gary has a write up about BS http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/A_15179-Bootstrap-Masterclass-Part-1.html.

I will place the core  modal code at the bottom of the page and fill in the content by ajax or capturing the click info as I did in my sample and injecting it to the modal body.

This is where you want to go and especially because of the responsive thing.  I have used jquery ui for this and it has some quirks due to jquery ui api.  Bootstrap is easier and if you are going to make your site responsive it is already there.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.