Question

Basically I have a list of files composed from a foreach loop that all have the same code except for the name, which carries the file_id for each file. My problem is that when I added an on-click pop-up event I lose the ability to fetch the current $(".flag") attribute name. Is there a way that I can pass it along the way so I can use it in the end?

PHP: (the user sees the link which they can click…remember there are several of these as a result from the foreach loop. I’m showing one for example)

echo "<td><a href='#' class='flag' name='$files[id]' >Click Here</a>  ( $files[nums] )</td>";

jQuery: (on-click this will happen)

$(".flag").live('click', function() {
    $(".pop").show("slow"); 
    return false;
});

HTML: this div will popup

<div class="pop">
      <form method="post" id="new_folder" >
          <p><label for="folder">Reason for Reporting?</label><textarea id="report_reason" name="report_reason" maxlenght="100" style="resize:none" cols="30" rows="5">Please limit your response to 100 characters.</textarea></p>
          <p><input type="submit" value="Submit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
      </form>
  </div>

jQuery: on submit I need to send the current $files['id'] and textarea value via ajax. The textarea sends the correct data, but the $(".flag") instead of being the id of the selected link it is the id of the first fetched id from the foreach loop

$("#message_submit").on("click", function(e){
      var fileID = $(".flag").attr("name");
      var text = $("#report_reason").val();
      $(".pop").hide("slow"); 

      $.ajax({
              url: '<?php echo base_url().'home/report_file';?>', 
              type: 'POST',
              data: { val: fileID, val2: text },
              dataType: 'json', 
              success: function(output_string){
                  $(".success").text("You have flagged this file!!").show().css({"color" : "green", "margin-top" : "10px"});
                  $(".success").fadeOut(10000);   
              }
      });
      return false;
});

Answer 1

You can save the .flag link being clicked and later use it.

var flagClicked;

$(".flag").live('click', function() {
    $(".pop").show("slow"); 
    flagClicked = $(this);
    return false;
});

$("#message_submit").on("click", function(e){
      var fileID = flagClicked.attr("name");
       ....