jquery append new rows to ul li via php
Question
this is simplify of my html/php page
<html>
<head>
</head>
<body>
<div class="main_column">
<h2> main column </h2>
<p>content</p>
</div>
<div class="side_column">
<h3> main column </h3>
<ul class="list">
<?php echo printSideColumn(1,3)
</ul>
<a>load 3 next rows</a>
</div>
</body>
</html>
and this is php function in that page:
function printSideColumn($begin,$count)
{
$code = null;
for($i = $begin; $i<$begin + $count ; $i ++)
$code '<li>rows'.$i.'</li>';
return $code;
}
for first one,when I load the page;this function runs: printSideColumn(1,3) so print <li>rows1</li> until <li>rows3</li>
Now I want load next 3 rows via jquery...I mean 3 new rows append to old rows (without refresh old rows)
(so I will have <li>rows1</li> until <li>rows6</li>
how can change this code to do that via JQ?
I try do it myself:
first change a tag:
<a onclick="load();">load 3 next rows</a>
and add a js function:
function load(){
$('#add').on('click', function() { $("ul.list").append('<li>rows</li>');
}, 'html');
});
}
but I do not know how calculae number of last row...and send $begin and $count to jquery...and then jquery call my php function to print that!
could you please help to to complete my code?
2 answers
solution1
1 2015-06-21 00:40:52
To add rows with JS and get the number of the current row you just need to change your JS a little:
$('ul.list').append('<li> row ' + $('ul.list li').size() + '</li>');
I don't understand what else you need.
solution2
0 2015-06-21 00:46:07
I would suggest you have a function to make an ajax call to your php function for the next couple of rows. You can keep track of where you are with javascript variables.
An example will be:
var begin = 1;
var count = 3;
function getRows(b, c) {
$.post('pathToPhp', {begin: b; count: c}, function(data){
$('.list').append(data);
begin = b;
count = c;
});
}
On your php side you will just have to catch the values with $_POST['begin'] and $_POST['count'] and then use your printSideColumn function.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.