CODEWITHSUNDEEP
javascriptjqueryajaxspringspring-mvc
Maff
Maff

Reputation: 1032

Updating input in each row with ajax

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

Upvotes: 1

Views: 628

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337627

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); 
        } 
    });
});

Upvotes: 1

Related Questions