• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 630
  • Last Modified:

Generating Dynamic url in Jquery ,MVC app

I have a View which displays a list of customers as shown below.Each time user click on the edit link.i have to pass the appropriate Customer ID to the Jquery or the $.Get() .let me know how to do it .Now i have hard corded the ID



<script type="text/javascript" language="javascript">

     $(document).ready(function() {
         $("a").click(function(event) {
         alert(this.value);
                 $.get('/App/Customer.mvc/Edit?Id=3',
                    function(htmlResult) {
                        // $("#dialog").remove(); //In case this is the second time they've requested the dialog.
                        $("#TempHolder").append(htmlResult);
                        $("#dialog").dialog({ bgiframe: true,
                            autoOpen: true,
                            height: 600,
                            width: 600,
                            modal: true
                        });
                    });
         });
     });


 </script>

<h2>PurchasingAuthorities</h2>  
    <div id="PurchasingAithorities">
   
    <table cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>
                 ID
                </th>
                <th>
                    Name
                </th>
             
            </tr>
        </thead>
        <tbody>
            <% foreach (var item in  Model) { %>
           
            <tr>
               <td>
                    <a href=<%= item.ID %>  id="Edit" ><img src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>
                </td>
             
                <td>
                    <%= Html.Encode(item.Name) %>
                </td>
               
            </tr>
            <% } %>
        </tbody>
    </table>
     
 </div>
 <div id="Result"></div>
 <div id="TempHolder"></div>
</asp:Content>
0
hariaspind
Asked:
hariaspind
  • 5
  • 3
1 Solution
 
hariaspindAuthor Commented:
I tried the below approach
 
the href attribute of your Edit <a> tag has already the ID so you can simply retrive it :

var id = $("#Edit").attr("href");

$.get('/App/Customer.mvc/Edit?'+id+',

 ,but it is not working.Assume that there are 3 rows ,with Id 1,2,3.

$("#Edit").attr("href");--always returns the first ID value, that is 1.Even if you click on 2nd or 3rd row.
0
 
MrAgileCommented:
Hi There,


You can add the id to the element's like below:

  <a href=<%= item.ID %>  id="Edit" ><img id="<%= item.ID %>" src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>


This may work provided you're using 1.3 pf the jquery framework.

var id = $("#Edit").closest("img").attr("id");


Let me know how you go with it.

Sean


0
 
hariaspindAuthor Commented:
Hi MrAgile

0
NEW Veeam Backup for Microsoft Office 365 1.5

With Office 365, it’s your data and your responsibility to protect it. NEW Veeam Backup for Microsoft Office 365 eliminates the risk of losing access to your Office 365 data.

 
hariaspindAuthor Commented:
Hi ,
       Please ignore the previous comment.
I am using Jquery 1.3.2 .And tried your suggestion .
 
var id = $("#Edit").closest("img").attr("id");   --returns undefined value

0
 
MrAgileCommented:
post the generated html  so I can have a looik at the strucuture
0
 
hariaspindAuthor Commented:

 
 
<!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><title>
      
      PurchasingAuthorities
 
</title>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/MicrosoftAjax.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/MicrosoftMvcAjax.js"></script>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
      <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
</head>
<body>
    <div>
       
   
 <script type="text/javascript" language="javascript">
 
     $(document).ready(function() {
     $("a").click(function(event) {
             var id = $("#Edit").closest("img").attr("id");
             alert(id);
             $.get('/BridgePZ/PurchasingAuthority.mvc/Edit', { requestId: $("#Edit").closest("img").attr("id") },
                    function(htmlResult) {
                        $("#dialog").remove(); //In case this is the second time they've requested the dialog.
                        $("#TempHolder").append(htmlResult);
                        $("#dialog").dialog({ bgiframe: true,
                            autoOpen: true,
                            height: 600,
                            width: 600,
                            modal: true
                        });
                    });
           
         });
     });
 
 
 
 </script>
               
 
    <h2>PurchasingAuthorities</h2>  
    <div id="PurchasingAithorities">
   
    <table cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>
                    Edit
                </th>
                <th>
                    Type
                </th>
                <th>
                    Description
                </th>
                <th>
                    Active Date
                </th>
                <th>
                    Expiration Date
                </th>
            </tr>
        </thead>
        <tbody>
           
           
            <tr>
              <td>
                <a href="1"  id="Edit" ><img id="1" src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>
 
                </td>
                           
                <td>
                    MMA
                </td>
                <td>
                    Master Maintenance Agreement
                </td>
                <td>
                    12/23/2009 4:38:54 PM
                </td>
                <td>
                    12/1/2015 12:00:00 AM
                </td>
            </tr>
           
           
            <tr>
              <td>
                <a href="2"  id="Edit" ><img id="2" src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>
 
                </td>
                           
                <td>
                    RFP
                </td>
                <td>
                    Request For Proposal
                </td>
                <td>
                    12/23/2009 4:38:54 PM
                </td>
                <td>
                    12/1/2015 12:00:00 AM
                </td>
            </tr>
           
           
            <tr>
              <td>
                <a href="3"  id="Edit" ><img id="3" src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>
 
                </td>
                           
                <td>
                    STS
                </td>
                <td>
                    State Term Schedule
                </td>
                <td>
                    12/23/2009 4:38:54 PM
                </td>
                <td>
                    12/1/2015 12:00:00 AM
                </td>
            </tr>
           
        </tbody>
    </table>
     
 </div>
 <div id="Result"></div>
 <div id="TempHolder"></div>
 
    </div>
</body>
</html>

0
 
hariaspindAuthor Commented:
Hi here you go ,I found my own solution ! It works.

  $(document).ready(function() {
     $("a").click(function() {
                 $.get('/BridgePZ/PurchasingAuthority.mvc/Edit', { requestId: $(this).attr("id") },
                    function(htmlResult) {
                        $("#dialog").remove(); //In case this is the second time they've requested the dialog.
                        $("#TempHolder").append(htmlResult);
                        $("#dialog").dialog({ bgiframe: true,
                            autoOpen: true,
                            height: 600,
                            width: 600,
                            modal: false
                        });
                    });

         });
     });

 <a href="#"  id="<%=item.ID %>" ><img  src="Content/themes/smoothness/images/Edit.png" alt="Edit" /></a>

 
0
 
MrAgileCommented:
:D
0

Featured Post

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.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now