Solved

How to pass cell value to ajax function on cell click

Posted on 2014-02-05
23
852 Views
Last Modified: 2014-02-05
As I have said before I am pretty new to MVC and jquery so I need help again

I am trying to do the delete of records by using jquery Ajax function but I need to pass the id of the record which I am having a lot of trouble catching

I populate my table like this:
<td class="data" style=" text-align:center">Date</td><td class="data" style=" text-align:center">Type</td><td class="data" style=" text-align:center">Notes</td>
</tr>
</thead>
<% foreach (MvcRoster.Models.RemarkDetails remark in Model.GetRemarkDetails)
   {%>
<tr style="border:solid 1px black;">
<td id="id" style=" display: none;"><%= remark.TICK_ID %></td>
<td class="data"  style=" width:20px;"><%= remark.Date %> </td>
<td class="data"  style=" width:40px;"><%= remark.Remark_Type%></td>
<td class="data"  style=" width:460px;"><%= remark.Notes%></td>
<td><a href="javascript:postDeleteRemark()">Delete</a></td>
</tr>
<%} %>

Open in new window

and then in my function I have tried:
  function postDeleteRemark() {           
             $('#tblRemarks tr').click(function() {
            Recordid =  $(this).find("#id").html();
           }); 
                   
           confirm("Are you sure you want to delete this record");                     
            $.ajax({
                url:"/Remarks/Delete/" + Recordid,
                data: $("#myID").text(),  
                type: "POST",
                datatype: "html",     
                success: function (result){
                    getRemarks();
                    },                   
                failed: function (c) {
                            alert(c.text);
                        }                
                });
        }

Open in new window


I know this is a bit messy because I was trying different ideas just trying to get something that worked but with no luck.

Let me know if there is anymore info needed.
Thanks in advance
0
Comment
Question by:Niall292
  • 12
  • 11
23 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39837487
ID should be unique for each element
Change your code like so

<% foreach (MvcRoster.Models.RemarkDetails remark in Model.GetRemarkDetails)
   {%>
<tr style="border:solid 1px black;" data-id="<%= remark.TICK_ID %>">
<td class="data"  style=" width:20px;"><%= remark.Date %> </td>
<td class="data"  style=" width:40px;"><%= remark.Remark_Type%></td>
<td class="data"  style=" width:460px;"><%= remark.Notes%></td>
<td><a class="delete-record">Delete</a></td>
</tr>
<%} %>

Open in new window

And your jquery
$('.delete-record').click(function() {
	Recordid =  $(this).closest("tr").data("id");
           if(confirm("Are you sure you want to delete this record")){
            $.ajax({
                url:"/Remarks/Delete/" + Recordid,
                data: $("#myID").text(),  
                type: "POST",
                success: function (result){
                    getRemarks();
                    },                   
                failed: function (c) {
                            alert(c.text);
                        }                
                });
}
        })

Open in new window


I don't know what you are trying to do here
 data: $("#myID").text(),  
0
 

Author Comment

by:Niall292
ID: 39837514
Totally ignore the  data: $("#myID").text(),  
That was a minute of madness

I put in your changes and it seems to make sense but now the Delete is not clickable
0
 
LVL 58

Expert Comment

by:Gary
ID: 39837531
Mmmm should have wrapped the jquery in doc ready

$(function() {
$('.delete-record').click(function() {
	Recordid =  $(this).closest("tr").data("id");
           if(confirm("Are you sure you want to delete this record")){
            $.ajax({
                url:"/Remarks/Delete/" + Recordid,
                type: "POST",
                success: function (result){
                    getRemarks();
                    },                   
                error: function (c) {
                            alert(c.text);
                        }                
                });
}
        })
        })

Open in new window


Also I don't know what page you are trying to post to but I would hazard a guess that this is not right
url:"/Remarks/Delete/" + Recordid,

should be something more like
url:"/Remarks/Delete/mydeletepage.php?recordid=" + Recordid,
0
 

Author Comment

by:Niall292
ID: 39837543
I am posting to a controller and action in ASP.Net MVC. which I have done in other functions
like:
       function postAddCorrective() {        
            $.ajax({
                url:"/Corrective/Create/" + TreeId,
                data: $("#myform").serialize(),  
                type: "POST",
                datatype: "html",     
                success: function (result){
                    getCorrective() 
                    $("#cinput").dialog('destroy').remove();      
                    },
                failed: function (c) {
                            alert(c.text);
                        }                
                });
        }

Open in new window


Which works perfectly
0
 
LVL 58

Expert Comment

by:Gary
ID: 39837546
Ok, that makes sense, so any problems with the amendment?
0
 

Author Comment

by:Niall292
ID: 39837577
I put in a alert(Recordid) after the confirmation and it is coming up as undefined
0
 
LVL 58

Expert Comment

by:Gary
ID: 39837597
Do you have a link to an online version?
This is an abridged version of your code
http://jsfiddle.net/wEEA4/3/

...which is working fine.

If not online can you attach the rendered HTML
0
 

Author Comment

by:Niall292
ID: 39837602
I don't have a link this is an intranet site
0
 
LVL 58

Expert Comment

by:Gary
ID: 39837603
Then attach the rendered HTML
0
 

Author Comment

by:Niall292
ID: 39837624
Sorry man but every time I do view source it only gives what is in the Master page.
I know you can get it all by using firebug or Chrome but I can't remember how
0
 
LVL 58

Expert Comment

by:Gary
ID: 39837650
Is this an ajax page?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 58

Expert Comment

by:Gary
ID: 39837658
I'll make a small change to the jquery in case it is

$(function() {
$(document).on('click','.delete-record',function() {
	Recordid =  $(this).closest("tr").data("id");
           if(confirm("Are you sure you want to delete this record")){
            $.ajax({
                url:"/Remarks/Delete/" + Recordid,
                type: "POST",
                success: function (result){
                    getRemarks();
                    },                   
                error: function (c) {
                            alert(c.text);
                        }                
                });
}
        })
        }) 

Open in new window

0
 

Author Comment

by:Niall292
ID: 39837660
There is a lot of ajax components in it

and built with a masterpage  and partial views.

I hope that answers your question
0
 
LVL 58

Expert Comment

by:Gary
ID: 39837664
Try my amendment above, this deals with dynamic data.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39837666
In Firebug in FF, under the HTML tab do right click on the HTML tag and Copy HTML
0
 

Author Comment

by:Niall292
ID: 39837676
I hope this helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1">
<body>
<div id="header">
<div id="categories" class="jstree jstree-0 jstree-focused jstree-classic" style="overflow: auto; height: 83vh;">
<input id="hdnfld" type="hidden" value="100136">
<input id="hdnName" type="hidden" value="Sean">
<div id="content" style="height: 85%;">
<h2 id="remarksTitle">Remarks</h2>
<div align="center" ;="">
<div id="rinput" align="center;" ;="">
<div id="irinput" class="inputForm" align="center;"></div>
</div>
<div id="reTable" class="displayTable" ;="">
<a href="javascript:getAddRemark()">Add Remark</a>
<table class="remarks">
<thead align="center" ;="">
<tr class="toprow">
<td class="data" style=" text-align:center">Date</td>
<td class="data" style=" text-align:center">Type</td>
<td class="data" style=" text-align:center">Notes</td>
</tr>
</thead>
<tbody>
<tr style="border:solid 1px black;">
<tr style="border:solid 1px black;">
</tbody>
</table>
</div>
<script type="text/javascript">
 $(document).ready(function() {
$('.delete-record').click(function() {
Recordid = $(this).closest("tr").data("id");
alert(Recordid)
if (confirm("Are you sure you want to delete this record")) {
$.ajax({
url: "/Remarks/Delete/" + Recordid,
data: $("#myID").text(),
type: "POST",
success: function(result) {
getRemarks();
},
failed: function(c) {
alert(c.text);
}
});
}
})
}); 
</script>
</div>
</div>
<div id="jstree-marker" style="display: none;">»</div>
<div id="jstree-marker-line" style="display: none;"></div>
<div id="vakata-contextmenu"></div>
</body>
</html>

Open in new window

0
 

Author Comment

by:Niall292
ID: 39837678
Still undefined with the amendment
0
 
LVL 58

Expert Comment

by:Gary
ID: 39837683
You don't have the jQuery library in your code there
Add just before your closing BODY tag

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Cannot test further as there is no real data there
But you shouldn't even be getting into the jquery code to get an undefined error.
0
 

Author Comment

by:Niall292
ID: 39837701
I will get this right some day but the jquery library is in my Masterpage and I didn't notice I didn't open all the branches

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1">
<title> Index </title>
<link type="text/css" rel="stylesheet" href="/Content/Site.css">
<script type="text/javascript" src="../../Scripts/Dialog/jquery-1.9.1.js">
<script type="text/javascript" src="../../Scripts/jsTree/_lib/jquery.jstree.js">
<script type="text/javascript" src="../../Scripts/jsTree/_lib/jquery.cookie.js">
<script type="text/javascript" src="../../Scripts/Dialog/jquery-ui-1.10.3.custom.min.js">
<link type="text/css" rel="stylesheet" href="Scripts/jsTree/jstree.css">
<script type="text/javascript">
<style id="vakata-stylesheet" type="text/css">
<style id="jstree-stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:51050/Scripts/jsTree/_lib/themes/classic/style.css">
</head>

Open in new window

Try this:
<thead align="center" ;="">
<tr class="toprow">
<td class="data" style=" text-align:center">Date</td>
<td class="data" style=" text-align:center">Type</td>
<td class="data" style=" text-align:center">Notes</td>
</tr>
</thead>
<tbody>
<tr style="border:solid 1px black;">
<td id="id" style="display:none">45520</td>
<td class="data" style=" width:20px;">2014/02/03 </td>
<td class="data" style=" width:40px;">Positive </td>
<td class="data" style=" width:460px;">On time again</td>
<td>
<a class="delete-record">Delete</a>
</td>
</tr>
<tr style="border:solid 1px black;">
</tbody>
</table>
</div>

Open in new window


This is real data. Do you want me to try the whole page again
0
 
LVL 58

Expert Comment

by:Gary
ID: 39837710
Ok, the table code you have is not what I posted here
Make the changes to remove the ID <td> tag and adding the data-id attribute to the <tr> tag.
0
 

Author Comment

by:Niall292
ID: 39837723
Cathal
Sir,
I thank you for you patience and it worked great.

Thank you
0
 

Author Comment

by:Niall292
ID: 39837724
Now at 1:30am I need to call it a night
0
 

Author Closing Comment

by:Niall292
ID: 39837727
Unfortunately I didn't read it right and it took ages to figure out this was the correct answer.

Thanks for your patience
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now