JQuery Not Working On Ajax Requested File!!

[Fait]

Hello,
I am trying to make a profile system I am currently working on the posts & comments (comments that are with in a post like facebook for example)

for some reason say if I alert something it will only work on the original posts since I got pagination the first 3 posts will automatic load then when the user scrolls to the bottom it will then load more the only probably the posts that are loaded when the user scrolls does not work with my ajax request but the first 3 do why is that?

I have also tried including another jquery file once the user has scrolled to the bottom and more posts are loaded (so that event) but all that does and duplicates and makes it alert more and more and just causes more issues there.

So the question is how can I include jquery on every single file or is there another solution to this? :/

Where i'm at now I will get rid of the pagination as it seems like it's too much to maintain at this point (as i'm only one developer making a social network like site/software) much rather pay $100,00 for a server to handle a site with no pagination then struggling with this stuff been trying for the last 3 days no sleep so going to sleep tonight obviously have too.





Here's the jquery wish there was another way to create a pagination without ajax so everything would be linked with the one jquery file.

$( ".comment-box" ).keydown(function(event) {
var comment_box_id = $(this).attr("id");

alert(9);



return false;
});







//If the scroll bar is at the bottom then do all of this

$(window).scroll(function(event) {
		if($(window).scrollTop() + $(window).height() == $(document).height()) {
			add_number_value-=3;

			$.ajax({
				url: "/gaming_site/core/profile/load-more-content.php?user=1&position="+add_number_value,
				method: "POST",
				data: {pid:pid,user_get_value:user_get_value},
				
				beforeSend: function( data ) {
					$('#loading_notice').html("<img src='http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/6-0.gif'></img>");
				},
				success: function (data) {
					
					$('#loading_notice').hide();
					$( "#profile_more_content" ).append( data);
	
				}	
				
			});
			
			
			
			
		}
	});

Hope I get some help and thanks all 🙂

 

[Fait]

i'm thinking about just using PHP plain pagination this social way is too much management

 

[Cosmic]

I think you're approaching the problem wrong. I would recommend having the server return JSON data with the posts that should be loaded, and then having the client add it to the page, rather than having the server return the HTML itself. That gives you more control over how things are formatted, and also lets you handle errors easier.

PHP:

$postsToSend = array(
    array(
        "id" => 1234,
        "content" => "Hello, World!"
    )
);

echo json_encode($postsToSend);

JavaScript:

var data = // get content using AJAX
var array = JSON.parse(data); 
var html = // build HTML using the array from JSON
$(".append").html($(".append").html()+html);

HTML:

<div class="profilePosts">
    <!-- Initial stuff that the server sends goes here -->
    <div class="append"></div>
</div>

 

[Fait]

Thanks For The Reply! 🙂
Yeah I try that and see how it goes I think that's a better idea and more professional just doing a couple more things then I let you know if that method works.

 

[Fait]

Just tried it and your script does not seem to be working

I am also in process of getting a job so sometimes busy Monday - Friday for 5 weeks so sorry if I don't reply quickly but I usually reply daily after hours 3PM+

 

[Fait]

Here's what I did exactly what you said maybe I need a data: field in the Ajax in the JQuery/Javascript but all i'm getting is a black page

<div class="profilePosts">
<!-- Initial stuff that the server sends goes here -->
<div class="append"></div>
</div>






<div class='append'></div>


<script src='js/jquery.js'> </script>
<script>




var data =
$.ajax({
url: "json.php",
type: "JSON",



error: function (data) {
alert("Error Loading Data")

},

success: function (data) {

alert('Loaded Data!')



},

});

















var array = JSON.parse(data);
var html = // build HTML using the array from JSON
$(".append").html($(".append").html()+html);










</script>

 

[Fait]

Update I added the parse arrays etc under the success: function and now I am getting undefined two times which tells me it's getting how much data there is but can't read it so how do I create a json veriable in jquery to read the PHP page.

I have not worked with JSon that much so I apologize if I sound dumb compared to you.