jquery ajax problem

Question

A few days ago I posted this question: switch statement and loops using jquery/javascript
which ended up with me creating a series of divs using this code

  for (var i = 1; i <= $("#play option:selected").text(); ++i) {
    $("#play_"+i).slideDown().find("input").addClass("someClass");
  }

My problem is that I now need to get the value of each #play div and send that to a php script via ajax. If I had a set number of divs I could do that easily, but how do I do it when I don't know how many #play there will be?

FURTHER DESCRIPTION!

It seems I didn't explain myself clearly in my original question so I will try and explain things better.
I want to make an AJAX call to a remote php script using the $.post jQuery method. I can send information the remote script needs very easily. Here is an example:

     $("#submit").click(function() {
              $.post("../includes/process.php",
                     {
                       play_0: $("#play\_0").val(),
                       play_1: $("#play\_1").val(),
                       play_2: $("#play\_2").val(),
                       play_3: $("#play\_3").val(),
                       play_4: $("#play\_4").val()                                
                     },
                     function(data) {
                       $("#activityWindow").empty().append(data);       
              });
    });

The php script can now access this information through the $_POST array - just like a normal form submission.
If I have generated divs (#play_) using a loop, I can't hard code the $.post method in the way I have above. Really I need to include a loop in the syntax somewhere - I just can't work out how to do it! I hope this has made things clearer.

Josh Stodola · Accepted Answer · 2009-07-25 20:50:07Z

3

jQuery has a attribute startsWith selector, then you can easily loop through them to create your object...

// Create an empty object
var data = {};

// Get all <div> elements that have an id attribute that starts with "play_"
var divs = $("div[id^=play_]");

// Loop through the <div> elements, using jQuery's each function
divs.each(function() {
  // Get the current div we are looping with jQuery
  var div = $(this);

  // Get the ID of the current div
  var id = div.attr("id");

  // Get the value of the current div
  var val = div.html();


  // Object properties can be set dynamically like this in Javascript
  data[id] = val;
});

// Loop is done, all properties have been set
alert(data.play_0);

edited Jul 25, 2009 at 20:50

answered Jul 24, 2009 at 19:07

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

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

10 Comments

DLH Over a year ago

why would you use innerHTML when jQuery has some very nice functions for handling that?

thedz Over a year ago

It's basically what html() would do if he used that: dev.jquery.com/browser/trunk/jquery/src/manipulation.js#L152

Josh Stodola Over a year ago

Exactly. There's really nothing "very nice" about the html function, but I edited my answer anyways.

musoNic80 Over a year ago

I understand how to use this selector to access the elements, but I don't know how to combine it with making an ajax request. Ordinarily I would attach $.post to a function (eg a click) of a certain element and then send data using the syntax - something: $("#something").val() - this would then be accessed in php by $_POST['something']. How can I send an unknown number of elements?

Josh Stodola Over a year ago

More explanation, please. Makes no sense. What do you need to send?!

|

Elzo Valugi · Accepted Answer · 2009-07-24 19:12:21Z

0

try this:

var x = $("[id^=play_]");
console.log(x.length);

answered Jul 24, 2009 at 19:12

Elzo Valugi

28.1k17 gold badges97 silver badges115 bronze badges

Comments

DLH · Accepted Answer · 2009-07-24 19:16:55Z

0

Could you use the class in your selector like $("div.someClass").each(function() { This would only work if these are the only divs to use that class. If that's not the case you could just add another class to them.

Inside the function you could add the value to an array.

Edit: It would be better to use the "div[id^=play_]" selector. If you want to grab the value from the input and put it in an array you could say:

$("div[id^=play_] input").each(function() {
   valueArray.push($(this).val());
});

edited Jul 24, 2009 at 19:16

answered Jul 24, 2009 at 19:08

DLH

2,8313 gold badges25 silver badges30 bronze badges

Collectives™ on Stack Overflow

jquery ajax problem

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related