Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to pass cell value to ajax function on cell click

Posted on 2014-02-05
23
Medium Priority
?
947 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
[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
  • 12
  • 11
23 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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
 
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

Technology Partners: 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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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

610 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