Menu
So im new in ajax and not so "pro" at php, i need help.
I have created an ajax call that on document.ready shows posts from DB
$.ajax({
type:"POST",
url:"testphp.php",
datatype: 'json',
success:function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = " ";
for(i = 0; i < arr.length; i++) {
out +=
"<div id='"+arr[i].ID+"' class='grid-item "+arr[i].shape+"'>
<div class='grid_content'>"+arr[i].img_holder+"</div><div class='grid_title red'>"+arr[i].naslovhj+"</div>
<div class='content_grid'></div>
</div>"
}
out += " ";
document.getElementById("grids").innerHTML = out;
console.log("uspjelo");
},
error:function(){
$("#ea").html('There was an error updating the settings');
}
});
Content in testphp.php is :
$conn = new mysqli($servername, $username, $password, $dbname);
$myArray = array();
if ($result = $conn->query("SELECT * FROM postovi")) {
$tempArray = array();
while($row = $result->fetch_object()) {
$tempArray = $row;
array_push($myArray, $tempArray);
}
echo json_encode($myArray);
}
$result->close();
How do i make it so that it displays 10 posts per page , and that new page is aped the bottom of this one ( when i scroll to bottom of page, it appends next 10 posts )
i tried few infinite scrolls, but they are not working how i imagined they would.
EDIT : Would be cool if this can be done by ajax in the middle and i guess some php model will be needed
EDIT 2:
View code:
ALL CONTENT FROM DB GOES TO #GRIDS ELEMENT IN THIS FORMAT
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"></script>
<script src="https://npmcdn.com/[email protected]/dist/packery.pkgd.js"></script>
<script src="src/jquery.keep-ratio.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<title>KO web</title>
</head>
<body>
<div class="grid" id="grids">
<div class="grid-item grid-normal">
<div class="grid_content"><img src=""></div>
<div class="grid_title red">
title
</div>
<div class="content_grid">
</div>
</div>
</body>
<script>
$( document ).ready(function() {
//ajax tes
$.ajax({
type:"POST",
url:"testphp.php",
datatype: 'json',
success:function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = " ";
for(i = 0; i < arr.length; i++) {
out +=
"<div id='"+arr[i].ID+"' class='grid-item "+arr[i].shape+"'><div class='grid_content'>"+arr[i].img_holder+"</div><div class='grid_title red'>"+arr[i].naslovhj+"</div><div class='content_grid'></div></div>"
}
out += " ";
document.getElementById("grids").innerHTML = out;
console.log("uspjelo");
}
,
error:function(){
$("#ea").html('There was an error updating the settings');
}
});
//end off ajax test
setTimeout(function(){
$('.grid_title').each(function() {
var mrs = $(this).innerHeight();
$(this).css("margin-bottom", "-" + mrs + "px");
});}, 100);
$( document ).ajaxComplete(function() {
$('.grid').packery({
// options
itemSelector: '.grid-item',
gutter: 0
});
var clickDisabled = false;
counter_p = 0;
$(".grid-item").click(function(){
counter_p ++;
if(counter_p == 1){
$(this).attr("id", "active-grid-item-momentum");
$(this).children(".content_grid").attr("id", "active_cont");
$(this).children(".grid_title").css("display","none");
var width1 = document.getElementById('active-grid-item-momentum').offsetWidth;
var height0 = document.getElementById('active-grid-item-momentum').offsetHeight;
$(this).children(".grid_content").css("height", height0 + "px");
$(this).children(".grid_content").css("width", width1 + "px");
$(this).append( "<div id='close_all'>Test</div>" );
$(this).css("cursor", "default")
document.getElementById('active-grid-item-momentum').style.pointerEvents = 'none';
document.getElementById('active_cont').style.pointerEvents = 'auto';
$(this).children(".grid_content").children("img").css("opacity", "0");
document.getElementById("active_cont").innerHTML="<h1>Sea world</h1><img src='../img/Aqua-Maris-Sea-World-game.png' style='float:left; margin-top:10px; margin-bottom:10px; margin-right:10px;' /><a href='http://www.google.com'>djlkjfkld</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nisi sapien, ut scelerisque diam malesuada ut. Donec eget nibh vitae erat vehicula ullamcorper. In vitae ultricies erat. Nam at dignissim arcu. Nunc nec metus ac sem porttitor pulvinar sed vel ipsum. Phasellus nec velit sapien. Quisque vel pretium purus. In at massa nibh. Aliquam condimentum mauris nunc, ac consequat dolor scelerisque sed. Nullam sed mi vitae massa accumsan tincidunt. Curabitur in sem blandit eros interdum molestie. Sed ultricies sem ac ex consequat mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer sollicitudin nulla ac velit imperdiet gravida.Maecenas sed dictum leo. Mauris ac diam nec ex lobortis blandit in vitae sapien. Etiam a sodales augue, sollicitudin mattis ligula. In elementum ligula nunc, et porta purus tincidunt eu. Etiam bibendum interdum lectus. Sed convallis ornare placerat. Nullam sodales eget dui quis sodales. Donec consequat nisl eget sapien cursus semper. Pellentesque finibus facilisis nulla, sit amet pellentesque justo tristique et. Cras sodales nisl sed est euismod fringilla.Duis lacus ex, volutpat sed maximus et, dapibus in tortor. Vestibulum tristique lectus congue quam suscipit, quis varius leo consectetur. Proin enim eros, pretium sed purus eu, consectetur pulvinar velit. Pellentesque enim nunc, iaculis ut lacus ut, posuere dapibus eros. Integer ac sem molestie sem iaculis cursus. Vivamus quis eros in est molestie luctus eget quis massa. Curabitur ut metus sodales, eleifend dolor sit amet, dapibus magna. Phasellus a est libero. Nunc sed dui at felis varius semper. Ut neque metus, volutpat sed tortor a, venenatis consectetur ex.Ut ullamcorper placerat mattis. Aenean finibus mauris a dui volutpat, at vulputate justo porta. Proin scelerisque eleifend quam eget congue. Nunc laoreet cursus massa sit amet condimentum. Sed sit amet semper augue, et ultricies arcu. Nullam iaculis euismod est interdum tristique. Praesent magna velit, volutpat a varius eget, cursus vel ex. Morbi molestie leo quis accumsan fringilla. Donec in facilisis nisi, sit amet dictum ligula. Aenean vel sodales dolor, nec elementum mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at tristique dolor. Sed blandit venenatis turpis, sed varius nisi euismod a. Integer quis nisl lorem.Sed lorem velit, varius non lacus vitae, tincidunt porttitor nibh. Aliquam facilisis vulputate ex, eget fermentum sapien congue eu. Nunc ac scelerisque ipsum, vel iaculis felis. Pellentesque iaculis, ligula at ullamcorper ullamcorper, erat justo egestas magna, ut egestas quam metus vel enim. Mauris elementum ut ex eget venenatis. Quisque quis porttitor nibh. Quisque fermentum mauris in libero commodo, vel viverra nisl faucibus. Curabitur posuere metus luctus facilisis pellentesque. Integer rutrum augue ac odio tristique eleifend. Integer semper ante vitae dapibus varius. Quisque interdum turpis vel enim tempor sollicitudin quis maximus est. Mauris efficitur dui ac velit mattis ultrices. Curabitur elementum dictum felis, sed eleifend ex elementum sed.! massa accumsan tincidunt. Curabitur in sem blandit eros interdum molestie. Sed ultricies sem ac ex consequat mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer sollicitudin nulla ac velit imperdiet gravida.Maecenas sed dictum leo. Mauris ac diam nec ex lobortis blandit in vitae sapien. Etiam a sodales augue, sollicitudin mattis ligula. In elementum ligula nunc, et porta purus tincidunt eu. Etiam bibendum interdum lectus. Sed convallis ornare placerat. Nullam sodales eget dui quis sodales. Donec consequat nisl eget sapien cursus semper. Pellentesque finibus facilisis nulla, sit amet pellentesque justo tristique et. Cras sodales nisl sed est euismod fringilla.Duis lacus ex, volutpat sed maximus et, dapibus in tortor. Vestibulum tristique lectus congue quam suscipit, quis varius leo consectetur. Proin enim eros, pretium sed purus eu, consectetur pulvinar velit. Pellentesque enim nunc, iaculis ut lacus ut, posuere dapibus eros. Integer ac sem molestie sem iaculis cursus. Vivamus quis eros in est molestie luctus eget quis massa. Curabitur ut metus sodales, eleifend dolor sit amet, dapibus magna. Phasellus a est libero. Nunc sed dui at felis varius semper. Ut neque metus, volutpat sed tortor a, venenatis consectetur ex.Ut ullamcorper placerat mattis. Aenean finibus mauris a dui volutpat, at vulputate justo porta. Proin scelerisque eleifend quam eget congue. Nunc laoreet cursus massa sit amet condimentum. Sed sit amet semper augue, et ultricies arcu. Nullam iaculis euismod est interdum tristique. Praesent magna velit, volutpat a varius eget, cursus vel ex. Morbi molestie leo quis accumsan fringilla. Donec in facilisis nisi, sit amet dictum ligula. Aenean vel sodales dolor, nec elementum mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at tristique dolor. Sed blandit venenatis turpis, sed varius nisi euismod a. Integer quis nisl lorem.Sed lorem velit, varius non lacus vitae, tincidunt porttitor nibh. Aliquam facilisis vulputate ex, eget fermentum sapien congue eu. Nunc ac scelerisque ipsum, vel iaculis felis. Pellentesque iaculis, ligula at ullamcorper ullamcorper, erat justo egestas magna, ut egestas quam metus vel enim. Mauris elementum ut ex eget venenatis. Quisque quis porttitor nibh. Quisque fermentum mauris in libero commodo, vel viverra nisl faucibus. Curabitur posuere metus luctus facilisis pellentesque. Integer rutrum augue ac odio tristique eleifend. Integer semper ante vitae dapibus varius. Quisque interdum turpis vel enim tempor sollicitudin quis maximus est. Mauris efficitur dui ac velit mattis ultrices. Curabitur elementum dictum felis, sed eleifend ex elementum sed.!";
$(this).css("width", "calc(100% - 10px)");
</script>
856
There are multiple ways to get this done but here's is how I would design this using Codeigniter. This assumes you have all the required config settings done properly including those in application/config/config.php, application/config/database.php, application/config/routes.php and optionally application/config/autoload.php.
Using the Model/View/Controller pattern there are multiple files to be created. First, the Controller. This will be the default controller and be Ko_web.php. In routes.php we need this setting: $route['default_controller'] = 'ko_web'; That done you can enter http://example.com and go right to the ko_web controller where the index() function will take over.
/application/controllers/Ko_web.php
class Ko_web extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('postovi_model');
$this->load->helper('url'); //could and maybe should be 'autoloaded'
}
public function index()
{
$data = array(); //empty but $data is set just in case
//get the first 10 rows of users
$rows = $this->postovi_model->get_next_10();
if(isset($rows))
{
//We got rows, make the html from them
//FYI, The array key 'users' becomes the variable $users in the view
$data['users'] = $rows;
//the view is returned as a string of html fully
//populated with rows of user's data
$data['users'] = $this->load->view('user_rows_view', $data, TRUE);
}
//Using method chaining here to load multiple views cause it's cool and effcient
$this->load
//start the page with the reuseable header view file, passing page title too
->view('header_view', array('title' => "User Info"))
//Next, put the rows in the grid structure
//note that if $data['users'] is not set the resulting view will have no user rows
->view('user_grid_view', $data)
//add closing html tags, and in this case the javascript
->view('page_close_view', $data);
}
public function load_more()
{
$offset = $this->input->post('offset');
if($offset)
{
$new_rows = $this->postovi_model->get_next_10($offset);
if(isset($new_rows))
{
$data['users'] = $new_rows;
//this will return (echo) html to the ajax success function
//CI takes care of making the correct response headers - sweet
$this->load->view('user_rows_view', $data);
}
else
{
echo ""; //return an empty string
}
}
}
}
The index() function will load (up to) the first 10 rows of user info.
The model is pretty simple with only one function that returns and array of row arrays.
/application/models/Postovi_model.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Postovi_model extends CI_Model
{
public function __construct()
{
parent::__construct();
$this->load->database();
}
public function get_next_10($offset = 0)
{
$this->db->limit(10, $offset);
$query = $this->db->get("postovi"); //same as "SELECT * FROM postovi LIMIT 10, $offset "
//Got rows? If so return an array of row arrays, or return NULL if nothing retrieved
return $query->num_rows() > 0 ? $query->result_array() : NULL;
}
}
The model returns NULL if no rows are found. The controller checks for this condition and responds accordingly.
The views are broken into multiple files mostly so the markup can easily be reused. The top of each page will need the same information anyway.
application/views/header_view.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"></script>
<script src="https://npmcdn.com/[email protected]/dist/packery.pkgd.js"></script>
<script src="src/jquery.keep-ratio.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<title><?= isset($title) ? $title : "KO web"; ?></title>
</head>
<body>
Note the ability to pass in a title for the page but we have a fall-back if one isn't passed.
Next view is the grid structure. Two things to note here. First is the var $users. The controller created this data from yet another view that will be shown after this one. The value of $users is an html string of the grid rows. If the $users is set it will be echoed to this view and eventually to the browser.
The second thing to note is that I put a "Load More..." button at the bottom of the grid. It is tied to the javascript and will initiate the ajax call. You can implement a scrolling loader after you make sure the ajax works.
/application/views/user_grid_view.php
<div class = "grid" id = "grids">
<div class = "grid-item grid-normal">
<div class = "grid_content"><img src = ""></div>
<div class = "grid_title red">title</div>
<div class = "content_grid" id='user-rows'>
<?php
if(isset($users))
{
echo $users;
}
?>
</div>
</div>
<button type="button" id="more_rows">Load More...</button>
</div>
Next is the view page that builds grid item rows for display
/application/views/user_rows_view.php
<?php
if(isset($users))
{
foreach($users as $user)
{
//It's easier to drop in and out of the PHP interpreter than to concantenate strings.
//There is no execution penalty for doing it.
//Also, it's easer to read and easier to write.
?>
<div id='<?= $user['ID']; ?>' class='grid-item <?= $user['shape']; ?>'>
<div class='grid_content'><?= $user['img_holder']; ?></div>
<div class='grid_title red'> <?= $user['naslovhj']; ?></div>
<!--Is the following needed?-->
<!--<div class='content_grid'></div>-->
</div>
<?php
}
}
Hope I got all the field names right and understood the layout you wanted.
OK, one last view that has the javascript and the appropriate html tags to close a web page.
/application/views/page_close_view.php
<script>
$(document).ready(function () {
var baseURL = <?= base_url(); ?>;
var row_count;
$('#more_rows').on('click', function () {
//what's the offset?
row_count = $('.grid-item').length || 0;
$.ajax({
type: "POST",
url: baseURL + "Ko_web/load_more",
data: {offset: row_count},
datatype: 'html',
success: function (response) {
if (response === "") {
alert("No rows to show.");
} else {
$('#user-rows').append(response);
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR, textStatus, errorThrown);
//alert("your message here");
//$("#ea").html('There was an error updating the settings');
}
});
});
});
/*
* Note: I left out the remaineder of the javascript from your question
* because it did not seem to pertain to the answer you seek.
*/
</script></body></html>
The script counts the number of rows on the screen as identified by the class "grid-item". I cannot really test this but think I got it right. This number is passed to the controller where it is used as the offset for the database query.
Because the controller returns fully formed html it is trivial to insert it in the DOM where it needs to go. I added id='user-rows' to the div that surrounds the content_grid to make it easy to find the right insertion point.
This will generate a lot of questions for you no doubt. Here is the CodeIgniter Documentation which you already have but other readers may be interested in.
There are bound to be typos and maybe some syntax errors. But the logic should be pretty close and the structure is spot on CodeIgniter. Enjoy!
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
