[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Adding Dynamic Link To Ajax Data

Posted on 2014-08-22
7
Medium Priority
?
293 Views
Last Modified: 2014-08-27
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

0
Comment
Question by:Bob Schneider
  • 3
  • 2
  • 2
7 Comments
 
LVL 34

Assisted Solution

by:Big Monty
Big Monty earned 500 total points
ID: 40279613
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
 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1500 total points
ID: 40279804
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
 

Author Comment

by:Bob Schneider
ID: 40279809
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 34

Expert Comment

by:Big Monty
ID: 40279812
can you post a small example of your json data? 5 rows max?
0
 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1500 total points
ID: 40279814
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
 

Author Comment

by:Bob Schneider
ID: 40287893
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
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1500 total points
ID: 40288121
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

829 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