Calling Up A Correct, Individual, Modal Menu from a Classic .ASP Repeat Region

201 Views Asked by At

I have a note section in my form that allows users with permissions to add information to a particular record. Part of this not section must allow users to delete their own notes or to edit their own. The issue I seem to be having is when I add a Jquery Modal Menu that appears to confirm the deletion I have menus popping up for each note, so if I have 5 notes in my record, it means 5 menu's pop up that I need to close out. Is there any way for me to target the correct note so only its assigned menu appears?

ASP Code Section:

        <% 
While ((Repeat1__numRows <> 0) AND (NOT RS_Notes.EOF)) 
%>

<%
Dim RS_Poster
Dim RS_Poster_cmd
Dim RS_Poster_numRows

Set RS_Poster_cmd = Server.CreateObject ("ADODB.Command")
RS_Poster_cmd.ActiveConnection = MM_Logistics_STRING
RS_Poster_cmd.CommandText = "SELECT EmpID, F_Name, L_Name FROM Employee INNER JOIN Notes ON Employee.EmpID = Notes.Emp_ID WHERE Notes.EMP_ID = "& RS_Notes.Fields.Item("Emp_ID").Value &""
RS_Poster_cmd.Prepared = true

Set RS_Poster = RS_Poster_cmd.Execute
RS_Poster_numRows = 0
%>

        <tr>
          <td colspan="4" id="Table-Row-Parent-Comments" ><br>
            <div id="Table-Row-Child-CommentsTitle">
            <div id="Table-Row-Child-CommentsTitle-Text">
            Posted By:<%=(RS_Poster.Fields.Item("F_Name").Value)%>&nbsp;<%=(RS_Poster.Fields.Item("L_Name").Value)%> Date:<%=(RS_Notes.Fields.Item("Note_Date").Value)%>
            <%If RS_Poster.Fields.Item("EmpID").Value = RS_User.Fields.Item("EmpID").Value Then%>
            <div id="Table-Row-Child-CommentsTitle-Text-EditDelete">
            <div align="right">
            Edit/<a href="#" id="Table-Content-DeleteNotes-Link">Delete</a>
            </div>
</div>
<%End If%>
</div>
</div>
<div id="Table-Row-Child-Comments">
  <div id="Table-Row-Child-Comments-Text">
    <p><%=(RS_Notes.Fields.Item("Note_Text").Value)%></p>
  </div>
  <br>
</div>
</td>
</tr>
<tr>
<td>

'SECTION OF MY CODE WHERE I ADD THE MODAL MENU FOR JQUERY 

      <form ACTION="<%=MM_noteDeleteAction%>" METHOD="POST" name="Modal-Menu-DeleteNote-Form" id="Modal-Menu-DeleteNote-Form">
        <input type="hidden" name="MM_insert" value="Modal-Menu-DeleteNote-Form">
        <input type="hidden" name="MM_delete" value="Modal-Menu-DeleteNote-Form">
        <input type="hiddenx" name="MM_recordId" value="<%= RS_Notes.Fields.Item("Note_ID").Value %>">
        <input type="submit" value="Delete"/>
      </form>
</td>
</tr>
<% 
  Repeat1__index=Repeat1__index+1
  Repeat1__numRows=Repeat1__numRows-1
  RS_Notes.MoveNext()
Wend
%>

JQUERY Section:

//delete note
    $("a#Table-Content-DeleteNotes-Link").click(function(){
    $("form[id=Modal-Menu-DeleteNote-Form]").dialog("open");
            })
    $("form[id*=Modal-Menu-DeleteNote-Form]").dialog(
    {
        autoOpen:false, 
        modal:true,
        width:800,
        height:500,
        title:"Delete Note",
         show:{effect:"fade",duration:300},
         hide:{effect:"fade",duration:300},
         buttons:{
            /* Delete:function(){
                 $("form[id=Modal-Menu-DeleteNote-Form]").submit();
                 },
            Cancel:function(){
                 $("form[id=Modal-Menu-DeleteNote-Form]").dialog("close");
                 }*/
             }
        });

As it stands right now, everything works fine if I just hit the delete button created in the form tags, it's able to remove the correct record that I want, I'm just trying to add a modal menu to confirm the deletion a particular record with out having all of the note menus appear all at once as seen in the image below. Thanks. enter image description here

1

There are 1 best solutions below

1
On BEST ANSWER

Part of the problem is that all of your FORMs have the same ID, so when the delete link is clicked it opens all objects with the same ID.

It would be a good idea to give each a unique ID by changing this line from...

<form ACTION="<%=MM_noteDeleteAction%>" METHOD="POST" name="Modal-Menu-DeleteNote-Form" id="Modal-Menu-DeleteNote-Form">

...to...

<form ACTION="<%=MM_noteDeleteAction%>" METHOD="POST" name="Modal-Menu-DeleteNote-Form" id="Modal-Menu-DeleteNote-Form_<%= RS_Notes.Fields.Item("Note_ID").Value %>">

In this case I changed the ID to include the note ID but you could use your index variable instead, just something to make it unique.

Then change your link and JavaScript to get the FORM relevant to the delete link clicked, by changing any references to the form by ID.

Change your link from...

<a href="#" id="Table-Content-DeleteNotes-Link">Delete</a>

...to...

<a href="#" id="Table-Content-DeleteNotes-Link" rel="<%= RS_Notes.Fields.Item("Note_ID").Value %>">Delete</a>

(So we can easily look up the ID in the click event)

And all the references from...

$("form[id=Modal-Menu-DeleteNote-Form]")

...to...

$("form[id=Modal-Menu-DeleteNote-Form_" + $(this).attr("rel") + "]")

It would, of course, be better to put this in a variable.

Note that there are several ways to do the above, and the way I have suggested is not necessarily the most efficient.