Updating input in each row with ajax

Question

I have a table showing a list of 'sightings' in my case and each specific column can be updated as the value are displayed in field, etc. Each individual row has an update button on it where I would like to click when I have finished updating that particular row. This is my forEach loop displaying all the entries:

<c:forEach var="mySightings" items="${mySightings}">    
            <tr>
                <td><input name="id" class="data sighting_id" disabled value="${mySightings.id}"/></td>
                <td><input name="total_pests" type="number" value="${mySightings.total_pests}"/></td>
                <td><input name="date" type="date" value="${mySightings.date}"/></td>
                <td><input name="username" disabled value="${mySightings.username}"/></td>
                <td><textarea name="information">${mySightings.information}</textarea></td>
                <td>
                    <button class="update_sighting btn btn-success">Update</button>
                </td>
                <td>
                    <button class="delete_sighting btn btn-danger" value="${mySightings.id}">Delete</button>
                </td>
            </tr>       
</c:forEach>

This is my Ajax function, which I think is definitely wrong:

$(".update_sighting").click(function(){
    $.ajax({
        type: "POST",
        url: "${pageContext.request.contextPath}/updateSighting",
        data: $(this).serialize(),
        success: function(response) {
            $("#alert").show();
            alert("Submitted");
            $(".errormsg").hide();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
            alert("Status: " + textStatus); alert("Error: " + errorThrown); 
        } 
    });
});

Do I need to change something to my ajax code? I dont know what I should do next? And my Controller which handles the request:

@RequestMapping(value = "/updateSighting", method = RequestMethod.POST)
public @ResponseBody String updateUser(Sighting sighting, Model model) {
    sightingsService.updateSighting(sighting);
    List<Sighting> sightings =  sightingsService.getAllSightings();
    model.addAttribute("sightings", sightings);
    return "allSightings"; 
}

Please help, Thanks

Rory McCrossan · Accepted Answer · 2013-10-17 12:26:25Z

1

The issue is with serialising the data. You are calling it on the button element instead of a form, but even then that would serialise the entire form, not just the row which was clicked on. So you need to build the object to serialise manually:

$(".update_sighting").click(function(){
    var $row = $(this).closest('tr');
    $.ajax({
        type: "POST",
        url: "${pageContext.request.contextPath}/updateSighting",
        data: {
            id: $('input[name="id"]', $row).val(),
            total_pests: $('input[name="total_pests"]', $row).val(),
            date: $('input[name="date"]', $row).val(),
            username: $('input[name="username"]', $row).val(),
            information: $('input[name="information"]', $row).val()
        },
        success: function(response) {
            $("#alert").show();
            alert("Submitted");
            $(".errormsg").hide();
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
            alert("Status: " + textStatus); alert("Error: " + errorThrown); 
        } 
    });
});

answered Oct 17, 2013 at 12:26

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Maff Over a year ago

I just tried to implement this. It still has not managed to update. I do get an alert message saying "Submitted", but when I refresh the page the updated content is not there.

Rory McCrossan Over a year ago

What do you mean by update content? Your success handler is showing/hiding a couple of div elements, it does not do anything with the response coming back.

Maff Over a year ago

What I mean is when I go to another page, then return back to this page to view all the listings. The row I changed previously prior to returning to this page has not got the changes.

Rory McCrossan Over a year ago

Have you checked your server-side code is updating the database correctly?

Maff Over a year ago

Ok so I got it working now. It does update, but leaves the fields blank after I click update? Any ideas?

|

Collectives™ on Stack Overflow

Updating input in each row with ajax

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related