accesing getJson for image anchor

Question

I'm trying to access a getJson array I created to add image references to a option list tag. I'm trying to levy it so that user can also click a link to go to the next page. I'm fairly certain the syntax is wrong as I'm not very accustomed to jquery, could someone please help me out ?

$(function(){
  $("select#chapters").ready(function(){
$.getJSON('/pageCall.php',{chapters:$('#chapters').val()}, function(data) {
    var select = $('#page1');
    var select = $('#page2');
    var options = '';

    var pageNumber = 1;
    var nextPage = 0;
    var prevPage = 0;
    var totalPages = data.length;

    var doNext = function(){
            if( pageNumber > totalPages)
            {
                pageNumber = totalPages;
            }
            nextPage = pageNumber + 1;
             $('#mangaImage').attr('src', data[nextPage].('imageLocation'));
        };

     $('.nextPage').unbind().click(function(){
         doNext();   
         })

     $.each(data, function(index, array) {
             options += '<option value="' + array['imageLocation'] + '" >' + array['pageNumber'] + '</option>';

        });
         $("select#page1").html(options);
         $("select#page2").html(options); 
   });
  })
})

Answer 1

It's hard to tell for sure, but it looks like your problem might be this line:

$('#mangaImage').attr('src', data[nextPage].('imageLocation'));

Based on what you have later, it looks like that line should instead be this:

$('#mangaImage').attr('src', data[nextPage]['imageLocation']);

You also declare the variable select twice, but never use it:

var select = $('#page1');
var select = $('#page2');

And this is just nit-picking, but you don't really need to define doNext as variable, you could just pass the same anonymous function to the click event. At worst, the click event binding could be cleaned up like so:

$('.nextPage').unbind().click(doNext);

Lastly, you're missing a semi-colon at the end of the click event binding.