PHP associative array solution to work with jQuery AJAX

Question

I have JavaScript as below;

<script type="text/javascript">
$(document).ready( function() {
var i = 1;
$.ajax({
  type: 'POST',
  url: 'ajax.php',
  data: 'id=' + i,
  dataType: 'json',
  cache: false,
  success: function(result) {
    $('.content').each(function(index){
      if((result[index])){
        $(this).css({ 'background-image':'url(images/' + result[index] + '.jpg)' });
      }else{
        $(this).css({ 'background-image':'url()' });
      }
    });
    $('.title').each(function(index){
      if((result[index])){
        $(this).html(result[index]);
      }else{
        $(this).html("&nbsp;");
      }
    });
  },
  });
});
</script>

Which, with the help of my php file;

<?php
$id = $_POST["id"];
$array = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20);
$quantity = 6;
$offset = ($id-1)*$quantity;
$array2 = array_slice($array,$offset,$quantity);
echo json_encode($array2);
?>

changes background image of my table;

<table style="width: 100%; border: solid 1px #666600; min-width: 800px" cellpadding="0" cellspacing="0">
<tr>
<td id="prev">prev</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td id="next">next</td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

And everything works well.

But I want to display some data, related with the numbers in array, say some names, name1 to name20 with respect to array elements. In my page, the table cells having class="title" get populated with array elements (here image names). But I want class="title" filled with names 1-20, which should be delivered along with array elements like an associative array. I think associative array will be the best option.

How can I do this using JavaScript and jQuery?

Note: don't worry about PHP. If somebody suggest a specific format to echo data in PHP, I can make it out. I am a beginner.

I am confused. Is you question how to create an associative array in javascript? You could just output the names from PHP if you don't need them to dynamically change. — Dan
– Dan, Commented Jun 19, 2011 at 17:39
I want them to dynamically change.. :) ... I need a PHP format solution and again a javascript to decode the data and use it as I mentioned.. The question is a prototype and the original syntax is different.. Thats y.. :) — Alfred
– Alfred, Commented Jun 19, 2011 at 17:44
I want to display name1 inside cell below 1st cell, name2 in 2nd and so on... But the data should be retrieved from a single array.. — Alfred
– Alfred, Commented Jun 19, 2011 at 17:46
Have you tried the json_encode function in PHP with an associative array? — Dan
– Dan, Commented Jun 19, 2011 at 17:50
A tip: You can create the plain integer array like this: $array = range(1, 19); — Betamos
– Betamos, Commented Jun 19, 2011 at 18:03

ridcully · Accepted Answer · 2011-06-20 13:16:40Z

6

An associative array will become an javascript object with json_encode

Normal array like array(1,2,3) ==json_encode ==> [1,2,3]

Associative Array like array( 'name' => 1, 'name2' => 2 ) ==json_encode ==> { name :1 , name2: 2}

So result[index] will not work anymore.

The best way is to send an Object with two Arrays in it :

PHP:

array( 'classes' => array('name1','name2') , 'ids' => array(1,2));

In Javascript you can access it like this:

result.classes[index]
result.ids[index]

answered Jun 20, 2011 at 13:16

ridcully

2941 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

PHP associative array solution to work with jQuery AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related