JQuery array for use in AJAX

Question

I'm not overly confident in my own abilities but here goes. I want JQuery to find the data attribute of all elements with a particular class. Then I want it to add them to the ajax dataString array.

There are 6 elements with that class all of which have the data attribute. Rather then include them all by id attributes surely their is an easier way. Would this work.

Here goes

var data[] = $('.sidescroller').attr('data');

var dataString = 'function=' + scripts + '&data[]=' + data[];

//execute PHP
$.ajax({
        type: 'POST',
        data: dataString,
         url: '<?php echo $thisposturl;?>?scripts',

Any ideas how to do it.

Marvellous

What are trying to achieve here? do you want to set the data attribute values of all element with class sidescroller? If so how do you want the data, should they be coma separated? — Arun P Johny
– Arun P Johny, Commented Apr 27, 2011 at 11:26

Alnitak · Accepted Answer · 2011-04-27 11:27:11Z

3

Firstly, No, .attr() will only get the attributes of the first element in the list

var data = $('.sidescroller').map(function() {
    return $(this).attr('data');
}).get();

Secondly, don't construct query parameters by hand, it's error prone and can also be abused:

Send the data parameter as a set of key-value pairs thus:

data: {
    'function': scripts,
    'data': data
}

answered Apr 27, 2011 at 11:27

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

1 Comment

mekwall Over a year ago

+1 Good solution! However, I do wish to point out the incorrect usage of the data attribute. Please see my revised answer for further info on this topic.

omerkirk · Accepted Answer · 2011-04-27 11:26:38Z

0

I think the .attr() function works on the first element among the matched elements a better way would be to use the map function.

var dataArr = [];
$(".sidescroller").map(function(){
    dataArr.push($(this).attr("data"));
});

answered Apr 27, 2011 at 11:26

omerkirk

2,5271 gold badge17 silver badges9 bronze badges

Comments

kim3er · Accepted Answer · 2011-04-27 11:30:35Z

0

var dataString = 'function=' + scripts;

$('.sidescroller').each(function() {
    dataString += '&data=' + $(this).attr('data');
}       

//execute PHP
$.ajax({
 type: 'POST',
 data: dataString,
 url: '<?php echo $thisposturl;?>?scripts',

Would this work?

answered Apr 27, 2011 at 11:30

kim3er

6,5365 gold badges44 silver badges73 bronze badges

4 Comments

kim3er Over a year ago

@Alnitak's is probably the better option.

Alnitak Over a year ago

and if 'data' should happen to contain characters that should have been escaped?

kim3er Over a year ago

@Alnitak are you looking for some sort of prize? I already acknowledged that yours was the better option.

Alnitak Over a year ago

Nah, I've reached my rep cap already - I was just pointing out exactly why you shouldn't build query strings by hand.

Arun P Johny · Accepted Answer · 2011-04-27 11:33:09Z

0

I think what you are looking for is

var data= [];
$('.sidescroller[data]').each(function(){
    data.push($(this).attr('data'))
});
var strdata = data.join(",");
alert(strdata );

You can find a working sample here.

answered Apr 27, 2011 at 11:33

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

mekwall · Accepted Answer · 2011-04-27 11:48:12Z

0

According to HTML5 specs. custom data attributes should be named like this: data-name. Then you can use .data to fetch the data. Example below:

HTML

<div id="foo" class="has-data" data-test="foo"></div>
<div id="bar" class="has-data" data-test="bar"></div>

JavaScript

var data = {};
$(".has-data").each(function(){
    data[this.id] = $(this).data("test");
});

$.post('/', data);

edited Apr 27, 2011 at 11:48

answered Apr 27, 2011 at 11:28

mekwall

29.1k6 gold badges78 silver badges77 bronze badges

2 Comments

Alnitak Over a year ago

two problems - 1. .map() returns a jQuery object, not an array - 2. data should be a key/value pair object.

mekwall Over a year ago

@Alnitak, oh yes you are right about this, thanks for pointing it out. Thought about it the wrong way, so I will revise my answer.

Collectives™ on Stack Overflow

JQuery array for use in AJAX

5 Answers 5

1 Comment

Comments

4 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related