How to pass parameter with modal window using jQuery?

Question

I receive list of feeds.Each feed has unique number feed.id.

<c:forEach items="${feedList}" var="feed">
    <td><input readonly="readonly" id="feedId"
        value="<c:out value="${feed.id}" />" /></td>
    <td><c:out value="${feed.name}" /></td>
    <td><a
        href="FeedController?action=delete&id=<c:out value="${feed.id}"/>">Delete</a></td>
    <td><a
        href="FeedItemController?action=feedItemListAsc&id=<c:out value="${feed.id}"/>">View</a>
    </td>
    <td><a href="#dialog" name="modal">Edit</a></td>
</c:forEach>

Pressing edit opens modal window with input name:

    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag



        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({
            'width' : maskWidth,
            'height' : maskHeight
        });

        //transition effect        
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);


    });

<div id="boxes">
            <div id="dialog" class="window">
                <table class="userInput" border="1">
                    <tr>
                        <td colspan="2"><input type="text" id="feedName" />
                        </td>
                    </tr>

                    <tr>
                        <td><input type="submit" id="renameFeed" value="Submit"></td>
                        <td>
                             <a href="#" class="close">Close it</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="mask"></div>
</div>

and finally getting name from modal window and id parameter from forEach block with ajax:

$('#renameFeed').click(function() {
            var name = $('#feedName').val();
            var id =  $('#feedId').val();
            var action = 'edit';
            var data = "feedName=" + name + "&id=" + id + "&action=" + action;
            $.ajax({
                type : "Get",
                url : "FeedController",
                data : data,
                success : function(result) {
                    if (typeof (result) != 'undefined') {
                }
                },
                error : function(error) {
                    console.log("error" + error);
                }
            });
        });

After that i want to change name in database using servlets and in my html page. I need to get feed.id from for each when edit button was pressed and then when <input type="submit" id="renameFeed" value="Submit"> was pressed send the value to servlets. Can easily get feed.name but have problem with passing feed.id Maybe someone knows better solution with renaming using modal window and jQuery ajax?

id should be unique. Try to generate dynamically by adding numeric to that. — newstackoverflowuser5555, May 18 '15 at 17:16
this id comes with each feed in list, i am just displaying it. In my case i need to retrieve it and use in ajax, but have same id all the time when pressing edit button for different feeds — Ruslan Lomov, May 18 '15 at 17:18
you need to post the function that you use to open up the dialog too.. — Nomesh DeSilva, May 19 '15 at 04:21

score 0 · Accepted Answer · edited May 23 '17 at 10:26

You're doing couple of mistakes here:

setting the same ID (feedId) for all the input fields inside the loop.
you're not passing the feedId into the #dialog like your delete option.

So those are the reasons you're getting the same value for feedId. (I think you're struggling to pass the feedId to the dialog??)

try this way: (just a guidance, not tried!)

in your JSP, try setting the proper ids:

<c:forEach items="${feedList}" var="feed"  varStatus="theCount">
<td><input readonly="readonly" id="feedId${theCount.index}"
    value="<c:out value="${feed.id}" />" /></td>
<td><c:out value="${feed.name}" /></td>
<td><a
    href="FeedController?action=delete&id=<c:out value="${feed.id}"/>">Delete</a></td>
<td><a
    href="FeedItemController?action=feedItemListAsc&id=<c:out value="${feed.id}"/>">View</a>
</td>
<!-- <td><a href="#dialog" name="modal">Edit</a></td> -->
<td><a href="#dialog" onclick='openEditDialog(<c:out value="${feed.id}"/>)' name="modal">Edit</a></td>

You haven't posted your function to open the #dialog. but it should be something like this. look how to pass the feedId to your modal.

function openEditDialog(id) {
  $("#dialog").data("feedId", id).dialog({
    autoOpen: true,
    modal: true,
    buttons: {
      "Edit": function() {
        alert($(this).data('feedId'));
      }
    }
  });
}

how you could pass your feedId to the servlet is:

$('#renameFeed').click(function() {
  var name = $('#feedName').val();
  var id = $('#feedId').val();
  var action = 'edit';
  var data = "feedName=" + name + "&feedId=" + id + "&action=" + action;

  $.ajax({
    type: "Get",
    url: "FeedController",
    data: data,
    success: function(result) {
      if (typeof(result) != 'undefined') {
        console.log("result:" + result);
      }
    },
    error: function(error) {
      console.log("error:" + error);
    }
  });
});

Because of formatting issues, I just used the snippets option. sorry about that.
just an idea, try and see !

UPDATE: good example is on this LINK

Thanks for your answer, I think your know what i'm trying to do. Will try modify my code later and tell you. Have a nice day! — Ruslan Lomov, May 19 '15 at 08:56

How to pass parameter with modal window using jQuery?

1 Answers1