Get JSON data via AJAX

[Ivan Ivković]

<script  type="text/javascript">

	var container = document.getElementById('container');
	var wall = new Masonry( container, {isFitWidth: true });

	var boxMaker = {};

	boxMaker.makeBoxes = function() {
		var boxes = [],
		count = 8;

		for(var i=0; i < count; i++ ) {
			var box = document.createElement('div');
			text = document.createElement('img');
			text.src = '/thumb.php?pic=content/pics/9/133880637624535.jpg&h=200&w=210"';

			box.className = 'element item masonry-brick';
			box.appendChild( text );

			boxes.push( box );
		}
		return boxes;
	};

	window.onscroll = function(){	
		if(($(document).height() - $(window).height() - $(document).scrollTop()) < 100){
			var container = document.getElementById('container');
			var wall = new Masonry( container, {isFitWidth: true });
			var boxes = boxMaker.makeBoxes();

			for (var i=0; i < boxes.length; i++) {
				container.appendChild( boxes[i] );
			}
			wall.appended( boxes );
		}
	}

	</script>

 

This is the code so far.

 

My task is to fill the masonry container (using vanilla masonry by David Desandro) with infinite scroll data.

 

 

Instead of this (the info being pushed into container, made this just to test inifinite scrolling):

			var box = document.createElement('div');
			text = document.createElement('img');
			text.src = '/thumb.php?pic=content/pics/9/133880637624535.jpg&h=200&w=210"';

			box.className = 'element item masonry-brick';
			box.appendChild( text );

 

I need something like this:

 

var request = $.ajax({
			url: '/ajax/infinite_scroll/',
			type: 'POST',
			data: {last_pic_id : $('.item :last').attr('id')},
			dataType: 'json'
		}); // THIS SHOULD RETURN DATA ABOUT MORE IMAGES like... their IDs, SRC, link to albums etc.

		request.done(function(data) {
			var box = document.createElement('div');
			text = document.createElement('img');
			text.src = data['pic_src'];

			box.className = 'element item masonry-brick';
			box.appendChild( text );
		});

 

But I never worked with JSON in AJAX before. So my question is how can I request JSON data and return JSON data with PHP?

 

By the way, my work is on http://pixpresso.mycyberlove.com/ if you wanna look at more code.

[smoseley]

<?php
header("Content-Type: application/json");

$data = array(
    "key" => "value",
    "key2" => "value2"
);

echo json_encode($data);

[Ivan Ivković]

Thanks man! How can I get that data in javascript?

[smoseley]

$.ajax({

    url: '/myscript.php'

}).done(function (data) {

    console.log(data);

});

[Ivan Ivković]

K I understand. Now I have some other problem.

 

My new code:

 

var request = $.ajax({
			url: '/ajax/infinite_scroll/',
			type: 'POST',
			data: { last_id : $('.item:last').attr('id') },
			dataType: 'json'
		});

		request.done(function(data){
			alert(data);
		});

		request.fail(function(jqXHR, textStatus){
			alert( "Request failed: " + textStatus);
		});

 

URL exists, $('.item:last').attr('id') value exists, I don't know what's wrong.

You can test it on pixpresso.mycyberlove.com if you'd like.

I get "PARSERERROR" error.

[Ivan Ivković]

My PHP on /ajax/infinite_scroll/

 

public function infinite_scroll(){
	header("Content-Type: application/json");

	$data = array(
		'key' => 'value',
		'key2' => 'value2'
	);

	echo json_encode($data);
}

[smoseley]

Look at the response in your Net tab:

 

<br />

<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home/cyber/public_html/pixpresso/views/pages/ajax/Controller.php:1) in <b>/home/cyber/public_html/pixpresso/views/pages/ajax/Controller.php</b> on line <b>135</b><br />

{"key":"value","key2":"value2"}

 

You have some whitespace somewhere in your code.

[Ivan Ivković]

What's a net tab? Ok I'll go check.

[Ivan Ivković]

It wasn't whitespace, it was encoding in UTF8, now it's without BOM. Thank you! You've beeen very helpful, everything is in order now.