I have an MVC system I need to make a request in ajax to display content on demand, I am unable to do by data_url

Asked

Viewed 127 times

1

Esse e o esquema MVC

(function($){
	$.fn.loaddata = function(options) {// Settings
		var settings = $.extend({
			loading_gif_url	: "https://zippy.gfycat.com/ImpoliteLivelyGenet.gif", //url to loading gif
			end_record_text	: 'Não existe mais conteudo!', //no more records to load
			data_url 		: 'controllers/conteudo-controller.php', //url to PHP page
			start_page 		: 1 //initial page
		}, options);

		var el = this;
		loading  = false;
		end_record = false;
		contents(el, settings); //initial data load

		$(window).scroll(function() { //detact scroll
			if($(window).scrollTop() + $(window).height() >= $(document).height()){ //scrolled to bottom of the page
				contents(el, settings); //load content chunk
			}
		});
	};
	//Ajax load function
	function contents(el, settings){
		var load_img = $('<img/>').attr('src',settings.loading_gif_url).addClass('loading-image'); //create load image
		var record_end_txt = $('<div/>').text(settings.end_record_text).addClass('end-record-info'); //end record text

		if(loading == false && end_record == false){
			loading = true; //set loading flag on
			el.append(load_img); //append loading image
			$.post( settings.data_url, {'page': settings.start_page}, function(data){ //jQuery Ajax post
				if(data.trim().length == 0){ //no more records
					el.append(record_end_txt); //show end record text
					load_img.remove(); //remove loading img
					end_record = true; //set end record flag on
					return; //exit
				}
				loading = false;  //set loading flag off
				load_img.remove(); //remove loading img
				el.append(data);  //append content
				settings.start_page ++; //page increment
			})
		}
	}

})(jQuery);

$("#results").loaddata();
.wrapper{width: 500px;margin: 0 auto;font-family: Georgia, "Times New Roman", Times, serif;}
.wrapper > ul#results li{margin-bottom: 1px;background: #f9f9f9;padding: 20px;list-style: none;}
.loading-image {display: block;margin: 5px auto;}
.end-record-info {text-align: center;border-top: 1px solid #ddd;padding: 5px 0;background: #f9f9f9;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
		<ul id="results"><!-- results appear here as list --></ul>
</div>

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.