Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have an ASP.NET MVC 3 website - on a particular page I have used the datatables.net plugin for a table. I have included in my markup a checkbox to the left of the table that when clicked will highlight the row. The user could select multiple rows. When the user clicks the button I want to pass the IDs of all the row clicked back to my Controller to then go and do some work in a DB.

I want to pass back the ids in JSON format so it will be easy to deserialize the data in my controller.

So far this is were I have got too.

$('#UseCars').click(function (event) {

    var cars = new Array();

    carsTable.find("tr input:checkbox").each(function () {

        var car = new Object();
        //alert($(this).attr("CarID"));
        car.ID = $(this).attr("CarID");
        //alert(car.ID);

        cars.push(car);

    });

    var jsonstring = $.toJSON(cars);

    $('#CarsList').val(jsonstring);

});

So on my cshtml I have a hidden for of CarsList which is a string on my model. When I set a breakpoint on my method in the controller which the UseCars button calls I can see the value of model.CarsList is a jstrong string but it is finding all the checkboxes in the table and not the particluar ones seletec and it is not pulling the id value of the row out either.

Can anyone see something I am missing here?

EDITED TO INCLUDE CSHTML MARKUP

So this is the markup I have on my page for the table.

   <table id="carsTable" style="margin-left: 2px; width: 200px">
                            <thead>
                                <tr>
                                    <th class="ui-widget-header">
                                        <input id="SelectAll" type="checkbox" />
                                    </th>
                                    <th class="ui-widget-header table-header">
                                    </th>
                                    <th class="ui-widget-header table-header">
                                        Age of Car (Years)
                                    </th>
                                    <th class="ui-widget-header table-header">
                                        Car Name
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var item in Model.CarList)
                                {
                                    <tr>
                                        <td class="table-data">
                                            <input id="SelectIndividual" name="Select" type="checkbox" />
                                        </td>
                                        <td id="InvoiceId">
                                            @Html.DisplayFor(modelItem => item.CarID)
                                        </td>
                                        <td class="table-data">
                                            @Html.DisplayFor(modelItem => item.CarAge)
                                        </td>
                                        <td class="table-data">
                                            @Html.DisplayFor(modelItem => item.CarName)
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>

And then in my js file for the page for the DataTable table config the ID column is set to bvisible: false so it is not actually shown to the user. I changed the id select as Daniel mentioned so it now looks like - car.ID = $(this).next("CarId");

In my breakpoint in the controller I can see info is now returned but not exactly what I was expecting - i.e I was hoping my string would be something like [{123}, {124}] but instead I am getting output like:

"[{\"ID\":{\"length\":0,\"prevObject\":{\"0\":{\"jQuery183036556275907670765\":227},\"context\":{\"jQuery183036556275907670765\":227},\"length\":1},\"context\":{\"jQuery183036556275907670765\":227},\"selector\":\".next(CarId)\"}}]"
share|improve this question

2 Answers

up vote 1 down vote

Try with the following selector $("td input:checked")

$("td input:checked").each(function (index, para) {
    var car = new Object();
    //alert($(this).attr("CarID"));
    car.ID = $(this).attr("CarID");
    //alert(car.ID);

    cars.push(car);
});

Even better is to use table id too , like $("#myTableId td input:checked").each...

share|improve this answer
Thanks for your response - this is kind of working in that my value now in my controller shows [{},{},{}] as the string value - this was when I selected three rows from the table. However it is not populating the id into the string? – KOL Dec 24 '12 at 13:44
show your generated html are you sure about the CarID attribute being there ? is the attribute is inside the checkbox ? or in the element that is after the checkbox (which you can access with $(this).next()) – Daniel Dec 24 '12 at 13:54
I have edited the question to include the cshtml – KOL Dec 24 '12 at 19:04
@KOL , post your generated HTML , I'm not familiar with ASP , in general if $(this)1 = your checkbox , than $(this).parent()` is the td and $(this).parent().next() is the next td and $(this).parent().next().first() is the element inside the next td , take a good look at this : api.jquery.com/category/selectors – Daniel Dec 24 '12 at 20:13
up vote 0 down vote

Replace

carsTable.find("tr input:checkbox").each(function () {

With

carsTable.find("tr input:checked").each(function () {

jquery/js debugger is not reliable use console.log() instead

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.