Question

Im using the following ajax code to submit data from a form to a servlet and then have the servlet send data back (havent quite mastered this part yet).

Side question, the variable id is obtained from the .jsp file by using

`<script> var id = '${id}' </script>`

Is there a better way to access this variable directly from inside a .js file that is loaded on the page ? It works as is but it seems messy.

$(document).ready(function () {
    $('.doAction').click(function () {
        var rel = parseInt($('.doAction:checked').attr('rel'));
        $.ajax({
            type: 'POST',
            dataType: 'json',
            cache: false,
            data: {
                rating: rel,
                itemID: id
            },
            url: 'Ratings',
            success: function (data) {

            }
        });
    });
});

The HTML form code is

<div id=holder>
    <div id="rating">
    Rating
        <form id="ratingsform" name="ratingsform">
            <input class="doAction" type="radio" name="ra1" rel="1" />
            <input class="doAction" type="radio" name="ra1" rel="2" />
            <input class="doAction" type="radio" name="ra1" rel="3" />
            <input class="doAction" type="radio" name="ra1" rel="4" />
            <input class="doAction" type="radio" name="ra1" rel="5" />
        </form>
    </div>
</div>

So what i want to happen is when a radio button is selected, the form is disabled so that new radio buttons can’t be pressed (so the servlet cant be spammed to death). When the servlet responds to the ajax post call, I would like to change the contents of the div “rating” to display the updated ratings and remove the ability to vote i.e remove the radio buttons / form. I have the server side code working except for figuring out how to return the values required which hopefully is pretty straight forward.

Any suggestions ?

Answer 1

well check my comments to understand the change

$(document).ready(function () {

    var id = '${id}' // you can have it here
    $('.doAction').click(function () {
        var rel = $('.doAction:checked').attr('rel'); // you need not parse to int because it will always string in parameter
        $('.doAction').prop('disabled', true); // to disable radio button
        $.ajax({
            type: 'POST',
            dataType: 'html', // change this since your servlet response is html not json
            cache: false,
            data: {
                rating: rel,
                itemID: id
            },
            url: 'Ratings',
            success: function (data) {
                   $('#rating').html(data); // assuming response as {"rating" : 4.4} 
            }
        });
    });
});