jQuery ajax call, pass data: from looping through elements

Question

Is there a way to loop through elements and pass the element value in the data: {} option of $.ajax()?

eg.

$res = pg_query($con, "select * from tbl_salary_deductions");       
    while($row = pg_fetch_assoc($res)) {    
    echo "<input type=checkbox class='dlccat' id='" .  $row['dlcid']. "'> Category " . $row['dlccategory'] . "<br>";
}

creates the checkboxes. Then in the call pass only the checked ones so I can process them server side:

$.ajax({
        url: 'ajax/register_driver.php',
        data: {
            //dlccat
            $.each($(".dlccat:checked"), function() {
                dlcat + $(this).id: true,
            });
        },
        success: function () {

        },
        error: function () {
            alert('DATA UPDATE FAILED. PLEASE TRY AGAIN!');
        }
    })

enter image description here

Need to save in the db the values of the checked items as per pic.

Rahul Nanwani · Accepted Answer · 2015-05-31 19:58:10Z

2

$.ajax() is the implementation of XMLHttpRequest that is exposed by jQuery. Consider it to be a function call to which you are passing initialisation parameters like url, data, dataType etc. The "data" option that you pass to $.ajax should be an object. It wouldn't be evaluated/run as a function as you are expecting in your case.

The above code would give a syntax error because you are trying to evaluate a loop (the each statement) inside an object.

The correct way would be to first form an object using the each statement and then pass that object to the $.ajax method.

Would be something like this.

var obj = {};
$(".dlccat:checked").each(function() {
    obj["dlcat_" + this.id] = true;
});

//to add other params, extend this object
$.extend(obj, {"otherParam" : "otherParamsValue"});

Then in $.ajax, pass this obj variable as data. They would be received as GET params

$.ajax({
    url: 'ajax/register_driver.php',
    data: obj,
    success: function () {

    },
    error: function () {
        alert('DATA UPDATE FAILED. PLEASE TRY AGAIN!');
    }
})

edited May 31, 2015 at 19:58

answered May 31, 2015 at 19:28

Rahul Nanwani

1,2871 gold badge11 silver badges22 bronze badges

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

5 Comments

Mackan Over a year ago

Nice answer, but for "completness" you might want to introduce some params in the each, like function(i, obj) { obj.id }. If not it's at least this.id, not $(this).id :)

Fabrizio Mazzoni Over a year ago

Getting there. The problem is that I have to pass as query string something like &dlcat_1=true&dlcat_5=true dlcat is not a variable but a string

Fabrizio Mazzoni Over a year ago

And supposing I have other parameters I want to pass manually? Eg. "dldrv": "34", how can I append these to the ajax request? Or do I have to include them in the object?

Mackan Over a year ago

@FabrizioMazzoni Ajax will take care of that for you. Put everything in the object. This obj[dlcat + $(this).id] = true should be changed to obj['dlcat_' + this.id] = true though.

Fabrizio Mazzoni Over a year ago

Thanks. It is working if I print out the object with console.log(obj). The issue is now that with a $_REQUEST[] in php the string is filled with strange characters. Is there a way ti prepare it so it gets passed properly? Sorry for the inconvenience!!

Collectives™ on Stack Overflow

jQuery ajax call, pass data: from looping through elements

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related